2

I need to style every feature differently that I pull from a GeoJSON file. However this anonymous style function only changes the style on the first feature it comes across and stops. I am new to Leaflet. Have seen several demos but can't find a reason why this anonymous style function only changes the style of the first feature and not the rest. The getTableData function returns a color from table generated on page load.

Feature example

var countyData = {
  "type": "FeatureCollection",                                                                               

  "features": [
{ "type": "Feature", "id": 0, "properties": { "ENTITYYR": 2010.0, "NAME": "COUNTY1", "FIPS": 25.0, "FIPS_STR": "49025", "COLOR4": 4 }, "geometry": { "type": "Polygon", "coordinates": [ [ Long List Of Coordinates here ] ] } }
, etc

    geojson = L.geoJson(countyData, {
        style: function(feature) {
    switch (feature.properties.NAME) {
        case 'COUNTY1': return {color: '#' + getTableData(feature.properties.NAME)};
        break;
        case 'COUNTY2': return {color: '#' + getTableData(feature.properties.NAME)};
        break;
        case 'COUNTY3': return {color: '#' + getTableData(feature.properties.NAME)};
        break;
        case 'COUNTY4': return {color: '#' + getTableData(feature.properties.NAME)};
        break;
        case 'COUNTY5': return {color: '#' + getTableData(feature.properties.NAME)};
        break;
    }
        },
        onEachFeature: onEachFeature
}).addTo(map);
0

1 Answer 1

3

See example

var countyData = {
        "type": "FeatureCollection",
        "features": [{
                    "type": "Feature",
                    "id": 0,
                    "properties": {
                        "ENTITYYR": 2010.0,
                        "NAME": "COUNTY1",
                        "FIPS": 25.0,
                        "FIPS_STR": "49025",
                        "COLOR4": 4
                    },
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [
                            [Long List Of Coordinates here]
                        ]
                    }
                }, etc

                geojson = L.geoJson(countyData, {
                    style: function(feature) {
                        if (feature.properties.NAME === "COUNTY1") {
                            return {
                                color: "#ff3135",
                                weight: 1
                            };
                        }
                        if (feature.properties.NAME === "COUNTY2") {
                            return {
                                color: "#009b2e",
                                weight: 2
                            };
                        }
                        if (feature.properties.NAME === "COUNTY3") {
                            return {
                                color: "#ce06cb",
                                weight: 3
                            };
                        }
                    },
                    onEachFeature: onEachFeature
                }).addTo(map);

Source https://github.com/bmcbride/bootleaf/blob/master/assets/js/app.js from BootLeaf template http://bmcbride.github.io/bootleaf/

1
  • You are right, but in the onEachFeature layer it must be: onEachFeature: function (feature, layer){} NOT onEachFeature: onEachFeature
    – Geographos
    Nov 12, 2019 at 15:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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