CODEWITHSUNDEEP
leafletmapbox
redshift
redshift

Reputation: 5227

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

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

Upvotes: 0

Views: 287

Answers (1)

ghybs
ghybs

Reputation: 53350

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/

Upvotes: 1

Related Questions