Leaflet and Mapbox: Styling mapbox markers using L.geoJson?

Question

I am trying to style my marker color using Mapbox's simple-style syntax within a L.geoJson function like so:

L.geoJson(myData, {
    pointToLayer: L.mapbox.marker.style,
    style: function(feature){ 
        return { 'marker-color': '#ffcc00' } 
    }
});

According to mapbox docs, you can use L.mapbox.marker.style within L.geoJson for mapbox's default markers, but I can't seem to figure out how to style it with a different color.

There was a similar question posted here but I could not get it work in my client-side code.

Does anyone know how to do this? Here's a demo fiddle to get started.

Note: I know marker attributes can be added to the actual data that is being consumed, but I need to be able to style the marker within the client-side code because I won't have access to the geoJson featureCollection

ghybs ghybs · Accepted Answer · 2015-11-09T16:19:30

Since you cannot rely on your GeoJSON data having styling properties already defined, you simply need to "patch" it with your own style before passing each feature to L.mapbox.marker.style.

L.geoJson(myData, {
    // Instead of passing directly L.mapbox.marker.style function,
    // implement your own that will first "patch" the current feature
    // with your desired styling properties.
    pointToLayer: function (feature, latlng) {
        feature.properties = {
            "marker-size": "large",
            "marker-color": "#cc0000"
        };
        // Finally call L.mapbox.marker.style with the "patched" feature.
        return L.mapbox.marker.style(feature, latlng);
    }
});

Demo: http://jsfiddle.net/W763Z/6/

Leaflet and Mapbox: Styling mapbox markers using L.geoJson?

1 Answers