{"id":13832170,"url":"https://github.com/dekguh/Leaflet.MoveMarker","last_synced_at":"2025-07-09T16:34:22.400Z","repository":{"id":63980025,"uuid":"547287827","full_name":"dekguh/Leaflet.MoveMarker","owner":"dekguh","description":"L.MoveMarker is a leaflet plugin that is used to create moving marker and also trail polyline animation.","archived":false,"fork":false,"pushed_at":"2023-06-21T07:26:36.000Z","size":179,"stargazers_count":12,"open_issues_count":5,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-07T14:51:47.552Z","etag":null,"topics":["gis","javascript","leaflet","leafletjs","moving-marker","react-leaflet"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dekguh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":["dekguh"],"patreon":"dekguh"}},"created_at":"2022-10-07T12:42:49.000Z","updated_at":"2024-08-07T03:16:34.000Z","dependencies_parsed_at":"2024-01-15T16:51:42.303Z","dependency_job_id":null,"html_url":"https://github.com/dekguh/Leaflet.MoveMarker","commit_stats":{"total_commits":31,"total_committers":1,"mean_commits":31.0,"dds":0.0,"last_synced_commit":"63952c6b9a2001c1938ec1ed53c45f3ac9c3dd5e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dekguh%2FLeaflet.MoveMarker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dekguh%2FLeaflet.MoveMarker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dekguh%2FLeaflet.MoveMarker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dekguh%2FLeaflet.MoveMarker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dekguh","download_url":"https://codeload.github.com/dekguh/Leaflet.MoveMarker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225575209,"owners_count":17490720,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gis","javascript","leaflet","leafletjs","moving-marker","react-leaflet"],"created_at":"2024-08-04T10:01:53.572Z","updated_at":"2024-11-20T14:30:34.227Z","avatar_url":"https://github.com/dekguh.png","language":"JavaScript","funding_links":["https://github.com/sponsors/dekguh","https://patreon.com/dekguh"],"categories":["JavaScript"],"sub_categories":[],"readme":"### General Information\n\nL.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`.\n\n#### Feature\n\n| Marker                        | Polyline                        |\n| ----------------------------- | ------------------------------- |\n| animate marker                | animate polyline                |\n| duration by speed             | duration by speed ❌            |\n| rotate marker                 | show/hide polyline              |\n| show/hide marker              | limit max polyline length       |\n| disable/enable animate marker | disable/enable animate polyline |\n| stop animate marker           | stop animate polyline           |\n| follow marker when moving     |                                 |\n\n### How to install\n\nyou can go to [npm package](https://www.npmjs.com/package/l.movemarker)\n\n```js\nnpm i l.movemarker\n```\n\n### Import\n\nif you are using ES6, you can import\n\n```js\nimport 'l.movemarker'\n```\n\n### Demo\n\n| demo                                                                                 | description                                                                                      |\n| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |\n| [basic demo (codesandbox)](https://codesandbox.io/s/l-movemarker-basic-usage-fkdvty) | basic demo is a simple usage example                                                             |\n| [basic demo (github)](https://github.com/dekguh/basic-usage-leaflet-movemarker)      | basic demo is a simple usage example                                                             |\n| [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 |\n\n### First Call\n\n`prevLatLng = [lat, lng]` (required) first position\n`nextLatLng = [lat, lng]` (optional) it will be call animate to next position\nif you just fill lat lng without nextLatLng, it will still work and will only create marker that are positioned in prevLatLng\n\n```js\nconst instance = L.MoveMarker(\n  [[prevLatLng], [nextLatLng]],\n  polylineOptions,\n  markerOptions,\n  featureGroupOtions\n)\n```\n\nthe `L.MoveMarker` will return the instance layer `L.FeatureGroup` and it inside have many layers L.MotionLine and one layer L.MotionMarker.\n\n### Options\n\n### Polyline Options\n\n| props            | type    | default value | description                                                                                                                     |\n| ---------------- | ------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------- |\n| color            | string  | red           | used to set the color of the polylines                                                                                          |\n| weight           | number  | 4             | used to set the weight of the polylines                                                                                         |\n| animate          | boolean | true          | this will activate the moving animation effect on the polyline                                                                  |\n| duration         | number  | 5000          | value in milliseconds, we recommended duration the marker and the polyline must same                                            |\n| hidePolylines    | boolean | false         | hide polylines from map, you can also show/hide with method hidePolylines(boolean), for more detail see on method documentation |\n| removeFirstLines | boolean | false         | this will remove first line of polylines, this prop have relation with prop maxLengthLines                                      |\n| 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             |\n\nYou can also fill in the default options polyline from the leaflet polyline [options polyline](https://leafletjs.com/reference.html#polyline-option)\n\n#### Marker Options\n\n| props        | type    | default value | description                                                                                                               |\n| ------------ | ------- | ------------- | ------------------------------------------------------------------------------------------------------------------------- |\n| animate      | boolean | true          | this will activate the moving animation effect on the marker                                                              |\n| duration     | number  | 5000          | value in milliseconds, we recommended duration the marker and the polyline must same                                      |\n| followMarker | boolean | false         | this will activate the follow marker feature, when the marker moves, the screen will follow the movement of the marker    |\n| hideMarker   | boolean | true          | hide marker from map, you can also show/hide with method hideMarker(boolean), for more detail see on method documentation |\n| rotateMarker | boolean | false         | this will activate the rotation marker and props rotateAngle will be required                                             |\n| rotateAngle  | number  | 0             | 0 to 360 degrees                                                                                                          |\n| speed        | number  | 0             | if the speed value is filled then the duration props will not work and the value unit is km/h                             |\n\nYou can also fill in the default options marker from the leaflet marker [options marker](https://leafletjs.com/reference.html#marker-option)\n\n### Feature Group Options\n\ncurrently 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)\n\n### Methods\n\nafter you make a first call, you can call severals method from the instance\n\n##### addMoreLine\n\nthis method used to add more line and move the marker, example usage method `addMoreLine(latLng, options)`\n\n```js\ninstance.addMoreLine([-8.822512, 115.186803], {\n  duration: 5000, // in milliseconds (optional)\n  speed: 25, // in km/h (optional)\n  rotateAngle: 141, // (required if rotateMarker enable)\n  animatePolyline: true, // (required)\n})\n```\n\n##### getMarker\n\nthis is used to get marker instance and will return object class of marker, example usage method `getMarker()`\n\n```js\ninstance.getMarker()\n```\n\n##### hideMarker\n\nthis is used to hide/show the marker and this method called from `getMarker`, example usage method `getMarker().hideMarker(boolean)`\n\n```js\ninstance.getMarker().hideMarker(true)\n```\n\n##### activeAnimate (marker)\n\nthis is used to enable/disable the marker and this method called from `getMarker`, example usage method `getMarker().activeAnimate(boolean)`\n\n```js\ninstance.getMarker().activeAnimate(true)\n```\n\n##### activeFollowMarker\n\nthis used to disable/enable screen follow the marker moving and this method called from `getMarker`, example usage method `getMarker().activeFollowMarker(boolean)`\n\n```js\ninstance.getMarker().activeFollowMarker(true)\n```\n\n##### getCurrentPolyline\n\nthis is used to get the polyline instance which is moving, example usage method `getCurrentPolyline()`\n\n```js\ninstance.getCurrentPolyline()\n```\n\n##### hidePolylines\n\nthis is used to hide/show the polylines and this method not called from `getCurrentPolyline`, example usage method `hidePolylines(boolean)`\n\n```js\ninstance.hidePolylines(true)\n```\n\n##### activeAnimate (polyline)\n\nthis is used to disable/enable the current polyline which is moving and this method called from `getCurrentPolyline`, example usage method `getCurrentPolyline().activeAnimate(boolean)`\n\n```js\ninstance.getCurrentPolyline().activeAnimate(true)\n```\n\n##### stop\n\nThis 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()`\n\n```js\ninstance.stop()\n```\n\n### Report Issue/Question\n\nif 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)\n\nthanks,\nkadek.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdekguh%2FLeaflet.MoveMarker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdekguh%2FLeaflet.MoveMarker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdekguh%2FLeaflet.MoveMarker/lists"}