Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

126
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!