Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/dekguh/Leaflet.MoveMarker

L.MoveMarker is a leaflet plugin that is used to create moving marker and also trail polyline animation.
https://github.com/dekguh/Leaflet.MoveMarker

gis javascript leaflet leafletjs moving-marker react-leaflet

Last synced: 9 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/dekguh/Leaflet.MoveMarker
Owner: dekguh
License: mit
Created: 2022-10-07T12:42:49.000Z (over 1 year ago)
Default Branch: master
Last Pushed: 2023-06-21T07:26:36.000Z (about 1 year ago)
Last Synced: 2024-06-21T19:52:09.795Z (15 days ago)
Topics: gis, javascript, leaflet, leafletjs, moving-marker, react-leaflet
Language: JavaScript
Homepage:
Size: 175 KB
Stars: 9
Watchers: 2
Forks: 3
Open Issues: 5
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md

Lists

awesome-stars - dekguh/Leaflet.MoveMarker - L.MoveMarker is a leaflet plugin that is used to create moving marker and also trail polyline animation. (JavaScript)

README

        ### 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](https://www.npmjs.com/package/l.movemarker)

```js

npm i l.movemarker

```

### Import

if you are using ES6, you can import

```js

import 'l.movemarker'

```

### Demo

| demo                                                                                 | description                                                                                      |

| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |

| [basic demo (codesandbox)](https://codesandbox.io/s/l-movemarker-basic-usage-fkdvty) | basic demo is a simple usage example                                                             |

| [basic demo (github)](https://github.com/dekguh/basic-usage-leaflet-movemarker)      | basic demo is a simple usage example                                                             |

| [real case demo](https://github.com/dekguh/real-usage-leaflet-movemarker)            | 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

```js

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](https://leafletjs.com/reference.html#polyline-option)

#### 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](https://leafletjs.com/reference.html#marker-option)

### 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](https://leafletjs.com/reference.html#featuregroup)

### 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)`

```js

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()`

```js

instance.getMarker()

```

##### hideMarker

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

```js

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)`

```js

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)`

```js

instance.getMarker().activeFollowMarker(true)

```

##### getCurrentPolyline

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

```js

instance.getCurrentPolyline()

```

##### hidePolylines

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

```js

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)`

```js

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()`

```js

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](https://github.com/dekguh/Leaflet.MoveMarker/issues/4)

thanks,

kadek.