A Leaflet plugin to animated a Marker along a polyline
CSS JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Latest commit 3cbfe2b Apr 18, 2017
Failed to load latest commit information.
example Update leaflet version. Dec 20, 2016
src Fix typo Apr 18, 2017
.gitignore initial commit May 25, 2012
LICENSE Add License file Sep 28, 2012
README.md Add CDNJS badge in readme Dec 23, 2016
bower.json Create bower.json Jan 15, 2016
package.json Add license. Dec 20, 2016


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


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

setTimeout(function() {
  // Stop the animation
}, 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