1

I have leaflet map to display locations of points. Firstly, I use leaflet.ajax plugin to load the points data in GeoJSON format, then I want to enable cluster view using the Leaflet.markercluster plugin.

The cluster view works fine, but the popup only shows "siteid" of the last site in my dataset.

Below is my code, can anyone advise on it?

function map_viewer(map, options){

        var my_data = new L.GeoJSON.AJAX("http://127.0.0.1:8000/my_data/",{
            onEachFeature: function(feature,layer){
            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 have modified my code but the popup window completely disappear.

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

Below is 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.

2 Answers 2

2

If you want to have popup for each layer, you have bind it to each individual layer, not to the cluster:

var my_data = new L.GeoJSON.AJAX("http://127.0.0.1:8000/my_data/",{
  onEachFeature: function(feature, layer){
    layer.bindPopup(feature.properties.siteid); 
  }
});
4
  • Thanks for your advice. But I can’t see any popup if I just bind it to each layer. That is why I tried bind to cluster in my original code. Any idea? Jan 29, 2021 at 21:04
  • Without possibility to try, it's hard to say why it doesn't work for you. Post a short piece (a few points) of your GeoJSON data.
    – TomazicM
    Jan 30, 2021 at 10:07
  • Hi @TomazicM, will the structure of dataset matters? Please refer to my updated on 2020-02-01 with the code and dataset samples. Thank you. Feb 1, 2021 at 0:54
  • You are right, I find the root cause after carefully investigating my dataset. The geometry data type in my dataset is Multipoint, so if I convert the geometry type to Point, the code will work perfectly. Feb 1, 2021 at 3:03
0

Here is my conclusion:

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 to convert "Multipoint" to "Point". Then this code will work perfectly.

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

Anyway, thanks heaps @TomazicM for your kind hints.

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.