Skip to content

This is plugin for react-leaflet. It create player for control of track. πŸƒπŸŒŽβš”

Notifications You must be signed in to change notification settings

arg0navt/leaflet-react-track-player

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Leaflet-react-track-player

Build Status CircleCI GitHub repo size in bytes


This is package was created as a plugin for 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.

Install

npm install leaflet-react-track-player
yarn add leaflet-react-track-player

import React, { Component } from "react";
import LeafletReactTrackPlayer from "leaflet-react-track-player";
import demo from "./demo";
import { Map, TileLayer } from "react-leaflet";

class App extends Component {
  state = {
    lat: 47.445745,
    lng: 40.272891666666666,
    zoom: 15,
    type: "distance",
    demo: demo
  };

  render() {
    const position = [demo[0].lat, demo[0].lng];
    return (
      <div className="App">
        <Map center={position} zoom={this.state.zoom}>
          <LeafletReactTrackPlayer
            track={this.state.demo}
            optionMultyIdxFn={function(p) {
              return p.status;
            }}
            optionsMulty={[
              { color: "#b1b1b1" },
              { color: "#06a9f5" },
              { color: "#202020" },
              { color: "#D10B41" },
              { color: "#78c800" }
            ]}
            progressFormat={this.state.type}
            customMarker={true}
            changeCourseCustomMarker={true}
            iconCustomMarker={"/img/mech.svg"}
          />
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
        </Map>
      </div>
    );
  }
}

Params

Prop Type Default Description
track Array [] The points that define the polyline
optionMultyIdxFn Function () => {} Function to defined track segment colors
autoplay Boolean true Autoplay after init player or not
optionsMulty Array [] The colors used for track segments
customMarker Boolean false Should use a custom marker icon
iconCustomMarker String "" Path to your marker icon
customCourse Boolean false Need changing course of marker? You need have course in points. See demo
timeFormat String "YYMMDDHHmmss000" Time format is for mode "time". You need times stamps in points. See demo
styleMarker String "" Inline style for the marker
speedArray Array [] List of speeds
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
useControl Bollean false Show or hide control panel
streamData Bollean false Update player after add new points
showDots Bollean false Show or hide points in progress line
defaultSpeed Number undefined Constant for speed (pixel/second)
callbackFinish Function () => {} Called after one full track run
callbackNext Function () => {} Called after next point in the polyline is reached
callbackPrev Function () => {} Called after previous point in the polyline is reached
callbackSpeed Function () => {} Called after changing spead
callbackFly Function () => {} Called after fly polyline
callbackStream Function () => {} Called after changing stream mode

About

This is plugin for react-leaflet. It create player for control of track. πŸƒπŸŒŽβš”

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •