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
Permalink
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

README.md

Leaflet Animated Marker

CDNJS

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