CODEWITHSUNDEEP
leafletleaflet.markercluster
Scorpioooooon21
Scorpioooooon21

Reputation: 613

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

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.

Upvotes: 1

Views: 922

Answers (2)

Scorpioooooon21
Scorpioooooon21

Reputation: 613

Alright, I delved into this case for 2 day, eventually, I find the bug and fix it.

The geometry type in my geojson dataset is "Multipoint". It seems this plugin Leaflet.markercluster can only cluster view for Multipoints, but not able to display the bindPopup of each layer.

To fix this, I just need convert "Multipoint" to "Point.

Anyway, thanks heaps @Falke Design for your kind hints and the great example.

Upvotes: 0

Falke Design
Falke Design

Reputation: 11338

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);
            }

        });

Upvotes: 2

Related Questions