Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

Animation Plugin for Leaflet.js

npm version

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

Option Type Default Description
pane Pane 'polymotionPane' Default pane

Motion options

Option Type Default Description
auto Boolean false Indicates auto start animation when motion object added to the map
easing L.Motion.Ease L.Motion.Ease.linear Animation strategy
speed Number 0 Motion speed in KM/H
duration Number 0 Motion duration in ms, 0 means no animation, instant rendering on motionStart()

Marker options

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

Option Type Default Description
removeOnEnd Boolean false Removes marker from map on motion end
showMarker Boolean false Add marker to the map on first line point when motion just added(start can be delayed) to the map

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

Event Value Description
L.Motion.Event.Started { layer } Fires on motion stated on root element only
L.Motion.Event.Paused { layer } Fires on motion paused on root element only
L.Motion.Event.Resumed { layer } Fires on motion resumed on root element only
L.Motion.Event.Ended { layer } Fires on motion ended on root element only
L.Motion.Event.Section { layer } Fires on each motion section change in L.Motion.Seq starting with first one

Dependencies:

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

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