Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

128
Vistas
change projection system leaflet

I have a .js file that contains some points. Im trying to display these points in a leaflet map. However the coordinate systems are different and when I try changing it, it doesn't work ( the markers are in a very different location) here is my code:

<pre>

let listEl = null;

const init = () => {

listEl = document.querySelector('ul');
const centerLoc = [455494, 384667];
var lv95 = {
epsg: 'EPSG:26191',
def: '+proj=lcc +lat_1=33.3 +lat_0=33.3 +lon_0=-5.4 +k_0=0.999625769 +x_0=500000 +y_0=300000 +a=6378249.2 +b=6356515 +towgs84=31,146,47,0,0,0,0 +units=m +no_defs',
resolutions: [ 4000, 3750, 3500, 3250, 3000, 2750, 2500, 2250, 2000, 1750, 1500, 1250, 1000, 750, 650, 500, 250, 100, 50, 20, 10, 5, 2.5, 2, 1.5, 1, 0.5]
};
var crs = new L.Proj.CRS(lv95.epsg, lv95.def, { 
resolutions: lv95.resolutions
});

const map = L.map('map',{crs: crs,continuousWorld: true,worldCopyJump: false}).setView(centerLoc, 6);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

const locations = points.map((hq) => {
    const props = hq.properties;
    
    const name = `${props.titre} - ${props.id}- ${props.X}- ${props.Y}- ${props.Z}`;
    const lat = props.X;
    const lon = props.Y;

    return {
        name,
        lat,
        lon
    };
});

const frag = document.createDocumentFragment();
locations.forEach((location) => {
    const liEl = document.createElement('li');
    liEl.innerText = location.name;
    liEl.dataset.lat = location.lat;
    liEl.dataset.lon = location.lon;
    frag.appendChild(liEl);
    addMarkerToMap(location, map);
});

listEl.append(frag);

listEl.addEventListener('click', ({ target }) => {
    console.log(target);
    if (target.nodeName !== 'LI') {
        return;
    }
    const lat = Number(target.dataset.lat);
    const lon = Number(target.dataset.lon);

    console.log(lat, lon);
    map.flyTo([lat, lon], 11);
});

};

const addMarkerToMap = ({
lat,
lon,
name
}, map) => {
L.marker([lat, lon]).addTo(map)
    .bindPopup(name);
};

window.onload = init;

I dont know if I made a mistake loading the map or in creating the markers or if it's a different problem completly.

thank you

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda