Friday, 2 August 2019

Leaflet js dealing with a lot of markers in a single co-ordinate


I am using leafletjs and leafletjs market clustering.


I have a list of friends and I want to display them all on a map. The problem is that some of them life in a same house, so the co-ordinate for multiple markers would be the same. Issue occurs when there is more than 50 friends living in the same place.


Is there any way, that the markers could be hidden and when a cluster is clicked it instead would display a table containing all of the marker names?



My code that is adding markers:


export function markersFromData(map, markers) {
return (data) => {
const markerList = [];
data.map((v) => {
const title = v.name;
const marker = L.marker(new L.LatLng(v.latitude, v.longitude), {
opacity: 0,
});
marker.bindPopup(title);

markerList.push(marker);
return markers.addLayer(marker);
});
map.addLayer(markers);
// eslint-disable-next-line
const group = new L.featureGroup(markerList);
map.fitBounds(group.getBounds());
};
}


Map example


enter image description here




No comments:

Post a Comment

arcpy - Changing output name when exporting data driven pages to JPG?

Is there a way to save the output JPG, changing the output file name to the page name, instead of page number? I mean changing the script fo...