Leaflet – Custom Info Window for MarkerCluster Instead of Spiderfy Effect

javascriptleafletweb-mapping

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.

Best 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 + '<br>';
        html += name;
    }
    map.openPopup(html, a.layer.getLatLng());
});
Related Question