CODEWITHSUNDEEP
leafletmapbox
Martin Stepanek
Martin Stepanek

Reputation: 23

Mapbox Filter Markers loaded via json

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

Upvotes: 1

Views: 2052

Answers (2)

nrutas
nrutas

Reputation: 5051

tmcw's answer is correct, L.mapbox.featureLayer is confusing

this tutorial helped me!

https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker-tooltip/

Upvotes: 0

tmcw
tmcw

Reputation: 11882

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.

Upvotes: 1

Related Questions