Mapbox simplestyle blocks popupContent? Using pointToLayer and onEachFeature

Question

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?

yarl yarl · Accepted Answer · 2014-06-02T19:01:46

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

Mapbox simplestyle blocks popupContent? Using pointToLayer and onEachFeature

1 Answers