Search code examples
javascriptjqueryjsonleafletgeojson

How to pass 2 values to json style in leaflet


I need to pass 2 styles, i currently have:

First style:

function style(feature) {
    return {
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7,
        fillColor: getColor(feature.properties.density)
    };
}

The I do:

var classNameMap = <?php echo JSON_encode($classesForCountries); ?>;
geojson = L.geoJson(statesData, {
    style: style,
    style: function(feature) {
        var classes = classNameMap[feature.properties.name];
        return {className: classes};
    },
        onEachFeature: onEachFeature
}).addTo(map);

But that ignores the first style

I tried by passing it as an array:

geojson = L.geoJson(statesData, {
    style: [style, function(){
        var classes = classNameMap[feature.properties.name];
        return {className: classes};
    }],
        onEachFeature: onEachFeature
}).addTo(map);

But yet, first style is ignored.

leaflet docs if this can help, here


Solution

  • This is the solution:

    var classNameMap = <?php echo JSON_encode($classesForCountries); ?>;
    function style(feature) {
        var classes = classNameMap[feature.properties.name];
        return {
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '3',
            fillOpacity: 0.7,
            fillColor: getColor(feature.properties.density),
            className: classes
        };
    }
    
    geojson = L.geoJson(statesData, {
        style: style,
            onEachFeature: onEachFeature
    }).addTo(map);