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: '© <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