7

I am trying to filter through my geojson polygons and get all data entries with a specific attribute.

I have a layer of polygons describing parks around the city parks.json. I want the user to click on a button and see parks that have picnic areas. I have GeoJson data in the following format:

{"type":"Feature", "geometry":{ "type":"Polygon", "coordinates":[[[long1, lat1],[long2, lat2],[long3, lat3]]]}, "properties": { "Playground": Yes, "Picnic":Yes, "ParkName":"Barr Lake", "ParkStatus":"Open"}

How do I retrieve all of the polygons where "Picnic" = "Yes" and map them?

I tried this with no luck:

var picnic_parks = $("parks.json").filter(' "picnic":"Yes" ').addTo(map);

Improve this question
2
  • How could I add this filter in this script: var featureLayer = L.geoJson(null, { filter: function(feature, layer) { return feature.geometry.coordinates[0] !== 0 && feature.geometry.coordinates[1] !== 0; }, pointToLayer: function (feature, latlng) { return L.marker(latlng, { title: feature.properties["status_title_github"], riseOnHover: true, icon: L.icon({ iconUrl: "assets/pictures/markers/cb0d0c.png", iconSize: [30, 40], iconAnchor: [15, 32] }) }); }, onEachFeature: function (feature, layer) { if (feature.properties) { layer.on({ click: function (e) { identifyFeature(L.stamp(layer)); highligh
    – Tanner A.
    Apr 10, 2018 at 15:54
  • This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
    – Fran Raga
    Apr 10, 2018 at 16:52

1 Answer 1

Reset to default
19

The L.GeoJson class has a built in filter option that you can use to filter your data. Just pass it a function that will return true for the features you want to show:

var picnic_parks = L.geoJson(myJson, {filter: picnicFilter}).addTo(map);

function picnicFilter(feature) {
  if (feature.properties.Picnic === "Yes") return true
}

Here is a fiddle with a working example of this:

http://fiddle.jshell.net/nathansnider/9mgnd389/

Improve this answer
3
  • 1
    Great, this worked! However, I'm observing that I can't have two of these layers displaying at once--both picnic_parks and the complete data L.geoJson(myJson) won't be added to the map together. Is there a workaround?
    – user2192778
    Apr 18, 2016 at 16:48
  • 1
    Hmm, you should have no problem adding layers with different (or no) filtering options from the same GeoJSON. In the jsfiddle, for example, if you add a second layer with var polyLayer2 = L.geoJson(myJson).addTo(map);, it will display both the filtered data and the original unfiltered data. How are you trying to show the complete data?
    – nathansnider
    Apr 18, 2016 at 16:58
  • I'm drawing the full data with L.geoJson(data,{style:myStyle}).addTo(map); }); . I can draw the layers separately but not together. Everything is similar to your example except I'm bringing in my .json with $.getJSON(parks.json) (it's a big file, too much to have in the code). I might have made an error there; might ask another question / play around some more. Thanks again, this was a big step forward for me.
    – user2192778
    Apr 18, 2016 at 17:17

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.