Leaflet.js: is it possible to filter geoJSON features by property?

Question

I'm looking around and I see a lot of information about how to show/hide layers. That's cool, but since I can add arbitrary properties to GeoJSON features, I kind of expect to be able to filter them accordingly.

For instance, if I have features 1, 2 & 3 with these properties:

1. small | red | sweet
2. large | green | sour
3. small | red | hot

How would I filter them by size? Or by color or flavor?

Answer 1

Please, see Using GeoJSON with Leaflet - Leaflet - a JavaScript library for interactive maps.

Yes, you can, just add a filter function like:

L.geoJson(someFeatures, {
    filter: function(feature, layer) {
        return feature.properties.show_on_map;
    }
}).addTo(map);

Or if you want dynamic updating, there's a great answer in this other SO question: Leaflet: Update GeoJson filter?

Answer 2

I have added the plugin for filtering markers by tags at Leaflet.tagFilterButton.

If you add tags option to your markers you can filter them by your tags/categories. For example:

L.geoJson(jsonObject, {
    pointToLayer: function(feature, latlng) {
        L.marker(latlng, {
            tags: ['small', 'red', 'sweet']
        });
    }
}).addTo( map );

L.control.tagFilterButton({
    data: ['small', 'red', 'sweet']
}).addTo( map );