1

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

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/

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.