4

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

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);
|improve this answer|||||
  • Thanks for the guidance. Here was the final solution' // 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, { style: function (feature) { return {}; }, onEachFeature: function (feature, layer) { layer.bindPopup(feature.properties.Sheet_Numb); } }).addTo(map); });' – Map Man Oct 2 '15 at 18:29
  • Just want to point to this related answer, which might be needed if you only pass a feature.properties.MyNumericProperty and it turns out to be a number! The error message ("Argument 1 of Node.appendChild is not an object.") is not descriptive enough: gis.stackexchange.com/a/181799/4972 – Germán Carrillo Jan 23 '17 at 23:26
1

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!

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.