leaflet-react-track-player

    2.0.0 • Public • Published

    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

    Keywords

    none

    Install

    npm i leaflet-react-track-player

    DownloadsWeekly Downloads

    52

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    9.04 MB

    Total Files

    54

    Last publish

    Collaborators

    • argonavt11