CODEWITHSUNDEEP
javascriptpopupleafletcluster-computing
guilvinec
guilvinec

Reputation: 13

Popup with Leaflet.markercluster in leaflet map

I am a beginner with leaflet and I tested this code (The geojson point data markers are not clustering in leaflet map), to create a cluster maker. However when I click on the markers the information in the pop-up window is always the same. Could you please tell me what to change in the code in order to have a different pop-up window with each click? Please help me. Code is here:

var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var street = {...my_geojson_data...}

var s_light_style = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};


var markers = L.markerClusterGroup();
L.geoJSON(street, {
    onEachFeature : function(feature, layer){
        var popupContent =  '<h4 class = "text-primary">Street Light</h4>' +
                            '<div class="container"><table class="table table-striped">' +
                            '<thead><tr><th>Properties</th><th>Value</th></tr></thead>' +
                            '<tbody><tr><td> Name </td><td>'+ feature.properties.Name +'</td></tr>' +
                            '<tr><td>Elevation </td><td>' + feature.properties.ele +'</td></tr>' +
                            '<tr><td> Power (watt) </td><td>' + feature.properties.Power_Watt + '</td></tr>' +
                            '<tr><td> Pole Height </td><td>' + feature.properties.pole_hgt + '</td></tr>' +
                            '<tr><td> Time </td><td>' + feature.properties.time + '</td></tr>';
        layer.bindPopup(popupContent)
    },
    pointToLayer: function (feature, latlng) {
        return markers.addLayer(L.circleMarker(latlng, s_light_style))
    }
})
map.addLayer(markers);

Upvotes: 1

Views: 369

Answers (1)

ghybs
ghybs

Reputation: 53185

Your pointToLayers function returns your markers MarkerClusterGroup, whereas you should return only the individual (Circle)Marker. Therefore later on your onEachFeature function binds the popup to the entire group.

A simple solution would be to avoid populating your MCG while building your GeoJSON Layer Group, but adding it only at the end:

const geojsonGroup = L.geoJSON({
  pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng);
  }
});
markers.addLayer(geojsonGroup);
map.addLayer(markers);

Upvotes: 1

Related Questions