1

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 );
1

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)
  • Your suggestion worked perfectly. Thank you! I didn't check the documentation properly enough to realise that I was using my functions wrong. – samvita Jun 17 '16 at 8:24
  • Yeah, if you're new to Leaflet it's easy to overlook this kind of things. – IvanSanchez Jun 17 '16 at 8:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.