{"id":16401673,"url":"https://github.com/alejandrorm-dev/leaflet.markermotion-react","last_synced_at":"2026-02-02T15:36:55.170Z","repository":{"id":256884886,"uuid":"856623713","full_name":"AlejandroRM-DEV/Leaflet.MarkerMotion-React","owner":"AlejandroRM-DEV","description":"Leaflet.MarkerMotion is a powerful open-source plugin for Leaflet that enables smooth marker animation along predefined paths. This is a React wrapper for Leaflet.MarkerMotion, which allows easy integration with React-Leaflet projects.","archived":false,"fork":false,"pushed_at":"2024-09-13T14:27:08.000Z","size":444,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-13T23:46:18.214Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://leaflet-marker-motion-react.vercel.app","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/AlejandroRM-DEV.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2024-09-12T22:48:24.000Z","updated_at":"2024-09-13T14:27:11.000Z","dependencies_parsed_at":"2024-09-13T16:20:04.130Z","dependency_job_id":"747f3620-8bdb-428d-83bb-0b92b75d476e","html_url":"https://github.com/AlejandroRM-DEV/Leaflet.MarkerMotion-React","commit_stats":null,"previous_names":["alejandrorm-dev/leaflet.markermotion-react"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/AlejandroRM-DEV/Leaflet.MarkerMotion-React","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlejandroRM-DEV%2FLeaflet.MarkerMotion-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlejandroRM-DEV%2FLeaflet.MarkerMotion-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlejandroRM-DEV%2FLeaflet.MarkerMotion-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlejandroRM-DEV%2FLeaflet.MarkerMotion-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlejandroRM-DEV","download_url":"https://codeload.github.com/AlejandroRM-DEV/Leaflet.MarkerMotion-React/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlejandroRM-DEV%2FLeaflet.MarkerMotion-React/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259737720,"owners_count":22903851,"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-10-11T05:43:52.583Z","updated_at":"2026-02-02T15:36:50.150Z","avatar_url":"https://github.com/AlejandroRM-DEV.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Leaflet.MarkerMotion React Wrapper\n\nLeaflet.MarkerMotion is a powerful open-source plugin for Leaflet that enables smooth marker animation along predefined paths. This documentation covers the React wrapper for Leaflet.MarkerMotion, which allows easy integration with React-Leaflet projects.\n\n![Build Status](https://img.shields.io/github/actions/workflow/status/AlejandroRM-DEV/Leaflet.MarkerMotion-React/release.yml?branch=main)\n![npm version](https://img.shields.io/npm/v/leaflet.marker-motion-react)\n![npm](https://img.shields.io/npm/dt/leaflet.marker-motion-react)\n![License](https://img.shields.io/badge/license-MIT-blue)\n![GitHub issues](https://img.shields.io/github/issues/AlejandroRM-DEV/Leaflet.MarkerMotion-React)\n![GitHub forks](https://img.shields.io/github/forks/AlejandroRM-DEV/Leaflet.MarkerMotion-React)\n![GitHub stars](https://img.shields.io/github/stars/AlejandroRM-DEV/Leaflet.MarkerMotion-React)\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\n## Demo\n\nCheck out our live demo: [https://leaflet-marker-motion-react-5jbe.vercel.app](https://leaflet-marker-motion-react-5jbe.vercel.app)\n\n## Installation\n\nInstall Leaflet.MarkerMotion and its React wrapper via npm:\n\n```bash\nnpm install leaflet.marker-motion-react\n```\n\n## Usage\n\nHere's a basic example of how to use the Leaflet.MarkerMotion React wrapper:\n\n```jsx\nimport { useRef, useState } from \"react\";\nimport L from \"leaflet\";\nimport MarkerMotion from \"leaflet.marker-motion-react\";\nimport { MapContainer, TileLayer, Polyline } from \"react-leaflet\";\nimport Control from \"react-leaflet-custom-control\";\nimport \"leaflet/dist/leaflet.css\";\n\nconst icon = L.icon({\n  iconUrl: \"./car.png\",\n  iconSize: [38, 38],\n  iconAnchor: [19, 19],\n});\n\nconst points = [\n  [22.614407, -103.009848],\n  [22.622247, -103.006986],\n  // ... more points ...\n  [22.616452, -102.997295],\n];\n\nfunction App() {\n  const markerMotionRef = useRef(null);\n  const [speed, setSpeed] = useState(4000);\n\n  return (\n    \u003cMapContainer\n      center={[22.634087, -102.983227]}\n      zoom={14}\n      style={{ height: \"100vh\", width: \"100%\" }}\n    \u003e\n      \u003cTileLayer\n        attribution='\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors'\n        url=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\"\n      /\u003e\n      \u003cPolyline pathOptions={{ color: \"blue\" }} positions={points} /\u003e\n      \u003cMarkerMotion\n        ref={markerMotionRef}\n        path={points}\n        speedInKmH={speed}\n        options={{\n          icon,\n          rotation: true,\n          autoplay: true,\n          loop: true,\n        }}\n        eventHandlers={{\n          \"motion.start\": () =\u003e {\n            console.log(\"motion start\");\n          },\n          \"motion.pause\": () =\u003e {\n            console.log(\"motion pause\");\n          },\n          \"motion.reset\": () =\u003e {\n            console.log(\"motion reset\");\n          },\n          \"motion.end\": () =\u003e {\n            console.log(\"motion end\");\n          },\n          \"motion.segment\": (data) =\u003e {\n            console.log(\"motion segment\", data.index);\n          },\n        }}\n      /\u003e\n      \u003cControl prepend position=\"topright\"\u003e\n        {/* Control buttons */}\n      \u003c/Control\u003e\n    \u003c/MapContainer\u003e\n  );\n}\n\nexport default App;\n```\n\n## API Reference\n\n### MarkerMotion Component\n\nThe `MarkerMotion` component is the main component provided by the React wrapper.\n\n#### Props\n\n- `path`: Array of `[lat, lng]` points defining the path.\n- `speedInKmH`: Speed of the marker in kilometers per hour.\n- `options`: Optional Leaflet marker options and MarkerMotion-specific options.\n  - `rotation` (boolean): Updates the rotation angle of the marker based on its current position and next point in the path.\n  - `autoplay` (boolean): Starts animation automatically when added to the map.\n  - `loop` (boolean): Restarts the animation from the beginning when it reaches the end of the path.\n  - All standard Leaflet marker options are also supported like icon\n- `eventHandlers`: Object containing event handler functions for MarkerMotion events.\n\n#### Ref Methods\n\nThe `MarkerMotion` component can be controlled using a ref. The following methods are available:\n\n- `start()`: Starts or resumes the motion of the marker along the path.\n- `pause()`: Pauses the motion of the marker.\n- `reset()`: Stops the motion of the marker and resets it to the starting position.\n- `setProgress(index)`: Sets the progress of the marker to a specific segment of the path.\n\n### Events\n\nThe following events can be handled using the `eventHandlers` prop:\n\n- `motion.start`: Fired when the motion starts or resumes.\n- `motion.pause`: Fired when the motion is paused.\n- `motion.reset`: Fired when the marker is reset to its starting position.\n- `motion.end`: Fired when the marker reaches the end of the path.\n- `motion.segment`: Fired when the marker enters a new segment of the path. Returns an object with the current segment index.\n\n## Example: Controlling MarkerMotion\n\nHere's an example of how to control the MarkerMotion component using buttons:\n\n```jsx\n\u003cControl position=\"topright\"\u003e\n  \u003cdiv className=\"leaflet-bar leaflet-control\"\u003e\n    \u003cbutton onClick={() =\u003e markerMotionRef.current.start()}\u003e\n      Start\n    \u003c/button\u003e\n    \u003cbutton onClick={() =\u003e markerMotionRef.current.pause()}\u003e\n      Pause\n    \u003c/button\u003e\n    \u003cbutton onClick={() =\u003e markerMotionRef.current.reset()}\u003e\n      Reset\n    \u003c/button\u003e\n    \u003cbutton\n      onClick={() =\u003e {\n        const randomIndex = Math.floor(Math.random() * points.length);\n        markerMotionRef.current.setProgress(randomIndex);\n      }}\n    \u003e\n      Random progress\n    \u003c/button\u003e\n    \u003cbutton onClick={Math.max(s - 500, 1000))}\u003e\n      Slower\n    \u003c/button\u003e\n    \u003cbutton onClick={Math.min(s + 1000, 10000))}\u003e\n      Faster\n    \u003c/button\u003e\n  \u003c/div\u003e\n\u003c/Control\u003e\n```\n\nThis example demonstrates how to use the ref methods to control the marker's motion and how to adjust the speed dynamically.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/AlejandroRM-DEV\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/8054357?v=4?s=100\" width=\"100px;\" alt=\"Alejandro Ramírez Muñoz\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlejandro Ramírez Muñoz\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/AlejandroRM-DEV/Leaflet.MarkerMotion-React/commits?author=AlejandroRM-DEV\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falejandrorm-dev%2Fleaflet.markermotion-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falejandrorm-dev%2Fleaflet.markermotion-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falejandrorm-dev%2Fleaflet.markermotion-react/lists"}