Skip to content

L.MoveMarker is a leaflet plugin that is used to create moving marker and also trail polyline animation.

License

Notifications You must be signed in to change notification settings

dekguh/Leaflet.MoveMarker

Repository files navigation

General Information

L.MoveMarker is a leaflet plugin that is used to create moving marker and also trail polylines animation, equipped with a variety of features that are quite complete. plugin currently built in leaflet version ^1.9.2.

Feature

Marker Polyline
animate marker animate polyline
duration by speed duration by speed ❌
rotate marker show/hide polyline
show/hide marker limit max polyline length
disable/enable animate marker disable/enable animate polyline
stop animate marker stop animate polyline
follow marker when moving

How to install

you can go to npm package

npm i l.movemarker

Import

if you are using ES6, you can import

import 'l.movemarker'

Demo

demo description
basic demo (codesandbox) basic demo is a simple usage example
basic demo (github) basic demo is a simple usage example
real case demo an example of a real L.MoveMarker implementation using multiple markers and the lat lng mock API

First Call

prevLatLng = [lat, lng] (required) first position nextLatLng = [lat, lng] (optional) it will be call animate to next position if you just fill lat lng without nextLatLng, it will still work and will only create marker that are positioned in prevLatLng

const instance = L.MoveMarker(
  [[prevLatLng], [nextLatLng]],
  polylineOptions,
  markerOptions,
  featureGroupOtions
)

the L.MoveMarker will return the instance layer L.FeatureGroup and it inside have many layers L.MotionLine and one layer L.MotionMarker.

Options

Polyline Options

props type default value description
color string red used to set the color of the polylines
weight number 4 used to set the weight of the polylines
animate boolean true this will activate the moving animation effect on the polyline
duration number 5000 value in milliseconds, we recommended duration the marker and the polyline must same
hidePolylines boolean false hide polylines from map, you can also show/hide with method hidePolylines(boolean), for more detail see on method documentation
removeFirstLines boolean false this will remove first line of polylines, this prop have relation with prop maxLengthLines
maxLengthLines number 3 This prop used to limit the number of polylines and if it exceeds the limit then the first polyline will be deleted

You can also fill in the default options polyline from the leaflet polyline options polyline

Marker Options

props type default value description
animate boolean true this will activate the moving animation effect on the marker
duration number 5000 value in milliseconds, we recommended duration the marker and the polyline must same
followMarker boolean false this will activate the follow marker feature, when the marker moves, the screen will follow the movement of the marker
hideMarker boolean true hide marker from map, you can also show/hide with method hideMarker(boolean), for more detail see on method documentation
rotateMarker boolean false this will activate the rotation marker and props rotateAngle will be required
rotateAngle number 0 0 to 360 degrees
speed number 0 if the speed value is filled then the duration props will not work and the value unit is km/h

You can also fill in the default options marker from the leaflet marker options marker

Feature Group Options

currently we dont make specific props for feature group, you can also fill in the default options feature group from the leaflet feature group options feature group

Methods

after you make a first call, you can call severals method from the instance

addMoreLine

this method used to add more line and move the marker, example usage method addMoreLine(latLng, options)

instance.addMoreLine([-8.822512, 115.186803], {
  duration: 5000, // in milliseconds (optional)
  speed: 25, // in km/h (optional)
  rotateAngle: 141, // (required if rotateMarker enable)
  animatePolyline: true, // (required)
})
getMarker

this is used to get marker instance and will return object class of marker, example usage method getMarker()

instance.getMarker()
hideMarker

this is used to hide/show the marker and this method called from getMarker, example usage method getMarker().hideMarker(boolean)

instance.getMarker().hideMarker(true)
activeAnimate (marker)

this is used to enable/disable the marker and this method called from getMarker, example usage method getMarker().activeAnimate(boolean)

instance.getMarker().activeAnimate(true)
activeFollowMarker

this used to disable/enable screen follow the marker moving and this method called from getMarker, example usage method getMarker().activeFollowMarker(boolean)

instance.getMarker().activeFollowMarker(true)
getCurrentPolyline

this is used to get the polyline instance which is moving, example usage method getCurrentPolyline()

instance.getCurrentPolyline()
hidePolylines

this is used to hide/show the polylines and this method not called from getCurrentPolyline, example usage method hidePolylines(boolean)

instance.hidePolylines(true)
activeAnimate (polyline)

this is used to disable/enable the current polyline which is moving and this method called from getCurrentPolyline, example usage method getCurrentPolyline().activeAnimate(boolean)

instance.getCurrentPolyline().activeAnimate(true)
stop

This is used to end the animation of the marker and polyline that are currently in moving animation and this method not called from getCurrentPolyline, example usage method stop()

instance.stop()

Report Issue/Question

if you have a question about L.MoveMarker or if you found a bug, you can make a issue, more detail how to make a report/question here

thanks, kadek.

About

L.MoveMarker is a leaflet plugin that is used to create moving marker and also trail polyline animation.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

Packages