3

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?

2
  • 1
    If I understand you correctly, you want to update certain feature properties when popup is requested by click and before it's shown, so that popup displays updated data?
    – TomazicM
    Jan 20, 2022 at 17:01
  • Yes, you are right !
    – StudentB
    Mar 10, 2022 at 11:04

1 Answer 1

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

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.