[GIS] How to show feature attributes in a Leaflet popup

geojsonjsonleafletpopup

So I have a JSON file displayed on my leaflet webmap. I would like to have it so a popup will appear when a feature is clicked. Right now it is a polygon feature. How do I call up information from the JSON file (Syriashape.json) so it can be displayed? The fields I would like to display are called "Sheet_Num" and "Date"

Currently, this is what I have:

// load GeoJSON from an external file
$.getJSON("Syriashape.json",function(data){
  // add GeoJSON layer to the map once the file is loaded
  L.geoJson(data).addTo(map).bindPopup("Attributes Popup Here");
});

Best Answer

Look at the docs! You'll see that you need to define other callback methods on the L.geoJson object. Namely:

L.geoJson(data, {
   style: function (feature) {
       return {[style properties here};
   },
   onEachFeature: function (feature, layer) {
       layer.bindPopup(feature.properties.Sheet_Num + </br> + feature.properties.Date);
   }
}).addTo(map);
Related Question