CODEWITHSUNDEEP
javascriptleaflet
raylight
raylight

Reputation: 727

How can I style polygons with parameters inside the FeatureCollection properties on Leaflet?

I have a GeoJSON file that has both the FeatureCollection and the Feature types inside it. Basically my code is the following (working sample here):

L.geoJSON(myJSON, { style: style }).addTo(mymap);

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

function getColor(name) {
    return name === "name1" ? "#CF8562" :
            name === "name2" ? "#FFEDA0" :
                                "#000000";
}

And a small sample of the structure of my GeoJSON is the following:

[
  {
    "type": "FeatureCollection",
    "properties": {
        "name" : "name1"
    },
    "features": [
      {
        "type": "Feature",
        "properties": {
            "randomParameter" : "text"
        },
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
            [
            -46.6479847244904,
            -23.553060554172923
            ],
            [
            -46.6479847244904,
            -23.553060554172923
            ],
            [
            -46.64805562776844,
            -23.55318890961171
            ],
            [
            -46.64826795788915,
            -23.552928264599316
            ],
            [
            -46.6479847244904,
            -23.553060554172923
            ]
            ]
          ]
        }
      }]
  },
  {
    "type": "FeatureCollection",
    "properties": {
        "name" : "name2"
    },
    "features": [
      {
        "type": "Feature",
        "properties": {
            "randomParameter" : "text2"
        },
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
            [
            -46.648050596629034,
            -23.55393832474017
            ],
            [
            -46.64758222900779,
            -23.554141824100373
            ],
            [
            -46.64767437978837,
            -23.554322319586415
            ],
            [
            -46.64814729501603,
            -23.55411425749883
            ],
            [
            -46.648050596629034,
            -23.55393832474017
            ]
            ]
          ]
        }
      }]
  }
]

This code is not going to work properly because it doesn't recognize the featureObject.properties.name value. This value exists only inside the FeatureCollection and not the Feature type in my GeoJSON. So, I'm not capable of coloring the polygons according to the data that I have inside the GeoJSON.

I'd like to edit the style of all elements under a FeatureCollection type. However, when I print the object arriving on the style function, I see that it only sees the elements with the Feature type. I've read answers like this one telling that we can edit the style of the FeatureCollection type but I didn't manage to make it work.

I'd like to solve this problem without having to change my GeoJSON structure or changing the properties inside FeatureCollection to Feature. Is it possible? Can I make the style function change the style of everything under the FeatureCollection type instead of the Feature type in my GeoJSON?

Upvotes: 0

Views: 312

Answers (1)

Falke Design
Falke Design

Reputation: 11338

You can first loop through all FeatureCollections and copy the properties to the childs:

https://jsfiddle.net/falkedesign/9yvb46o5/

function copyProps(geojson, props){
    var features = L.Util.isArray(geojson) ? geojson : geojson.features,
      i, len, feature;

    if(props && geojson.properties){
      geojson.properties = Object.assign({},props,geojson.properties); // merge properties, if the feature has the same property as the parent, it will not overwritten
    }

    if (features) {
      for (i = 0, len = features.length; i < len; i++) {
        feature = features[i];
        if (feature.geometries || feature.geometry || feature.features || feature.coordinates) {
          copyProps(feature, geojson.properties);
        }
      }
    }
  }

copyProps(myJSON);
var layersObj = L.geoJSON(myJSON, { style: style }).addTo(mymap);

Upvotes: 1

Related Questions