Refreshing PopUp content in GeoJSON layer in leaflet

Question

I am loading a geojson file using leaflet's L.geoJSON() to display a map.

Initially i have attahced a popup with each feature.The popup shows a certain property "Count". The code is:

var geoJSON = new L.geoJson(var_name,{
        onEachFeature: function(feature,layer){layer.bindPopup('Count :'+feature.properties.Count);},
        style: applyStyle
    }).addTo(map);

This code works fine.

After this, the user initiates an event and i make an ajax call and assign new values to the property "Count" of each feature. I also use the setStyle function so that the style is reassigned based on new values of "Count". Here is the code:

$.ajax({
type: 'GET',
url: 'new_data.json',
dataType: 'json',
success: function(data){

var i;
for(i=0;i<48;i++){

var_name.features[i].properties.Count = data[i];
}
 geoJSON.setStyle(applyStyle);

}
});

The style changes work well but the popup still contains the old value for the property "Count". There is so setPopUp function like setStyle. So how do i make the popUp change its value?

In other words, can we call the onEachFeature method again after the geoJSON layer has been loaded?

P.S.: I am not using same popup content for each feature. After i make the ajax call, i update the "Count" property of each feature. I want the pop-up for each feature to show the value of its new value of "Count" property.

iH8 iH8 · Accepted Answer · 2015-11-04T15:26:37

What you're doing now is using the setStyle method of your L.GeoJSON layer, which when called, iterates all the features contained in the layer and calls the setStyle method of each feature. (If the feature has a setStyle method). Since there is no setPopup method in L.GeoJSON. (it's a very rare use case if you would want the same popup content on each feature) you'll have to iterate the features in your GeoJSON layer yourself and set the new content on the popup itself:

var geojsonLayer = new L.GeoJSON(geojsonCollection, {
    'onEachFeature': function (feature, layer) {
        layer.bindPopup('Initial content');
    }
}).addTo(map);

geojsonLayer.eachLayer(function (layer) {
    layer._popup.setContent('Updated content')
});

Here's an example on Plunker: http://embed.plnkr.co/uYHC8jZtgls351YhsmPS/preview

Refreshing PopUp content in GeoJSON layer in leaflet

2 Answers