Skip to content
This is a Leaflet plug-in that plays back points that have a time stamp synchronized to a clock.
JavaScript Other
Branch: master
Clone or download

Latest commit

hallahan Merge pull request #43 from apre/master
@apre - It's now working for me! Thanks for your contribution. Also, sorry I took so long with this.

I'm noticing that loading some GPX tracks after the fact are problematic in `example_2.html`, but that is a problem from before your PR. So, I think we're good to merge.
Latest commit 5fc4568 Sep 15, 2016


Type Name Latest commit message Commit time
Failed to load latest commit information.
config ADDED: bower.json and automated updates of bower.json using grunt-wri… Jan 27, 2015
data add gpx sample file and its viking source. Jun 27, 2016
demo a little makeover of main demo and read me Feb 5, 2015
dist Added option to enable/disable marker hiding and fading. Aug 7, 2015
examples gpx: embeed gpx file directly into samble file. Aug 12, 2016
src update gpx support. Jun 17, 2016
.gitignore updated gitignore May 4, 2014
CNAME added cname Feb 3, 2015
Gruntfile.js Updated grunt versions and reverted compress:true change to deal with g… Aug 12, 2015
LICENSE tracks layer a class now. added license. added shell of control class. Jun 20, 2013 update gpx support. Jun 17, 2016
bower.json 0.2.2 Aug 13, 2015
index.css a little makeover of main demo and read me Feb 5, 2015
index.html reference specific version of vis.js Jun 4, 2015
package.json 0.2.2 Aug 13, 2015


Leaflet Playback provides the ability to replay GPS Tracks in the form of GeoJSON objects. Rather than simply animating a marker along a polyline, the speed of the animation is synchroized to a clock. The playback functionality is similar to a video player--you can start and stop playback, change the playback speed, load GPS tracks, as well as set the playback time with a slider or calendar/time-picker widget.


Example 0

Basic example of LeafletPlayback plugin, that pre-loads some GPS GeoJSON tracks and lets you play them back.

Example 1

Use vis.js timeline as slider control

Example 2

Custom interface example - Includes the usage of Maki Markers and Twitter Bootstrap.

Example 3

Shows the ability to have markers orient themselves to the bearing of the track.

Virtual Fence Demo

I began my work on LeafletPlayback in my web mapping class at Oregon State University. My final project involved animating GPS tracks that triggered geo-fences. Note: this may stop working on August 2015 when Geoloqui will discontinue their web services.

GPS Data Format

Leaflet Playback consumes GPS tracks in the form of GeoJSON. Limited GPX import is provided with the L.Playback.Util.ParseGPX() convertion function. The schema of the GeoJSON data is as follows:

  "type": "Feature",
  "geometry": {
    "type": "MultiPoint",
    "coordinates": [/*array of [lng,lat] coordinates*/]
  "properties": {
    "time": [/*array of UNIX timestamps*/]

Other attributes may be added to the GeoJSON object, but this is the required minimum schema for the plug-in to work.

There are three leaflet controls defined in src/Controls.js:

  1. L.Playback.DateControl - Current tick date/time;
  2. L.Playback.PlayControl - Play/stop button to control time flow of LeafletPlayback;
  3. L.Playback.SliderControl - Simple time slider;



new L.Playback(map, geoJSON, onPlaybackTimeChange, options)


var playback = new L.Playback(map, geoJSON, onPlaybackTimeChange, options);
  • map - LeafLet map object. Required.

  • geoJSON - GeoJSON object or an array of GeoJSON objects. Pass null if you don't have any data yet. Required.

  • onPlaybackTimeChange - A function with signature (timestamp) that will send the timestamp value on each tick. Required.

  • options - An options object. Optional.


  • tickLen - Set tick length in miliseconds. Increasing this value, may improve performance, at the cost of animation smoothness. Default: 250.

  • speed - Set float multiplier for default animation speed. Default: 1.

  • maxInterpolationTime - Set max interpolation time in seconds. Default: 5*60*1000 (5 minutes).

  • tracksLayer - Set true if you want to show layer control on the map. Default: true.

  • playControl - Set true if play button is needed. Default: false.

  • dateControl - Set true if date label is needed. Default: false.

  • sliderControl - Set true if slider control is needed. Default: false.

  • layer - Object or function with signature (featureData) that returns geoJSON layer options object. Useful for setting path color. Default: {}.

  • marker - Object or function with signature (featureData) that returns leaflet marker options, to extend L.Playback.MoveableMarker. Useful for custom icons. Default: {}.

  • orientIcons - Set true if you want icons to orient themselves on each tick based on the bearing towards their next location. Default: false.

  • mouseOverCallback - A function with signature (event) that will be sent events on 'mouseover' on each marker Optional.

  • clickCallback - A function with signature (event) that will be sent events on 'click' on each marker Optional.

  • popups - Set true if popups on markers are required. Default: false.

  • labels - Set true if labels on markers are required. Uses leaflet-markers ( Default: false.

  • staleTime - Set time before a track is considered stale and faded out. Default: 60*60*1000 (1 hour).

  • fadeMarkersWhenStale - Set true markers should hide when not yet present in time and fade out after staleTime has passed Default: false.


Reset current data and add new.

  • geoJSON - GeoJSON object or an array of GeoJSON objects. Required.


Add new data.

  • geoJSON - GeoJSON object or an array of GeoJSON objects. Required.


Clear all data and tracks layer.


Convert gpxString content into geoJSON that can be used as input data for Playback().

  • gpxString - a string containg the content of a GPX file. Required.

Authors and Contributors

  • @hallahan - Nicholas Hallahan
  • @recallfx - Marius
  • @lbuter - Luke Butler
  • @dgorissen - Dirk Gorissen
  • @apre
You can’t perform that action at this time.