Requirements

Leaflet ^1.0.0

Installation

npm

npm install leaflet.animatedmarker

CDN

<script src="https://unpkg.com/leaflet.animatedmarker/src/AnimatedMarker.js"></script>

Usage

Basic

const line = L.polyline([
  [40.68510, -73.94136],
  [40.68576, -73.94149],
  [40.68649, -73.94165]
]);
const animatedMarker = L.animatedMarker(line.getLatLngs());
map.addLayer(animatedMarker);

With ES Modules

import L from 'leaflet';
import 'leaflet.animatedmarker';
const animatedMarker = L.animatedMarker(line.getLatLngs());

TypeScript

TypeScript definitions are included. The module augments Leaflet's types:

import L from 'leaflet';
import 'leaflet.animatedmarker';
const marker: L.AnimatedMarker = L.animatedMarker(line.getLatLngs(), {
  distance: 300,
  interval: 2000,
  autoStart: false,
  onEnd: () => console.log('Animation complete!')
});

Options

Option	Type	Default	Description
`distance`	`number`	`200`	Distance in meters to travel per interval
`interval`	`number`	`1000`	Time in milliseconds to travel the distance
`autoStart`	`boolean`	`true`	Start animating immediately when added to the map
`onEnd`	`function`	`() => {}`	Callback when animation reaches the end

Plus all standard Leaflet Marker options.

Methods

`start()`

Start the animation from the beginning.

animatedMarker.start();

`stop()`

Stop the animation at the current position.

animatedMarker.stop();

`setLine(latlngs)`

Set a new path for the marker to follow.

animatedMarker.setLine(newPolyline.getLatLngs());

Examples

Custom Speed

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

Manual Control

const animatedMarker = L.animatedMarker(line.getLatLngs(), {
  autoStart: false
});
// Start when ready
animatedMarker.start();
// Stop after 5 seconds
setTimeout(() => {
  animatedMarker.stop();
}, 5000);

Custom Icon

const myIcon = L.icon({
  iconUrl: 'myicon.png'
});
const animatedMarker = L.animatedMarker(line.getLatLngs(), {
  icon: myIcon
});

Callback on Complete

const animatedMarker = L.animatedMarker(line.getLatLngs(), {
  onEnd: function() {
    console.log('Animation finished!');
    map.removeLayer(this);
  }
});

Development

Install dependencies

npm install

Run tests

npm test

Run tests in watch mode

npm run test:watch

Changelog

1.1.0

Fixed: Marker no longer floats to new position when zooming during animation
Added: TypeScript type definitions
Added: UMD module support (AMD, CommonJS, browser globals)
Added: Vitest test suite
Changed: Modernized to ES6 syntax
Changed: Renamed clickable option to interactive (Leaflet 1.x naming)
Removed: Legacy fallback for browsers without CSS3 transitions
Removed: Bower support (deprecated)

1.0.0

Initial release

License

MIT License - OpenPlans