Update content of popup on a polygon click event in Leaflet?

Question

I work with Leaflet.js v 1.7.1 and have stuck with a problem of updating popup content data of data The data set is on a local disk Currently I have a local set of data:

var data =[
  {
   type: "Feature",
   properties: {
      id: "1",
    type: "type1",
    pedestrians:"",
    vehicles:""
   },
   geometry: {
      type: "Polygon",
      coordinates: [...]
   }
  },
  {
   type: "Feature",
   properties: {
      id: "2",
    type: "type1",
    pedestrians:"",
    vehicles:""
   },
   geometry: {
      type: "Polygon",
      coordinates: [....]
   }
  }
];

The data are loaded by

 var mygeoJson = L.geoJSON(data, {
   onEachFeature: setFeature,
  style: setStyle,
}).addTo(this.map);

 function setFeature(feature: any, layer: any) {
  if (feature.properties) {
    layer.bindPopup(Object.keys(feature.properties).map(function (k) {
      return k + ": " + feature.properties[k];
    }).join("<br />"), {
      maxHeight: 200
    }); /*loaded and popup bind default properties from data object */
  }
  layer.on({
      "mouseover": highlightFeature,
      "mouseout": resetHighlight,
      "click" : function(e:any){
        /* for simplicity here is a set of new data for update */
       var newpedestrians = 'new pedestrians data';
       var newVehicles = 'new vehicles data' ;

       /* here should be a code to update values of the mygeoJson properties for the clicked shape area*/
      /*pedestrians and vehicles and displayed in popup*/         
      }
    }
  )
}

Data updates would be grabbed from a REST server only for the properties "pedestrians" and "vehicles", not the whole data set.

How can I update data in the popup with new newPedestrians and newVehicles data? For simplicity of the problem API calls are not written, instead I wrote two new values for properties to update.

If my approach is not ideal and the problem cannot be solved based on this idea and piece of the code, can someone, offer a better solution?

Answer 1

One way to display popup with always updated data would be to attach event processing function to feature layer event popupopen and then update popup content in that function every time popup is opened. In this case popup content can initially be set as empty.

Code could then look something like this:

function updatePopup(evt) {
  var propertyValue;

  var newPedestrians = getNewPedestriansData();
  var newVehicles = getNewVehiclesData();

  var feature = evt.target.feature;
  var popupContent = Object.keys(feature.properties).map(function (k) {
    if (k == 'pedestrians')
      propertyValue = newPedestrians;
    else if (k == 'vehicles')
      propertyValue = newVehicles;
    else {
      propertyValue = feature.properties[k];
    }
    return k + ": " + propertyValue;
  }).join("<br />");

  evt.popup.setContent(popupContent);
}

function setFeature(feature: any, layer: any) {
  if (feature.properties) {
    layer.bindPopup('', {
      maxHeight: 200
    });
    layer.on('popupopen', updatePopup);
  }
  
  layer.on({
    "mouseover": highlightFeature,
    "mouseout": resetHighlight,
  });
}

var mygeoJson = L.geoJSON(data, {
  onEachFeature: setFeature,
  style: setStyle,
}).addTo(this.map);