7

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?

Sergey Vyacheslavovich Brunov
  • 17,291
  • 7
  • 48
  • 81
doub1ejack
  • 10,627
  • 20
  • 66
  • 125
  • What are you doing with the geoJSON features? Creating markers? – kielni Feb 27 '14 at 17:02
  • Yeah, I've got markers for daycare centers and they have around 6 properties each. I see that I can add them to layers and toggle the layers, but that seems kind of redundant. I'd rather just show/hide markers based on their properties. Is that possible? – doub1ejack Feb 28 '14 at 20:28
  • Can you post your code that shows how you're creating your markers? You could set the geoJSON properties as classes, then use jQuery to hide/show by class, but it's hard to be more specific than that without seeing your code. – kielni Feb 28 '14 at 21:31

2 Answers2

7

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?

Sergey Vyacheslavovich Brunov
  • 17,291
  • 7
  • 48
  • 81
Mike Lanzetta
  • 341
  • 2
  • 7
1

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 );
Mehmet Aydemir
  • 21
  • 2