[GIS] Leaflet: Style function does not work for point layer

javascriptleaflet

I'm new to Leaflet and I'm not very proficient in Javascript. I've been trying to create a map visualizing a point layer with custom markers but for some reason the marker style as a function just doesn't work whereas marker style as a variable does. I've checked multiple resources and answers but I just can't seem to figure out why – it's probably something simple I'm missing. Here's the code that works:

var geojsonMarkerOptions = {
radius: 2.5,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};

minesLayer= L.geoJson(
mines, 
{ pointToLayer: function(feature, latlng){
    return L.circleMarker(latlng, geojsonMarkerOptions
    );
} }
).addTo( tnmap );

And here's the code that doesn't:

function minesStyle(feature) {
    return {
        radius: 2.5,
        fillColor: "#ff7800",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
    }
}

minesLayer= L.geoJson(
mines, 
{ pointToLayer: function(feature, latlng){
    return L.circleMarker(latlng, {
        style: minesStyle
        }
    );
} }
).addTo( tnmap );

Best Answer

In your second code snippet, you're using the style option for L.GeoJSON as if it were an valid option for L.CircleMarker.

Read the documentation carefully again and ask yourself: Does L.CircleMarker use a style option?

A better way would be to calculate styles inside pointToLayer, e.g.:

var layer = L.geoJson(data, {
    pointToLayer: function(feat, ll) {
        var styleForThisFeature = minesStyle(feat);
        var featureForThisPoint = L.circleMarker(ll, styleForThisFeature);
        return featureForThisPoint;
    }
}).addTo(map)
Related Question