Search code examples
leafletgeojsonlayer

Leaflet: Create layers from geojson "properties"?


I've new to mapping, and I've started creating my map following the documentations and tutorials on http://leafletjs.com. So far so good, I've manage to create a map, add a lot of geosjon data from geojson.io that dislay "popupContent" in a popup. And it works.

But I can't understand how create a few layers to sort all those markers. What I want is too use the "properties" to do it. I have properties named "status" with a values "done", "new" and "active".

Like so:

"type": "Feature",
  "properties": {
    "popupContent": "content",
    "marker-color": "#FFFFFF",
    "title": "title of project",
    "status": "active

Is that possible? To create a 3 layers based on "status" properties?

If you need the html file to look at, say so and I can add it.

Thanks


Solution

  • You can use the filter option of L.geoJson to create separate layers based on the feature properties. Just specify a function that will return true for the features you want included in each layer:

    var activeLayer = L.geoJson(yourGeoJson, {
      filter: function(feature, layer) {
        return (feature.properties.status === "active");
      }
    }).addTo(map);
    
    var newLayer = L.geoJson(yourGeoJson, {
      filter: function(feature, layer) {
        return (feature.properties.status === "new");
      }
    }).addTo(map);
    
    var doneLayer = L.geoJson(yourGeoJson, {
      filter: function(feature, layer) {
        return (feature.properties.status === "done");
      }
    }).addTo(map);