https://github.com/openplans/Leaflet.AnimatedMarker

A Leaflet plugin to animated a Marker along a polyline
https://github.com/openplans/Leaflet.AnimatedMarker

Last synced: 3 months ago
JSON representation

A Leaflet plugin to animated a Marker along a polyline

• Host: GitHub
• URL: https://github.com/openplans/Leaflet.AnimatedMarker
• Owner: openplans
• License: mit
• Created: 2012-11-08T23:45:07.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2022-01-12T20:56:45.000Z (almost 3 years ago)
• Last Synced: 2024-07-10T11:57:01.743Z (4 months ago)
• Language: CSS
• Homepage: http://openplans.github.com/Leaflet.AnimatedMarker/
• Size: 191 KB
• Stars: 368
• Watchers: 29
• Forks: 110
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Leaflet Animated Marker

[![CDNJS](https://img.shields.io/cdnjs/v/leaflet.AnimatedMarker.svg)](https://cdnjs.com/libraries/leaflet.AnimatedMarker)

This is a Leaflet plugin for animating a marker along a polyline. Check out the [demo](http://openplans.github.com/Leaflet.AnimatedMarker/). 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');

```