3

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.

Improve this question

2 Answers 2

Reset to default
4

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());
});
Improve this answer
6
  • Instead of setting names for each marker, is there a way to just reference to the geojson feature the marker is tied to? in the example they iterate through the geojson data and create each individual marker by setting the title and lat and long. Instead I have a variable with geojson data that I create a layer and then add into map.Could something like the clusterclick event listener be placed within the geojson variable? ie. var geoJson= L.geojson(name,{clusterclickevent listener}
    – Diffusion_net
    Commented Jun 30, 2015 at 18:53
  • not sure I understand your question - but regardless of method, turning geojson to a layer requires iterating every feature in the original geojson. onEachFeature is just a hook into this process. Clusters and geojson layer are not related, so the short answer there is no: clusterclick event listener is not an option on L.geojson.
    – toms
    Commented Jun 30, 2015 at 21:21
  • Oh i see, my question then is how do you reference to an attribute within the file? from what I understand var a = geojson[i] is what chooses the feature but then you have title which is set as a[2]. I assume this is because the title variable is stored within 2nd position within array. my geojson file is a feature collection which per feature has a geometry and properties for, so my question is how do i reference to my title attribute when its the third listed attribute within my properties. marker-clustering-realworld.388.html is where I am getting the idea on how to get titles for markers.
    – Diffusion_net
    Commented Jun 30, 2015 at 21:44
  • geojson is a JS object, not an array. See if you can load some geojson up into memory and use the console to browse it to get an idea of the structure. SOME_GEOJSON.features[0].properties.title
    – toms
    Commented Jun 30, 2015 at 21:55
  • Thank You, so I played around and was looking at what values were returned when using the geojson object. I am still getting issues when I iterate it seems to not go through the following line where a = geojson.features[i] : var marker2 = L.marker(new L.LatLng(a.geometry.coordinates), { title: title }); I was looking at the return value of a.geometry.coordinates and of the title variable and all seems to work fine so I do not understand what I am doing wrong. By the way I really appreciate your help toms, I am new to this and your feedback and comments help a lot.
    – Diffusion_net
    Commented Jul 1, 2015 at 20:37
0

Maybe this could help other people:

Another good alternative is given here

Instead of a spiderfy effect, the data are shown in a popup.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.