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;
});
}
👍 nice work! I'll close this issue since it's solved, but it'll still come up in searches.