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);
L.motion.polygon([], options, motionOptions, markerOptions).addTo(map);
L.motion.group([], options).addTo(map);
L.motion.seq([], options).addTo(map);
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);
To rotate the marker you need to properly setup motion-base angle on 90* north, so that it can be rotated to the movement direction.
L.motion.polyline([{"lat":50,"lng":0},{"lat":51.15611417450841,"lng":-2.1906730905175213}], {
color:"khaki"
}, null, {
removeOnEnd: true,
icon: L.divIcon({html: "<i class='fa fa-plane fa-2x' aria-hidden='true' motion-base='-48'></i>", iconSize: L.point(19, 24)})
}).motionDuration(7000)
Public methods
L.motion.*
Public methods in all motion objects:
motionStart()
motionStop()
motionPause()
motionResume()
motionToggle()
getMarkers()
L.motion.polyline and L.motion.polygon
Additional methods in polyline and polygon
motionDuration(duration)
motionSpeed(speed)
addLatLng(latLng)
getMarker()
L.motion.seq
addLayer(layer, autostart)
Now we can add new layers to Seq object.
- If it's not started yet, new layers will be added and prepared to start.
- If it's running right now new layer will be added and wait it turn.
- If it's completed, and you want to run new layer right now, additional parameter should be passed.
var planePolyline = L.motion.polyline(planeRoute).motionDuration(2000);
var seqGroup = L.motion.seq([
trackPolyline, shipPolyline
]).addTo(map);
seqGroup.addLayer(planePolyline, true);
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