How do I show feature attributes in a Leaflet popup?

Question

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

Answer 1

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

Answer 2

I just wanted to mention that column name where you are getting the strings for your popup box is CAPS SENSITIVE.

e.g. >>> Layer.bindPopup(feature.properties.Sheet_Num) <<<< Sheet_Num is capitalised. sheet_num will return an empty box.

:-) This stumped me for the last few hours!