[GIS] How to use onEachFeature in Leaflet.js map

leaflet

I have a JSFiddle and I am trying to implement onEachFeature (at the bottom) of the code.

Each polygon has its own popupContent as in the onEachFeature tutorial shown on Leaflet.js.com.

However, I get stuck trying to merge together these pieces of code:

var myGeoJson = L.geoJson(myData, {
  style: style
}).addTo(map).bindPopup("test");
var popup = L.popup();


function onEachFeature(feature, layer) {
    if (feature.properties && feature.properties.popupContent) {
        layer.bindPopup(feature.properties.popupContent);
    }
}

var myGeoJson = L.geoJson(geojsonFeature, {
    onEachFeature: onEachFeature
}).addTo(map);

Ultimately, I'm just trying to pass in the features.properties.popupContent as a variable any way possible without losing my style properties (fill color, etc).

Best Answer

Try this fiddle.

You are close with the code. You can pass style and onEachFeature:

var myGeoJson = L.geoJson(myData, {
  style: style,
  onEachFeature: onEachFeature
}).addTo(map);

Also, in myData, one of the features had a property called name instead of popupContent.

Related Question