Mapbox Filter Markers loaded via json

Question

I am looking for solution to add filter (not checkbox) to my site. I have this code loading blank map from Mapbox and added Markers from JSON file. I was trying to add setFilter function, but probably I am using it wrong. I would like to filter items by category property from my JSON file.

<script>
L.mapbox.accessToken = '*************';

  var baseLayer = L.mapbox.tileLayer('test****');
  var markers = L.markerClusterGroup();

  // CALL THE GEOJSON HERE
  jQuery.getJSON("locations.geojson", function(data) {

    var geojson = L.geoJson(data, {
      onEachFeature: function (feature, layer) {
        // USE A CUSTOM MARKER
        layer.setIcon(L.mapbox.marker.icon({'marker-symbol': 'circle-stroked', 'marker-color': '004E90'}));
        // ADD A POPUP
        layer.bindPopup("<h1>" + feature.properties.title + "</h1><p>" + feature.properties.description + "</p><p><a href=' + feature.properties.website + '>" + feature.properties.website + "</a></p>");
         layer.on('mouseover', function (e) {
            this.openPopup();
        });
        layer.on('mouseout', function (e) {
            this.closePopup();
        });

      }
    });


    markers.addLayer(geojson);

    // CONSTRUCT THE MAP
    var map = L.map('map', {
        searchControl: {layer: markers},
        zoom: 6,
        center: [51.505, -0.09],
        maxZoom: 13
        })
        .setView([62.965, 19.929], 5)
        .fitBounds(markers.getBounds());

    baseLayer.addTo(map);
    markers.addTo(map);
    L.control.fullscreen().addTo(map);
  });




    </script>

Could you please help me add filter buttons (something like here: https://www.mapbox.com/mapbox.js/example/v1.0.0/filtering-markers) PS: I think I tried all examples from Mapbox website, yet seems my skills are very limited here.

Thank you

tmcw tmcw · Accepted Answer · 2014-10-27T22:03:02

I was trying to add setFilter function, but probably I am using it wrong. I would like to filter items by category property from my JSON file.

This code example is using L.geoJson to load the markers into your map. Like the Mapbox example, you'll need to use L.mapbox.featureLayer instead, since it includes the setFilter function and L.geoJson does not.

Mapbox Filter Markers loaded via json

2 Answers