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.
hallahan · Sep 15, 2016 · 5fc4568 · 5fc4568
2 parents 726a1ed + e556575
commit 5fc4568
Show file tree

Hide file tree

Showing 7 changed files with 364 additions and 56 deletions.
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ I began my work on LeafletPlayback in my web mapping class at [Oregon State Univ
 
 ## GPS Data Format
 
-Leaflet Playback consumes GPS tracks in the form of GeoJSON. The next feature to be implemented for the plugin is the added ability to parse GPX tracks as well. The schema of the GeoJSON data is as follows: 
+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:
 
 ```javascript
 {
@@ -42,7 +42,7 @@ Leaflet Playback consumes GPS tracks in the form of GeoJSON. The next feature to
 
 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`: 
+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;
@@ -54,7 +54,7 @@ There are three leaflet controls defined in `src/Controls.js`:
 
 ### new L.Playback(map, geoJSON, onPlaybackTimeChange, options)
 
-### Options
+#### parameters
 
 ```javascript
 var playback = new L.Playback(map, geoJSON, onPlaybackTimeChange, options);
@@ -68,7 +68,7 @@ var playback = new L.Playback(map, geoJSON, onPlaybackTimeChange, options);
 
 * `options` - An options object. **Optional**.
 
-### options
+#### options
 
 * `tickLen` - Set tick length in miliseconds. Increasing this value, may improve performance, at the cost of animation smoothness. **Default: `250`**.
 
@@ -118,10 +118,16 @@ Add new data.
 
 Clear all data and tracks layer.
 
+### L.Playback.Util.ParseGPX(gpxString)
+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
 
diff --git a/data/gpx/dummy.gpx b/data/gpx/dummy.gpx
@@ -0,0 +1,74 @@
+<?xml version="1.0"?>
+<gpx version="1.0" creator="Viking -- http://viking.sf.net/"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+xmlns="http://www.topografix.com/GPX/1/0"
+xsi:schemaLocation="http://www.topografix.com/GPX/1/0 http://www.topografix.com/GPX/1/0/gpx.xsd">
+  <name>Point de cheminement de la trace</name>
+  <author></author>
+  <desc></desc>
+  <time>2016-06-24T07:27:11.445303Z</time>
+  <keywords></keywords>
+<trk>
+  <name>car1</name>
+  <cmt>car1 track</cmt>
+  <trkseg>
+  <trkpt lat="44.563541335986407" lon="-123.27078737325095">
+    <name>start</name>
+    <time>2013-05-29T00:12:18Z</time>
+  </trkpt>
+  <trkpt lat="44.562282178350422" lon="-123.26587480593018">
+    <time>2013-05-29T00:15:21Z</time>
+  </trkpt>
+  <trkpt lat="44.562211469751361" lon="-123.26575008321099">
+    <time>2013-05-29T00:15:26Z</time>
+  </trkpt>
+  <trkpt lat="44.562108273263384" lon="-123.2658064096003">
+    <time>2013-05-29T00:15:32Z</time>
+  </trkpt>
+  <trkpt lat="44.560395949264517" lon="-123.26669422078423">
+    <time>2013-05-29T00:17:01Z</time>
+  </trkpt>
+  <trkpt lat="44.560247838514897" lon="-123.26679480362229">
+    <time>2013-05-29T00:17:10Z</time>
+  </trkpt>
+  <trkpt lat="44.559945882528396" lon="-123.26556098747544">
+    <time>2013-05-29T00:17:55Z</time>
+  </trkpt>
+  <trkpt lat="44.561463291066232" lon="-123.26477778244309">
+    <time>2013-05-29T00:19:15Z</time>
+  </trkpt>
+  <trkpt lat="44.562887770077587" lon="-123.26405502862357">
+    <time>2013-05-29T00:20:30Z</time>
+  </trkpt>
+  </trkseg>
+</trk>
+<trk>
+  <name>car2</name>
+  <trkseg>
+  <trkpt lat="44.570059599592739" lon="-123.26154069143824">
+    <time>2013-05-29T00:12:30Z</time>
+  </trkpt>
+  <trkpt lat="44.567141755322709" lon="-123.26316611010127">
+    <time>2013-05-29T00:13:22Z</time>
+  </trkpt>
+  <trkpt lat="44.564237141526093" lon="-123.26473788458399">
+    <time>2013-05-29T00:14:13Z</time>
+  </trkpt>
+  <trkpt lat="44.564304025711955" lon="-123.26573432523303">
+    <time>2013-05-29T00:14:25Z</time>
+  </trkpt>
+  <trkpt lat="44.562475193277749" lon="-123.26668785053782">
+    <time>2013-05-29T00:14:58Z</time>
+  </trkpt>
+  <trkpt lat="44.561513934371369" lon="-123.2671706481605">
+    <time>2013-05-29T00:15:15Z</time>
+  </trkpt>
+  <trkpt lat="44.561223451417902" lon="-123.26610312897257">
+    <time>2013-05-29T00:15:28Z</time>
+  </trkpt>
+  <trkpt lat="44.560573681666241" lon="-123.26362745005183">
+    <time>2013-05-29T00:16:00Z</time>
+  </trkpt>
+  </trkseg>
+</trk>
+</gpx>
diff --git a/data/gpx/tracks.vik b/data/gpx/tracks.vik
@@ -0,0 +1,97 @@
+#VIKING GPS Data file http://viking.sf.net/
+FILE_VERSION=1
+
+xmpp=4,000000
+ympp=4,000000
+lat=44,565074
+lon=-123,260815
+mode=mercator
+color=#cccccc
+highlightcolor=#eea500
+drawscale=t
+drawcentermark=t
+drawhighlight=t
+
+~Layer Map
+name=Carte par défaut
+mode=19
+directory=
+cache_type=1
+mapfile=
+alpha=105
+autodownload=t
+adlonlymissing=f
+mapzoom=0
+~EndLayer
+
+
+~Layer TrackWaypoint
+name=Point de cheminement de la trace
+tracks_visible=t
+waypoints_visible=t
+routes_visible=t
+trackdrawlabels=t
+trackfontsize=3
+drawmode=0
+trackcolor=#000000
+drawlines=t
+line_thickness=1
+drawdirections=f
+trkdirectionsize=5
+drawpoints=t
+trkpointsize=2
+drawelevation=f
+elevation_factor=30
+drawstops=f
+stop_length=60
+bg_line_thickness=0
+trackbgcolor=#ffffff
+speed_factor=30,000000
+tracksortorder=0
+drawlabels=t
+wpfontsize=3
+wpcolor=#000000
+wptextcolor=#ffffff
+wpbgcolor=#8383c4
+wpbgand=f
+wpsymbol=0
+wpsize=4
+wpsyms=t
+wpsortorder=0
+drawimages=t
+image_size=64
+image_alpha=255
+image_cache_size=300
+metadatadesc=
+metadataauthor=
+metadatatime=2016-06-24T07:27:11.445303Z
+metadatakeywords=
+
+
+~LayerData
+type="waypointlist"
+type="waypointlistend"
+type="track" name="car1" comment="car1 track" color=#ff0000
+type="trackpoint" latitude="44.563541335986407" longitude="-123.27078737325095" name="start" unixtime="1369786338"
+type="trackpoint" latitude="44.562282178350422" longitude="-123.26587480593018" unixtime="1369786521"
+type="trackpoint" latitude="44.562211469751361" longitude="-123.26575008321099" unixtime="1369786526"
+type="trackpoint" latitude="44.562108273263384" longitude="-123.2658064096003" unixtime="1369786532"
+type="trackpoint" latitude="44.560395949264517" longitude="-123.26669422078423" unixtime="1369786621"
+type="trackpoint" latitude="44.560247838514897" longitude="-123.26679480362229" unixtime="1369786630"
+type="trackpoint" latitude="44.559945882528396" longitude="-123.26556098747544" unixtime="1369786675"
+type="trackpoint" latitude="44.561463291066232" longitude="-123.26477778244309" unixtime="1369786755"
+type="trackpoint" latitude="44.562887770077587" longitude="-123.26405502862357" unixtime="1369786830"
+type="trackend"
+type="track" name="car2" color=#000000
+type="trackpoint" latitude="44.570059599592739" longitude="-123.26154069143824" unixtime="1369786350" newsegment="yes"
+type="trackpoint" latitude="44.567141755322709" longitude="-123.26316611010127" unixtime="1369786402"
+type="trackpoint" latitude="44.564237141526093" longitude="-123.26473788458399" unixtime="1369786453"
+type="trackpoint" latitude="44.564304025711955" longitude="-123.26573432523303" unixtime="1369786465"
+type="trackpoint" latitude="44.562475193277749" longitude="-123.26668785053782" unixtime="1369786498"
+type="trackpoint" latitude="44.561513934371369" longitude="-123.2671706481605" unixtime="1369786515"
+type="trackpoint" latitude="44.561223451417902" longitude="-123.26610312897257" unixtime="1369786528"
+type="trackpoint" latitude="44.560573681666241" longitude="-123.26362745005183" unixtime="1369786560"
+type="trackend"
+~EndLayerData
+~EndLayer
+
diff --git a/examples/example_4.html b/examples/example_4.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>LeafletPlayback</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet" type="text/css" />
+    <style>
+    #map {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    #title_container {
+        z-index: 10000;
+        position: fixed;
+        left: 100px;
+    }
+
+    body {
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        }
+
+    h1 {
+        font-size: 36px;
+        font-weight: 300;
+        line-height: 1.1;
+    }
+
+    .datetimeControl p {
+        margin: 0;
+        font-size: 16px;
+    }
+    </style>
+</head>
+
+<body>
+    <div id="title_container">
+        <h1>Example 4</h1>
+        <p>Basic example of GPX loading in LeafletPlayback</p>
+    </div>
+
+    <div id="map"></div>
+
+    <script src="http://code.jquery.com/jquery-1.11.0.js"></script>
+    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet-src.js"></script>
+
+    <script src="../dist/LeafletPlayback.js"></script>
+
+    <script src="example_4.js"></script>  
+</body>
+</html>
diff --git a/examples/example_4.js b/examples/example_4.js
@@ -0,0 +1,44 @@
+$(function() {
+    // Setup leaflet map
+    var map = new L.Map('map');
+
+    var basemapLayer = new L.TileLayer('http://{s}.tiles.mapbox.com/v3/github.map-xgq2svrz/{z}/{x}/{y}.png');
+
+    // Center map and default zoom level
+    map.setView([44.562108, -123.265806], 14);
+
+    // Adds the background layer to the map
+    map.addLayer(basemapLayer);
+
+    // =====================================================
+    // =============== Playback ============================
+    // =====================================================
+
+    // Playback options
+    var playbackOptions = {
+        playControl: true,
+        dateControl: true,
+        sliderControl: true     
+    };
+
+
+	var playback;
+
+	//playback = new L.Playback(map, null, null, playbackOptions); 
+
+	gpx_data = atob(
+	"PD94bWwgdmVyc2lvbj0iMS4wIj8+DQo8Z3B4IHZlcnNpb249IjEuMCIgY3JlYXRvcj0iVmlraW5nIC0tIGh0dHA6Ly92aWtpbmcuc2YubmV0LyINCnhtbG5zOnhzaT0iaHR0cDovL3d3dy53My5vcmcvMjAwMS9YTUxTY2hlbWEtaW5zdGFuY2UiDQp4bWxucz0iaHR0cDovL3d3dy50b3BvZ3JhZml4LmNvbS9HUFgvMS8wIg0KeHNpOnNjaGVtYUxvY2F0aW9uPSJodHRwOi8vd3d3LnRvcG9ncmFmaXguY29tL0dQWC8xLzAgaHR0cDovL3d3dy50b3BvZ3JhZml4LmNvbS9HUFgvMS8wL2dweC54c2QiPg0KICA8bmFtZT5Qb2ludCBkZSBjaGVtaW5lbWVudCBkZSBsYSB0cmFjZTwvbmFtZT4NCiAgPGF1dGhvcj48L2F1dGhvcj4NCiAgPGRlc2M+PC9kZXNjPg0KICA8dGltZT4yMDE2LTA2LTI0VDA3OjI3OjExLjQ0NTMwM1o8L3RpbWU+DQogIDxrZXl3b3Jkcz48L2tleXdvcmRzPg0KPHRyaz4NCiAgPG5hbWU+Y2FyMTwvbmFtZT4NCiAgPGNtdD5jYXIxIHRyYWNrPC9jbXQ+DQogIDx0cmtzZWc+DQogIDx0cmtwdCBsYXQ9IjQ0LjU2MzU0MTMzNTk4NjQwNyIgbG9uPSItMTIzLjI3MDc4NzM3MzI1MDk1Ij4NCiAgICA8bmFtZT5zdGFydDwvbmFtZT4NCiAgICA8dGltZT4yMDEzLTA1LTI5VDAwOjEyOjE4WjwvdGltZT4NCiAgPC90cmtwdD4NCiAgPHRya3B0IGxhdD0iNDQuNTYyMjgyMTc4MzUwNDIyIiBsb249Ii0xMjMuMjY1ODc0ODA1OTMwMTgiPg0KICAgIDx0aW1lPjIwMTMtMDUtMjlUMDA6MTU6MjFaPC90aW1lPg0KICA8L3Rya3B0Pg0KICA8dHJrcHQgbGF0PSI0NC41NjIyMTE0Njk3NTEzNjEiIGxvbj0iLTEyMy4yNjU3NTAwODMyMTA5OSI+DQogICAgPHRpbWU+MjAxMy0wNS0yOVQwMDoxNToyNlo8L3RpbWU+DQogIDwvdHJrcHQ+DQogIDx0cmtwdCBsYXQ9IjQ0LjU2MjEwODI3MzI2MzM4NCIgbG9uPSItMTIzLjI2NTgwNjQwOTYwMDMiPg0KICAgIDx0aW1lPjIwMTMtMDUtMjlUMDA6MTU6MzJaPC90aW1lPg0KICA8L3Rya3B0Pg0KICA8dHJrcHQgbGF0PSI0NC41NjAzOTU5NDkyNjQ1MTciIGxvbj0iLTEyMy4yNjY2OTQyMjA3ODQyMyI+DQogICAgPHRpbWU+MjAxMy0wNS0yOVQwMDoxNzowMVo8L3RpbWU+DQogIDwvdHJrcHQ+DQogIDx0cmtwdCBsYXQ9IjQ0LjU2MDI0NzgzODUxNDg5NyIgbG9uPSItMTIzLjI2Njc5NDgwMzYyMjI5Ij4NCiAgICA8dGltZT4yMDEzLTA1LTI5VDAwOjE3OjEwWjwvdGltZT4NCiAgPC90cmtwdD4NCiAgPHRya3B0IGxhdD0iNDQuNTU5OTQ1ODgyNTI4Mzk2IiBsb249Ii0xMjMuMjY1NTYwOTg3NDc1NDQiPg0KICAgIDx0aW1lPjIwMTMtMDUtMjlUMDA6MTc6NTVaPC90aW1lPg0KICA8L3Rya3B0Pg0KICA8dHJrcHQgbGF0PSI0NC41NjE0NjMyOTEwNjYyMzIiIGxvbj0iLTEyMy4yNjQ3Nzc3ODI0NDMwOSI+DQogICAgPHRpbWU+MjAxMy0wNS0yOVQwMDoxOToxNVo8L3RpbWU+DQogIDwvdHJrcHQ+DQogIDx0cmtwdCBsYXQ9IjQ0LjU2Mjg4Nzc3MDA3NzU4NyIgbG9uPSItMTIzLjI2NDA1NTAyODYyMzU3Ij4NCiAgICA8dGltZT4yMDEzLTA1LTI5VDAwOjIwOjMwWjwvdGltZT4NCiAgPC90cmtwdD4NCiAgPC90cmtzZWc+DQo8L3Ryaz4NCjx0cms+DQogIDxuYW1lPmNhcjI8L25hbWU+DQogIDx0cmtzZWc+DQogIDx0cmtwdCBsYXQ9IjQ0LjU3MDA1OTU5OTU5MjczOSIgbG9uPSItMTIzLjI2MTU0MDY5MTQzODI0Ij4NCiAgICA8dGltZT4yMDEzLTA1LTI5VDAwOjEyOjMwWjwvdGltZT4NCiAgPC90cmtwdD4NCiAgPHRya3B0IGxhdD0iNDQuNTY3MTQxNzU1MzIyNzA5IiBsb249Ii0xMjMuMjYzMTY2MTEwMTAxMjciPg0KICAgIDx0aW1lPjIwMTMtMDUtMjlUMDA6MTM6MjJaPC90aW1lPg0KICA8L3Rya3B0Pg0KICA8dHJrcHQgbGF0PSI0NC41NjQyMzcxNDE1MjYwOTMiIGxvbj0iLTEyMy4yNjQ3Mzc4ODQ1ODM5OSI+DQogICAgPHRpbWU+MjAxMy0wNS0yOVQwMDoxNDoxM1o8L3RpbWU+DQogIDwvdHJrcHQ+DQogIDx0cmtwdCBsYXQ9IjQ0LjU2NDMwNDAyNTcxMTk1NSIgbG9uPSItMTIzLjI2NTczNDMyNTIzMzAzIj4NCiAgICA8dGltZT4yMDEzLTA1LTI5VDAwOjE0OjI1WjwvdGltZT4NCiAgPC90cmtwdD4NCiAgPHRya3B0IGxhdD0iNDQuNTYyNDc1MTkzMjc3NzQ5IiBsb249Ii0xMjMuMjY2Njg3ODUwNTM3ODIiPg0KICAgIDx0aW1lPjIwMTMtMDUtMjlUMDA6MTQ6NThaPC90aW1lPg0KICA8L3Rya3B0Pg0KICA8dHJrcHQgbGF0PSI0NC41NjE1MTM5MzQzNzEzNjkiIGxvbj0iLTEyMy4yNjcxNzA2NDgxNjA1Ij4NCiAgICA8dGltZT4yMDEzLTA1LTI5VDAwOjE1OjE1WjwvdGltZT4NCiAgPC90cmtwdD4NCiAgPHRya3B0IGxhdD0iNDQuNTYxMjIzNDUxNDE3OTAyIiBsb249Ii0xMjMuMjY2MTAzMTI4OTcyNTciPg0KICAgIDx0aW1lPjIwMTMtMDUtMjlUMDA6MTU6MjhaPC90aW1lPg0KICA8L3Rya3B0Pg0KICA8dHJrcHQgbGF0PSI0NC41NjA1NzM2ODE2NjYyNDEiIGxvbj0iLTEyMy4yNjM2Mjc0NTAwNTE4MyI+DQogICAgPHRpbWU+MjAxMy0wNS0yOVQwMDoxNjowMFo8L3RpbWU+DQogIDwvdHJrcHQ+DQogIDwvdHJrc2VnPg0KPC90cms+DQo8L2dweD4NCg=="
+    );
+
+
+			geoJsonData =  L.Playback.Util.ParseGPX(gpx_data);
+		//playback.setData(geoJsonData);
+		/* ^^^^^^^apparently, the time slider is not updated correctly after calling setData,
+		while calling the next commented line here gives a correct slider. */
+	 playback = new L.Playback(map, geoJsonData, null, playbackOptions); 
+
+
+
+
+
+});