{"id":13701368,"url":"https://github.com/ewoken/Leaflet.MovingMarker","last_synced_at":"2025-05-04T21:30:47.036Z","repository":{"id":21306264,"uuid":"24622608","full_name":"ewoken/Leaflet.MovingMarker","owner":"ewoken","description":"A Leaflet plug-in to create moving marker","archived":false,"fork":false,"pushed_at":"2023-03-25T06:26:33.000Z","size":27,"stargazers_count":347,"open_issues_count":38,"forks_count":176,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-13T11:50:14.783Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ewoken.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-09-30T03:14:19.000Z","updated_at":"2025-03-04T22:23:22.000Z","dependencies_parsed_at":"2024-11-13T07:42:01.846Z","dependency_job_id":null,"html_url":"https://github.com/ewoken/Leaflet.MovingMarker","commit_stats":{"total_commits":15,"total_committers":4,"mean_commits":3.75,"dds":0.5333333333333333,"last_synced_commit":"2c63c8cd32f571fcb765839641d6e6a1bf5ee1fd"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ewoken%2FLeaflet.MovingMarker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ewoken%2FLeaflet.MovingMarker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ewoken%2FLeaflet.MovingMarker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ewoken%2FLeaflet.MovingMarker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ewoken","download_url":"https://codeload.github.com/ewoken/Leaflet.MovingMarker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252403720,"owners_count":21742424,"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":[],"created_at":"2024-08-02T20:01:33.213Z","updated_at":"2025-05-04T21:30:46.736Z","avatar_url":"https://github.com/ewoken.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"Leaflet.MovingMarker\n====================\n----------\n\n\nA Leaflet plug-in to create moving marker. Very useful to represent transportations or other movable things !\n\nDemos\n--------\nFollow this link: [here](http://ewoken.github.io/Leaflet.MovingMarker)\n\nCompatibility with Leaflet Versions\n-----------------------------------\n\nCompatible with the latest stable Leaflet version `leaflet-0.7.2`.\n\nBrowser Compatibility\n-----------------------------------\nThis plugin internally uses ``` window.requestAnimationFrame``` through the Leaflet function ```L.Util.requestAnimFrame```\n\nFeatures\n--------\n\n* Let move your markers along a polyline.\n* You can zoom in/out, your moving marker will be at the right place ! \n* You can pause or end the animation whenever you want.\n* You can deal with events.\n* You can make **loop**.\n* You can add the the point one by one.\n* You can add *station* at some points of the polyline.\n\nUsage\n-----\nAdd this line to your HTML file:\n```html\n\u003cscript type=\"text/javascript\" src=\"MovingMarker.js\"\u003e\u003c/script\u003e\n```\n\nThen add your first MovingMarker:\n\n```javascript\nvar myMovingMarker = L.Marker.movingMarker([[48.8567, 2.3508],[50.45, 30.523333]],\n\t\t\t\t\t\t[20000]).addTo(map);\n//...\nmyMovingMarker.start();\n```\n\nAPI\n----\n\n**Factory**\n```\nL.movingMarker(\u003cLatLng[]\u003e latlngs, \u003cNumber[]\u003e durations [,\u003cObject\u003e options]);\n```\n\n**durations**:\n*   if array of number : duration in ms per line segment.\n*   if number : total duration (autocalculate duration in ms per line segment proportionnaly to distance between points).\n\n\nNote: As Leaftlet's other functions, it also accept them in a simple Array form and simple object form ([see Leaflet docs](http://leafletjs.com/reference.html#latlng)).\n\n**Options**\nAll the marker's options are available.\n\n - ```autostart```: if ``` true``` the marker will start automatically after it is added to map. Default: ```false```\n - ``` loop```: if ```true``` the marker will start automatically at the beginning of the polyline when the it arrives at the end. Default: ```false```\n\n\t\n**Methods**\n\n*Getter*\n\n - ``` isRunning()```: return ```true``` if the marker is currently moving.\n - ```isPaused()```: return ```true``` if the marker is paused\n \n - ``` isEnded()```: return ```true``` if the marker is arrived to the last position or it has been stopped manually\n \n - ```isStarted()```: return ```true``` if the marker has started\n\n**Note**: ```Marker.getLatLng()``` still works and give the current position\n \n*Setter*\n\n - ```start()```:  the marker begins its path or resumes if it is paused.\n - ``` stop()```: manually stops the marker, if you call ```start`` after, the marker starts again the polyline at the beginning.\n - ```pause()```: just pauses the marker\n - ``` resume()```: the marker resumes its animation\n - ```addLatLng(latlng, duration)```: adds a point to the polyline. Useful, if we have to set the path one by one.\n - ``` moveTo(latlng, duration)```: stops current animation and make the marker move to ```latlng``` in ```duration``` ms. \n - ```addStation(pointIndex, duration)```: the marker will stop at the ```pointIndex```th points of the polyline during ```duration``` ms. You can't add a station at the first or last point of the polyline.\n \n*Events*\n\n - ```start```: fired when the marker starts\n - ``` end```: fired when the marker stops \n - ```loop```: fired when the marker begin a new loop\n\n**Note**: Event are not synchrone because of the use of ```requestAnimationFrame```.  If you quit the tab where the animation is working, events will be fired when the tab will get back the focus. Events ```end``` and ```loop``` have the attribute ```elapsedTime``` to get the time elapsed since the real end/loop.\n\nHow it works\n---------------\nThis plugin internally uses ``` window.requestAnimationFrame``` through the Leaflet function ```L.Util.requestAnimFrame```. When the browser need to repaint, the marker [interpolate](http://ewoken.github.io/Leaflet.MovingMarker) linearly its position thanks to the elapsed time.\n\n**Why do you just not use transitions ?**\n\nIf your marker moves very slowly (1-2 min or more for one transition) and you zoom in, your marker will be at the wrong place and take a lot of time to be where it has to be. Moreover, you have to do some hacks to get the current position of the marker during the animation.\n\n\n\nFuture Features\n----------------------\n\n - Optimizations: clipping\n\nTODO\n--------\nTests ;-)\n\nLicense\n----\nMIT License\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fewoken%2FLeaflet.MovingMarker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fewoken%2FLeaflet.MovingMarker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fewoken%2FLeaflet.MovingMarker/lists"}