Sunday 27 January 2019

javascript - Leaflet MarkerCluster custom info window instead of spiderfy effect


So I have been experimenting with the Leaflet Marker Cluster and was wondering if there is a way to disable the spiderfy animation and change the event when cluster is clicked on? Instead the clicking of cluster would lead to an info window showing list of names(a list of each name of event within cluster, e.g. the cluster is 7 points stacked, when you click it displays an info window with the name of each event that occurred at the time) attributes instead.


It seems that setting spiderflyOnMaxZoom option to false seems to shut down the spiderfy animation.



Answer



first, disable the spiderfy and zoom effects:


markers = new L.MarkerClusterGroup({ 
spiderfyOnMaxZoom: false,
showCoverageOnHover: false,
zoomToBoundsOnClick: false
});


then add a clusterclick event listener and construct a popup for the cluster. This assumes you have added name to each marker when constructing the marker cluster (see example here with a title attribute):


markers.on('clusterclick', function (a) {
var html = '';
var markers = a.layer.getAllChildMarkers();
for (var i = 0; i < markers.length; i++) {
var name = markers[i].options.name + '
';
html += name;
}
map.openPopup(html, a.layer.getLatLng());

});

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...