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);
nmtoken
  • 13,355
  • 5
  • 38
  • 87
user1015711
  • 21
  • 1
  • 2

1 Answers1

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/

spatialhast
  • 3,631
  • 2
  • 27
  • 52
  • You are right, but in the onEachFeature layer it must be: onEachFeature: function (feature, layer){} NOT onEachFeature: onEachFeature – Geographos Nov 12 '19 at 15:36