npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

leaflet-plugin-trackplayback

v1.0.5

Published

track playback plugin based on leaflet

Downloads

506

Readme

Leaflet.TrackPlayBack

Introduce

It's a track playback plugin based on leaflet and HTML5 canvas.

To use it,you need provide some GPS data and time data, then you can play the track on the map.

Support track playback, pause, fast forward, fast reverse operation.

Requirements

  • leaflet version: >1.0.0

Demo

Click here to see demo

Usage

Using npm:

npm i leaflet
npm i leaflet-plugin-trackplayback
import L from 'leaflet'
import 'leaflet-plugin-trackplayback'

const trackplayback = L.trackplayback(data, map);
// or
const trackplayback = new L.TrackPlayBack(data, map);

Using script tag:

  <link rel="stylesheet" href="./lib/leaflet/leaflet.css">
  <!--Optional (only if you need plaback control)-->
  <link rel="stylesheet" href="../dist/control.playback.css">
  <script src="./lib/leaflet/leaflet.js"></script>
  <!--Optional (only if you need plaback control)-->
  <script src="../dist/control.trackplayback.js"></script>
  <script src="../dist/leaflet.trackplayback.js"></script>

example:

    const trackplayback = L.trackplayback(data, map);
    // Optional  (only if you need plaback control)
    const trackplaybackControl = L.trackplaybackcontrol(trackplayback);
    trackplaybackControl.addTo(map);

API reference

initialize(data, map, options)

data can be:

when you want to play back one track

[{lat:30, lng:116, time:1502529980, dir:320, info:[{key: 'name', value: 'ship1'}]}, ....]

or

when you want to play back more tracks

[[{lat:30, lng:116, time:1502529980, dir:320, info:[]}, ....], [{lat:30, lng:116, time:1502529980, dir:320, info:[]}, ....]]

the trackpoint obj properties:

  • lat: Latitude of target
  • lng: Longitude of target
  • time: unix timestamp
  • dir(Optional): Moving direction(0-360 degrees, Clockwise direction), if you don't provide it, the program can auto caculate the target direction
  • info(Optional): other static information of the target, it's an array of key-value pairs

map is the L.map instance.

options can be:

const Options = {
  // the play options
  clockOptions: {
    // the default speed
    // caculate method: fpstime * Math.pow(2, speed - 1)
    // fpstime is the two frame time difference
    speed: 13,
    // the max speed
    maxSpeed: 65
  },
  // trackPoint options
  trackPointOptions: {
    // whether draw track point
    isDraw: false,
    // whether use canvas to draw it, if false, use leaflet api `L.circleMarker`
    useCanvas: true,
    stroke: false,
    color: '#ef0300',
    fill: true,
    fillColor: '#ef0300',
    opacity: 0.3,
    radius: 4
  },
  // trackLine options
  trackLineOptions: {
    // whether draw track line
    isDraw: false,
    stroke: true,
    color: '#1C54E2',
    weight: 2,
    fill: false,
    fillColor: '#000',
    opacity: 0.3
  },
  // target options
  targetOptions: {
    // whether use image to display target, if false, the program provide a default
    useImg: false,
    // if useImg is true, provide the imgUrl
    imgUrl: '../../static/images/ship.png',
    // the width of target, unit: px
    width: 8,
    // the height of target, unit: px
    height: 18,
    // the stroke color of target, effective when useImg set false
    color: '#00f',
    // the fill color of target, effective when useImg set false
    fillColor: '#9FD12D'
  }
}

events

// trigger on time change
trackplayback.on('tick', e => {
  console.log(e.time)
}, this)

methods

start()

start play, return this

stop()

stop play, return this

rePlaying()

replay, return this

slowSpeed()

slow play speed, return this

quickSpeed()

quick play speed, return this

getSpeed()

get play speed, return speed value

getCurTime()

get current time, return unix timestamp

getStartTime()

get start time, return unix timestamp

getEndTime()

get end time, return unix timestamp

isPlaying()

whether in playing, return true or false

setCursor(time)

set current playing time, need a unix timestamp param, return this

setSpeed(speed)

set the playback speed, return this

showTrackPoint()

draw track point, return this

hideTrackPoint()

remove track point, return this

showTrackLine()

draw track line, return this

hideTrackLine()

remove track line, return this

dispose()

destory the trackplayback instance, when call this, the trackplayback instance can't be used again and the program will clear track layer.

Issues

If you have good suggestions or comments,welcome to ask questions.

Recommends

  1. html5 canvas
  2. LeafletPlayback

License

MIT license