0

In a Leaflet map, when a point feature is clicked I want to capture its attributes and pass them onto some variables. The point feature is part of a cluster. The leaflet marker cluster is sourced as below:

  <!--leaflet marker cluser-->
       <script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
        <link href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" rel="stylesheet">
        <link href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" rel="stylesheet"

Point feature and the cluster is defined as below:

var mcPri = L.markerClusterGroup();

var schoolP = new L.GeoJSON.AJAX('data/schools.json', {pointToLayer:function(feature,latlng){
                var str = "<h6><b>"+feature.properties.sch_name+"<br>School</h6>";
                     return mcPri.addLayer(L.marker(latlng,{icon: schIcon}).bindPopup(str));
                                               
                }});

I am trying to capture attribute info when clicked as below:

var id, sch_name;
       schoolP.on('click', function(e) {  
            console.log(e);
            coord = e.latlng;
            latitude = e.latlng.lat;
            longitude = e.latlng.lng;
            id=e.propagatedFrom.feature.properties.id;
            sch_name=e.propagatedFrom.feature.properties.sch_name;
        }) 

There is no e.propagedFrom.feature in the console.log. Screenshot is below: enter image description here

However, if the point feature is not part of a cluster, then it works fine.

var schoolP = new L.GeoJSON.AJAX('data/schools.json', {pointToLayer:function(feature,latlng){
                var str = "<h6><b>"+feature.properties.sch_name+"<br>School</h6>";
                     return L.marker(latlng,{icon: schIcon}).bindPopup(str));


                                           
            }});

Screenshot without cluster is below: enter image description here

How can I get the attributes of a point features which are part of a cluster? I could not find similar questions in the forum.

0

1 Answer 1

1

When you are creating markers and adding them to marker cluster with the pointToLayer option function of L.GeoJSON.AJAX, you are not returning created marker

return L.marker(latlng,{icon: schIcon}).bindPopup(str);

but clustered marker

return mcPri.addLayer(L.marker(latlng,{icon: schIcon}).bindPopup(str));

This interferes with the process of assigning feature property to the original nonclustered marker.

One possible solution for this is to return original marker in the pointToLayer option function. Code could then look like this:

var schoolP = new L.GeoJSON.AJAX('data/schools.json', {
  pointToLayer: function(feature, latlng) {
    var str = "<h6><b>" + feature.properties.sch_name + "<br>School</h6>";
    var marker = L.marker(latlng,{icon: schIcon}).bindPopup(str);
    mcPri.addLayer(marker);
    return marker;
  }
});

Personally I would rather do it with onEachFeature option function:

var schoolP = new L.GeoJSON.AJAX('data/schools.json', {
  onEachFeature: function(feature, layer) {
    var str = "<h6><b>" + feature.properties.sch_name + "<br>School</h6>";
    layer.bindPopup(str);
    layer.setIcon(schIcon);
    mcPri.addLayer(layer);
  }
});
4
  • Thanks. This works as expected but the cluster is behaving bit odd. It does not cluster the marker when zoom in and out like earlier. Anyway, I am accepting the answer because it solves the original issue of not being able to retrieve attributes of markers in a clusterGroup. It is now possible. I will look into cluster option in bit detail to make it work as before. Jul 14, 2023 at 2:49
  • It works OK for me, so there must be something wrong with your code. See working JSFiddle: jsfiddle.net/TomazicM/nr45yqvg
    – TomazicM
    Jul 14, 2023 at 8:59
  • Your code is similar to mine but somehow clustering is behaving odd: 1) it does not cluster like before (leaves some markers un-clustered even at zoom level 6). 2) when I turn off the layer from layer control, it turns it off, but as soon as I zoom in/out, the cluster and the marker start re-appearing even when the layer is still turned off in the layer control. So it is bit odd. I will re-check the whole code and see what is causing the issue, it might be the same issue that I posted in another question where the markers get loaded even when I comment out: //schoolP.addTo(mymap); Jul 16, 2023 at 23:59
  • I found the issue. Leaflet control search was making look like clustering is not working as expected. When it is disabled clustering as well as e.propgatedFrom.feature all working fine. Jul 18, 2023 at 2:26

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.