i am using open street map of leaflet template in my project.i have multiple markers but when i open map all marker are pointed on single point on map even they have different cordinates. and when i drag map then markers are not fix on map, all markers move on map.please provide solution to fix markers on map
createPhysicalMap(containerId, markers) {
const map = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 100,
minZoom: 2,
zoom: 10,
noWrap: true,
attribution: ''
});
const phyMap = this.initialisePhysicalMap(containerId, markers, map);
return phyMap;
}
i want to fix all markers to there cordinates when i drag and zoom in , zoom out in map
initialisePhysicalMap(containerId, markers, map) {
// if previously created map, make its id null
const container = L.DomUtil.get(containerId);
if (container !== null) {
container._leaflet_id = null;
}
let physicalMap;
if (markers instanceof Array) {
if (markers && markers.length) {
// set map markers
markers.forEach(marker => {
physicalMap = L.map(containerId, {
center: new L.LatLng(marker.lat, marker.lng),
zoom: 13,
layers: [map],
worldCopyJump: false,
maxBounds: [[-90, -180], [90, 180]]
});
const mark = L.marker([marker.lat, marker.lng], { icon: this.markerIcon, title: marker.label ,draggable: false,dragging:false,autoPan: false}).addTo(physicalMap)
.on('mouseover', function() {
const popupContent = `
<html>
<head>
<style>.....
</style>
<body>....
</body>
</head>
</html>`
const popup = this.bindPopup(popupContent);
popup.openPopup();
const popupContainer = document.getElementById('hover');
popupContainer.addEventListener('mouseout', function(event) {
const relatedTarget = event.relatedTarget as HTMLElement;
if (!popupContainer.contains(relatedTarget)) {
popup.closePopup();
}
});
});
});
}