Animation Plugin for Leaflet.js

General information

A leaflet plugin which allows users to apply animation.

Downloads

NPM

npm install --save leaflet.motion

YARN

yarn add leaflet.motion

Usage

Include script:

<script src="dist/leaflet.motion.min.js"></script>

Main options:

L.motion.polyline([], options, motionOptions, markerOptions).addTo(map); //  as L.polyline
L.motion.polygon([], options, motionOptions, markerOptions).addTo(map); //  as L.polygon
L.motion.group([], options).addTo(map); //  as L.featureGroup - to run all animation at same time
L.motion.seq([], options).addTo(map); //  as L.featureGroup - to setup seq for animations.

Options:

You can pass a number of options to the plugin to control various settings.

Default control options

Motion options

Marker options

All MarkerOptions that you can add to any marker + one more:

Here's an example of passing through some options:

L.motion.polyline([[50,0], [60,10]], {
	color: "transparent"
}, {
	auto: true,
	duration: 3000,
	easing: L.Motion.Ease.easeInOutQuart
}, {
	removeOnEnd: true,
	showMarker: true,
	icon: L.divIcon({html: "<i class='fa fa-car fa-2x' aria-hidden='true'></i>", iconSize: L.point(27.5, 24)})
}).addTo(map);

Public methods

L.motion.*

Public methods in all motion objects:

motionStart() // to start motion.
motionStop() // to stop motion.
motionPause() // to pause motion.
motionResume() // to resume paused motion.
motionToggle() // to pause motion, if it's running. To start motion if it's not. Or just resume.
getMarkers() // to get multi-dimensional array of markers from all motion sub components.

L.motion.polyline and L.motion.polygon

Additional methods in polyline and polygon

// - expected duration for motion in milliseconds, can be used after motion is created to start animation
// and can be used during animation to change object animation duration.
motionDuration(duration)

// - expected motion speed in KM/H, can be used after motion is created to start animation
// and can be used during animation to change object speed.
motionSpeed(speed)

addLatLng(latLng) // - allows to add additional point in the end for the motion animation.

 // Returns marker (if markerOptions is passed on creation) to attach needed behavior.
 // Marker will be added to the map only during animation
getMarker()

Motion Events

Dependencies:

Please include next leaflet modules to make it work properly, or just whole Leaflet.js :)

L.Polygon
L.Polyline
L.FeatureGroup
L.Util