{"id":17438280,"url":"https://github.com/arg0navt/leaflet-react-track-player","last_synced_at":"2025-04-17T12:30:06.601Z","repository":{"id":88251532,"uuid":"149246661","full_name":"arg0navt/leaflet-react-track-player","owner":"arg0navt","description":"This is plugin for react-leaflet. It create player for control of track. 🍃🌎⚔","archived":false,"fork":false,"pushed_at":"2020-09-15T21:11:32.000Z","size":9633,"stargazers_count":29,"open_issues_count":6,"forks_count":19,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T06:05:02.466Z","etag":null,"topics":["leaflet","player","react","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arg0navt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-09-18T07:29:58.000Z","updated_at":"2025-01-26T17:24:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"9982114a-4792-4aea-81c1-2396c60bbf33","html_url":"https://github.com/arg0navt/leaflet-react-track-player","commit_stats":null,"previous_names":["argonavt11/leaflet-react-track-player"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arg0navt%2Fleaflet-react-track-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arg0navt%2Fleaflet-react-track-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arg0navt%2Fleaflet-react-track-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arg0navt%2Fleaflet-react-track-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arg0navt","download_url":"https://codeload.github.com/arg0navt/leaflet-react-track-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249341776,"owners_count":21254191,"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":["leaflet","player","react","react-leaflet"],"created_at":"2024-10-17T12:05:24.140Z","updated_at":"2025-04-17T12:30:06.570Z","avatar_url":"https://github.com/arg0navt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Leaflet-react-track-player\n\n[![Build Status](https://travis-ci.org/arg0navt/leaflet-react-track-player.svg?branch=master)](https://travis-ci.org/argonavt11/leaflet-react-track-player)\n[![CircleCI](https://circleci.com/gh/arg0navt/leaflet-react-track-player.svg?style=svg)](https://circleci.com/gh/argonavt11)\n[![GitHub repo size in bytes](https://img.shields.io/npm/v/leaflet-react-track-player.svg?style=flat-square)](https://github.com/argonavt11/leaflet-react-track-player)\n\n![](https://github.com/arg0navt/leaflet-react-track-player/blob/master/public/img/demo.gif?raw=true)\n\n---\n\nThis is package was created as a plugin for [react-leaflet](https://github.com/PaulLeCam/react-leaflet) . It creates a player which animates along a polyline. It provides functions for pause, play and playback speed. The track colors may be customized.\n\n#### Install\n\n```sh\nnpm install leaflet-react-track-player\nyarn add leaflet-react-track-player\n```\n\n---\n\n```javascript\nimport React, { Component } from \"react\";\nimport LeafletReactTrackPlayer from \"leaflet-react-track-player\";\nimport demo from \"./demo\";\nimport { Map, TileLayer } from \"react-leaflet\";\n\nclass App extends Component {\n state = {\n lat: 47.445745,\n lng: 40.272891666666666,\n zoom: 15,\n type: \"distance\",\n demo: demo\n };\n\n render() {\n const position = [demo[0].lat, demo[0].lng];\n return (\n \u003cdiv className=\"App\"\u003e\n \u003cMap center={position} zoom={this.state.zoom}\u003e\n \u003cLeafletReactTrackPlayer\n track={this.state.demo}\n optionMultyIdxFn={function(p) {\n return p.status;\n }}\n optionsMulty={[\n { color: \"#b1b1b1\" },\n { color: \"#06a9f5\" },\n { color: \"#202020\" },\n { color: \"#D10B41\" },\n { color: \"#78c800\" }\n ]}\n progressFormat={this.state.type}\n customMarker={true}\n changeCourseCustomMarker={true}\n iconCustomMarker={\"/img/mech.svg\"}\n /\u003e\n \u003cTileLayer\n attribution='\u0026amp;copy \u003ca href=\"http://osm.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors'\n url=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\"\n /\u003e\n \u003c/Map\u003e\n \u003c/div\u003e\n );\n }\n}\n```\n\n---\n\n#### Params\n\n| Prop | Type | Default | Description |\n| --------------- | ------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| track | Array | [] | The points that define the polyline |\n| optionMultyIdxFn | Function | () =\u003e {} | Function to defined track segment colors |\n| autoplay | Boolean | true | Autoplay after init player or not |\n| optionsMulty | Array | [] | The colors used for track segments |\n| customMarker | Boolean | false | Should use a custom marker icon |\n| iconCustomMarker | String | \"\" | Path to your marker icon |\n| customCourse | Boolean | false | Need changing course of marker? You need have course in points. See demo |\n| timeFormat | String | \"YYMMDDHHmmss000\" | Time format is for mode \"time\". You need times stamps in points. See demo |\n| styleMarker | String | \"\" | Inline style for the marker |\n| speedArray | Array | [] | List of speeds |\n| progressFormat | String | \"default\" | Mode \"default\" uses the number of points as the value for progress. Mode \"time\" uses time stamps as the value for progress. Mode \"distance\" uses range in meters as the value for progress |\n| useControl | Bollean | false | Show or hide control panel |\n| streamData | Bollean | false | Update player after add new points |\n| showDots | Bollean | false | Show or hide points in progress line |\n| defaultSpeed | Number | undefined | Constant for speed (pixel/second) |\n| callbackFinish | Function | () =\u003e {} | Called after one full track run |\n| callbackNext | Function | () =\u003e {} | Called after next point in the polyline is reached |\n| callbackPrev | Function | () =\u003e {} | Called after previous point in the polyline is reached |\n| callbackSpeed | Function | () =\u003e {} | Called after changing spead |\n| callbackFly | Function | () =\u003e {} | Called after fly polyline |\n| callbackStream | Function | () =\u003e {} | Called after changing stream mode |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farg0navt%2Fleaflet-react-track-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farg0navt%2Fleaflet-react-track-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farg0navt%2Fleaflet-react-track-player/lists"}