CODEWITHSUNDEEP
javascriptgeocodingleafletgeojsonmapbox
nathanbweb
nathanbweb

Reputation: 717

Mapbox simplestyle blocks popupContent? Using pointToLayer and onEachFeature

I'm using this function in Mapbox with geoJson to use styled markers from simplestyle 

var groupThree = new L.LayerGroup();
L.geoJson(layerThree, {
    pointToLayer: L.mapbox.marker.style,
    style: function (feature) {
        return feature.properties;
    }
}, {
    onEachFeature: onEachFeature
}).addTo(groupThree);

But when I run it, I can't get a popup to appear when I click on the marker. Here's the function for popupContent:

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

Here's my fiddle showing markers without simplestyle that have working popups, and markers with simplestyle whose popups aren't working.

Are pointToLayer and onEachFeature interfering somehow? How can I make it work?

Upvotes: 0

Views: 320

Answers (1)

yarl
yarl

Reputation: 3195

Everything is OK except one syntax error:

var groupTwo = new L.LayerGroup();
L.geoJson(layerTwo, {
  pointToLayer: L.mapbox.marker.style,
  style: function(feature) { return feature.properties; }
}, {onEachFeature: onEachFeature}).addTo(groupTwo);
 ^
 ^

Right here you are passing onEachFeature as a separate parameter of L.geoJson, but there is no third parameter in L.geoJson. So basically you created two objects instead of one.

Fixed:

var groupTwo = new L.LayerGroup();
L.geoJson(layerTwo, {
  pointToLayer: L.mapbox.marker.style,
  style: function(feature) { return feature.properties; },
  onEachFeature: onEachFeature
}).addTo(groupTwo);

Same situation in groupThree.

Working JSFiddle

Upvotes: 1

Related Questions