Read Multipolygon geoJson data and display on Leaflet map

Question

I would like to read/display geoJson data on a Leaflet map. I have 10 multipolygons stored in the geoJson file and would like to color each in a different color.

Reading the documentation on Leaflet's website , I used the following code to read and color the polygons:

//Adding multipolygons to map
L.geoJSON(dataName, {
    style: function(feature) {
        switch (feature.properties.id) {
            case '100': return {color: "#ff0000"};
            case '200':   return {color: "#0ff000"};
        ...
        case '1000':   return {color: "#0000ff"};
        }
    }
}).addTo(map);

And this is the datafile:

//Data file
var dataName = {"type": "FeatureCollection", "features":[

{ "type":"Feature","id":100,"properties":{"id":"100","count":0},"crs":{"type":"name","properties":{"name":"GEODATA"}},
"geometry":{"type":"MultiPolygon","coordinates":[MANY COORDINATES]
}},
{"type":"Feature","id":200,"properties":{"id":"200","count":0},"crs":{"type":"name","properties":{"name":"GEODATA"}},
"geometry":{"type":"MultiPolygon","coordinates":[MANY COORDINATES]
}},

...

{"type":"Feature","id":1000,"properties":{"id":"1000","count":0},"crs":{"type":"name","properties":{"name":"GEODATA"}},
"geometry":{"type":"MultiPolygon","coordinates":[MANY COORDINATES]
}]}

Nothing is displayed. I think the error lies inside the function. Not really sure what "feature" does. Any clues?

Thx!

Answer 1

It looks like you should be using dataName.features ?

L.geoJSON(dataName, {

Should be:

L.geoJSON(dataName.features, {

Here is a code snippet from another answer I made:

geojson = L.geoJson(myGeoJson.features, { onEachFeature: onEachFeature, style: styleFeature, }).addTo(myLeafletMap);