Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
Apr 18, 2017
May 25, 2012
Sep 28, 2012

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

Install via NPM

npm install -S leaflet.animatedmarker

Inclusion via npm

require('leaflet.animatedmarker/src/AnimatedMarker');
You can’t perform that action at this time.