leaflet.markercluster - Leaflet marker.cluster Popup on the geojson data loaded by leaflet ajax

Question

I want to create a leaflet map to display site locations. The site data was loaded by leaflet ajax in the geojson format.

Then I use Leaflet.markercluster to create a cluster view and it works fine. But it seems the popup only shows the last site, no matter which icon I click on.

Here is my original code

function map_viewer(map, options){

        var my_data = new L.GeoJSON.AJAX("http://127.0.0.1:8000/my_data/",{
            onEachFeature: function(feature,layer){
            layer.bindPopup(feature.properties.siteid);

            clusters.on('click', function (e) {              
            this.bindPopup(feature.properties.siteid); 
            });
            }

        });

        var clusters = L.markerClusterGroup();
        my_data.on('data:loaded', function() 
        {
        clusters.addLayer(my_data);
        map.addLayer(clusters);
        });
        
        

        var groupedOverlays = {
          "Layers": {
            "cluster view":  clusters   
          }
        };

        L.control.groupedLayers(groupedOverlays).addTo(map);
    }

Updated on 2021-02-01:

I realise there are a few similar cases after go searching on google. However, when I refine my code based on the suggestion, the popup window never show up anymore:

    function map_viewer(map, options){
            var clusters = L.markerClusterGroup();
            var my_data = new L.GeoJSON.AJAX("http://127.0.0.1:8000/my_data/",{
                onEachFeature: function(feature,layer){
                layer.bindPopup(feature.properties.siteid);
                }
    
            });
    
            my_data.on('data:loaded', function() 
            {
            clusters.addLayer(my_data);
            map.addLayer(clusters);
            });
    
        }

Also, please refer to below a small part of the importing geojson dataset.

{"type": "FeatureCollection", "crs": 
{"type": "name", "properties": {"name": "EPSG:4326"}}, "features": [
{"type": "Feature", "properties": {"siteid": 1, "latitude": -28.004959, "longitude": 153.428117, "pk": "1"}, "geometry": {"type": "MultiPoint", "coordinates": [[153.428117, -28.004959]]}}, 
{"type": "Feature", "properties": {"siteid": 2, "latitude": -33.870436, "longitude": 151.225013, "pk": "2"}, "geometry": {"type": "MultiPoint", "coordinates": [[151.225013, -33.870436]]}}, 
{"type": "Feature", "properties": {"siteid": 3, "latitude": -33.92677, "longitude": 151.21356, "pk": "3"}, "geometry": {"type": "MultiPoint", "coordinates": [[151.21356, -33.92677]]}}, 
{"type": "Feature", "properties": {"siteid": 4, "latitude": -33.854711, "longitude": 150.987657, "pk": "4"}, "geometry": {"type": "MultiPoint", "coordinates": [[150.987657, -33.854711]]}}, 

Conclusion:

I have fixed the issue just by converting the geometry type in my geojson dataset from "Multipoint" to "Point". It seems this plugin Leaflet.markercluster can only cluster view for Multipoints, but not able to display the bindPopup of each layer.

question from:https://stackoverflow.com/questions/65947456/leaflet-marker-cluster-popup-on-the-geojson-data-loaded-by-leaflet-ajax

Answer 1

Fo me it is clear why the popup has the last id, because in the onEachFeature function you bind/overwrite every time the popup to the clusters with the new siteid and so the last one is applied.

But when you add a popup to the the complete markercluster all layers have the same popup. So change your code to:

        var my_data = new L.GeoJSON.AJAX("http://127.0.0.1:8000/my_data/",{
            onEachFeature: function(feature,layer){
               layer.bindPopup(feature.properties.siteid);
            }

        });