Leaflet Animated Marker

This is a Leaflet plugin for animating a marker along a polyline. Check out the demo. Feedback appreciated!

How does it work?

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).

How can I use it?

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);

How do I change the rate?

var animatedMarker = L.animatedMarker(line.getLatLngs(), {
  distance: 300,  // meters
  interval: 2000, // milliseconds
});

What if I don't want it to animate right away? Or need to stop it halfway through?

var animatedMarker = L.animatedMarker(line.getLatLngs(), {
  autoStart: false
});

// Start when you're ready
animatedMarker.start();

setTimeout(function() {
  // Stop the animation
  animatedMarker.stop();
}, 2000);

Can I give it a custom icon?

Yep! Just like a standard Leaflet.Marker layer.

var myIcon = L.icon({
  iconUrl: 'myicon.png'
});

var animatedMarker = L.animatedMarker(line.getLatLngs(), {
  icon: myIcon
});

Can I make the marker explode when it gets to the end of the line?

Sure! Just use the onEnd callback.

var animatedMarker = L.animatedMarker(line.getLatLngs(), {
  onEnd: function() {
    // TODO: blow up this marker
  }
});

Install via NPM

npm install -S leaflet.animatedmarker

Inclusion via npm

require('leaflet.animatedmarker/src/AnimatedMarker');