This is a Leaflet plugin for animating a marker along a polyline. Check out the demo. Feedback appreciated!
It uses CSS3 animations to move the marker from point to point at a specific rate (meter per millisecond). For ancient browsers that don't support CSS3, the polyline is chunked into distance segments and moved per interval (not so great).
The following code will create an AnimatedMarker that moves along line, assuming a Leaflet.Map called map.
var line = L.polyline([[40.68510, -73.94136],[40.68576, -73.94149],[40.68649, -73.94165]]),
animatedMarker = L.animatedMarker(line.getLatLngs());
map.addLayer(animatedMarker);
var animatedMarker = L.animatedMarker(line.getLatLngs(), {
distance: 300, // meters
interval: 2000, // milliseconds
});
var animatedMarker = L.animatedMarker(line.getLatLngs(), {
autoStart: false
});
// Start when you're ready
animatedMarker.start();
setTimeout(function() {
// Stop the animation
animatedMarker.stop();
}, 2000);
Yep! Just like a standard Leaflet.Marker layer.
var myIcon = L.icon({
iconUrl: 'myicon.png'
});
var animatedMarker = L.animatedMarker(line.getLatLngs(), {
icon: myIcon
});
Sure! Just use the onEnd callback.
var animatedMarker = L.animatedMarker(line.getLatLngs(), {
onEnd: function() {
// TODO: blow up this marker
}
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent