mapbox/leaflet-omnivore

Possible to use setFilter on polyline draw/animation?

Closed this issue · 2 comments

Hey everyone, wondering if I can follow the mapbox radius search filter example here:
https://www.mapbox.com/mapbox.js/example/v1.0.0/marker-radius-search/

And use setFilter on a polyline animation, so as the add(); function goes it reveals markers on the map from the csv layer. I am trying this right now but get a distanceTo undefined error in this configuration and then adding the setFilter after add(); results in no change... apologies if this is wrong place for setFilter question, I assume it is common/part of Omnivore.

Many thanks,
mapbox/JS newb

var RADIUS = 3218;
var firstPath = L.polyline([], line_options).on('add', function(e) {
    csvLayer.setFilter(function showStations(feature) {
        return e.target._latlngs.distanceTo(L.latLng(
        feature.geometry.coordinates[1],
        feature.geometry.coordinates[0])) < RADIUS;
        });
}).addTo(map);
var p = 0;
add();
function add() {
firstPath.addLatLng(
    L.latLng(startString[p][0],startString[p][1]));
    if (++p < startString.length) window.setTimeout(add, 100);
}    

Just got this working... since we're using the add() function for building the polyline a listener isn't needed. Just run the setFilter in the animation function. Ok, everyone laugh at the newb. Feel free to delete this, unless you want to leave for others 👍

function add() {
            firstPath.addLatLng(
    L.latLng(startString[p][0],startString[p][1]));


if (++p < startString.length) window.setTimeout(add, 100);

        csvLayer.setFilter(function showStations(feature) {
    console.log(feature);
    return L.latLng(startString[p]).distanceTo(L.latLng(
            feature.geometry.coordinates[1],
            feature.geometry.coordinates[0])) < RADIUS;
});

    }   
tmcw commented

👍 nice work! I'll close this issue since it's solved, but it'll still come up in searches.