How to filter Mapbox.js markers that were feed from Omnivore(csv)

Question

Hiya all I am trying to filter some markers I have feed from omnivore.js from a CSV. I am trying to follow this tut https://www.mapbox.com/mapbox.js/example/v1.0.0/markers-with-multiple-filters/

But I keep getting an error:

markers.setFilter is not a function

<script>
    L.mapbox.accessToken = '*******';
    var map = L.mapbox.map('map', 'mapbox.streets').setView([38, -95], 4);

    var markers = omnivore.csv('/test.csv', L.mapbox.featureLayer())
        .on('ready', function(layer) {

            this.eachLayer(function(marker) {
                if (marker.toGeoJSON().properties.AGE > '70') {
                    marker.setIcon(L.mapbox.marker.icon({
                        'marker-color': '#258369',
                        'marker-size': 'large'
                    }));
                } else {
                    marker.setIcon(L.mapbox.marker.icon({}));
                }
                marker.bindPopup(marker.toGeoJSON().properties.FN + ', ' +
                    marker.toGeoJSON().properties.LN + ', ' + marker.toGeoJSON().properties.GENDER);
            });
        }).addTo(map);
    console.log(markers);

    $('.menu-ui a').on('click', function() {
        // For each filter link, get the 'data-filter' attribute value.
        var filter = $(this).data('filter');
        $(this).addClass('active').siblings().removeClass('active');
        markers.setFilter(function(f) {
            // If the data-filter attribute is set to "all", return
            // all (true). Otherwise, filter on markers that have
            // a value set to true based on the filter name.
            return (filter === 'all') ? true : f.properties[filter] === true;
        });
        return false;
    });

</script>

My CSV contains some properties which is what I'd like to use to filter this results. When I console.log the markers I see them being passed inside the array in Layers->feature->properties.

Now the difference between the tutorial and my implementation is that I am using Omnivore instead of setGeoJson. I do not know if it matters but this is contained in a blade.php template from laravel 5.2 Thanks in advance for any help.

ghybs ghybs · Accepted Answer · 2016-03-14T07:13:09

I suspect that is because your markers variable is assigned the result of omnivore.csv(), which is a normal L.GeoJSON object, and not a mapbox feature layer.

leaflet-omnivore API says:

By default, the library will construct a L.geoJson() layer internally

That is why you cannot use markers.setFilter().

You could simply assigned your markers variable with a new L.mapbox.featureLayer() beforehand, and pass it as 3rd argument (customLayer) of omnivore.csv.

Notice by the way that you were also missing the 2nd argument parser_options (refer to leaflet-omnivore API).

var markers = L.mapbox.featureLayer();

omnivore.csv('/test.csv', {}, markers).on(/* etc. */);

If this does not solve your issue, please try to provide a JSFiddle or Plunker that reproduces your problem and error message.

How to filter Mapbox.js markers that were feed from Omnivore(csv)

1 Answers