Procházet zdrojové kódy

added maps (leaflet)

Bachir Soussi Chiadmi před 7 roky
rodič
revize
8adb390d91

Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 57 - 0
www/public_html/assets/icon.svg


+ 2 - 1
www/public_html/bower.json

@@ -19,7 +19,8 @@
     "jquery": "",
     "normalize-css": "",
     "leaflet": "",
-    "vis":""
+    "vis": "",
+    "leaflet-providers": "^1.1.11"
   },
   "devDependencies": {}
 }

+ 35 - 0
www/public_html/bower_components/leaflet-providers/.bower.json

@@ -0,0 +1,35 @@
+{
+  "name": "leaflet-providers",
+  "version": "1.1.11",
+  "homepage": "https://github.com/leaflet-extras/leaflet-providers",
+  "description": "An extension to Leaflet that contains configurations for various free tile providers.",
+  "dependencies": {
+    "leaflet": "~0.7.3"
+  },
+  "main": "leaflet-providers.js",
+  "keywords": [
+    "leaflet",
+    "stamen",
+    "osm"
+  ],
+  "license": "BSD-2-Clause",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "preview",
+    "*.html"
+  ],
+  "_release": "1.1.11",
+  "_resolution": {
+    "type": "version",
+    "tag": "1.1.11",
+    "commit": "8ead40930c558e082ce57add939e8ac37576ee91"
+  },
+  "_source": "https://github.com/leaflet-extras/leaflet-providers.git",
+  "_target": "^1.1.11",
+  "_originalSource": "leaflet-providers",
+  "_direct": true
+}

+ 42 - 0
www/public_html/bower_components/leaflet-providers/CHANGELOG.md

@@ -0,0 +1,42 @@
+
+# Leaflet-providers changelog
+
+## master version
+ - Added protocol relativity to OSM FR, OSM HOT and Hydda providers (#214, #215).
+
+## 1.1.9 (2016-03-23)
+ - Re-added HERE layers #209, discussion in #206.
+
+## 1.1.8 (2016-03-22)
+ - Removed HERE layers #206
+
+## 1.1.7 (2015-12-16)
+ - Removed Acetate tile layers #198
+
+## 1.1.6 (2015-11-03)
+ - Removed most of the NLS layers per NLS request #193, fixes #178
+ - Added new variants to the HERE provider #183 by [@andreaswc](https://github.com/andreaswc)
+ - Added some tests to make sure all the placeholders in the url template are replaced #188
+
+## 1.1.5 (2015-10-01)
+ - Improvements for the NLS layers #182 by [@tomhughes](https://github.com/tomhughes)
+ - Check for valid bounds before fitting the preview map to undefined (fixes #185)
+ - Add bounds for FreeMapSK (fixes #184)
+ - Fix Stamen layers with `.jpg` extension (#187, fixes #184)
+
+## 1.1.4 (2015-09-27)
+ - Only include the interesting files in the npm package #180
+ - Add GSGS_Ireland to NLS provider with `tms:true` to invert y-axis #181
+
+## 1.1.3 (2015-09-26)
+ - Add various historical layers of the Natioanal library of Scotland (NLS) #179
+ - Add a page to visually check bounds #179
+
+## 1.1.2 (2015-09-05)
+ - Add CartoDB labels-only styles #170 by [@almccon](https://github.com/almccon)
+ - Implement commonjs module #172
+ - Added retina URL option #177, [@routexl](https://github.com/routexl)
+
+## 1.1.1 (2015-06-22)
+ - Update Mapbox API to v4 #167 by [@gutenye](https://github.com/gutenye)
+ - Started maintaining a changelog in CHANGELOG.md.

+ 10 - 0
www/public_html/bower_components/leaflet-providers/CONTRIBUTING.md

@@ -0,0 +1,10 @@
+So you want to add a layer?
+=======
+
+Yay! go add it to the leaflet-providers.js as long as it follows the following 
+rules:
+
+- Don't violate a providers TOS (if it exists, include a link to it)
+- Don't pre-populate api keys with working keys.
+- It should be a basic tile source, no exteral libraries etc.
+- The owner hasn't asked us to remove it (hasn't happened yet)

+ 63 - 0
www/public_html/bower_components/leaflet-providers/README.md

@@ -0,0 +1,63 @@
+Leaflet-providers
+=================
+An extension to [Leaflet](http://leafletjs.com/) that contains configurations for various free<sup>[1](#what-is-free)</sup> tile providers.
+
+# Usage
+Leaflet-providers [providers](#providers) are refered to with a `provider[.<variant>]`-string. Let's say you want to add the nice [Watercolor](http://maps.stamen.com/#watercolor/) style from Stamen to your map, you pass `Stamen.Watercolor` to the `L.tileLayer.provider`-constructor, which will return a [L.TileLayer](http://leafletjs.com/reference.html#tilelayer) instance for Stamens Watercolor tile layer.
+
+```Javascript
+// add Stamen Watercolor to map.
+L.tileLayer.provider('Stamen.Watercolor').addTo(map);
+```
+
+## Protocol relativity (`https://`-urls)
+
+Leaflet-providers tries to use `https://` if the page uses `https://` and the provider supports it.
+You can force the use of `http://` by passing `force_http: true` in the options argument.
+
+## Retina tiles
+
+Some providers have retina tiles for which the URL only needs to be slightly adjusted, e.g. `-----@2x.png`. For this, add the retina option in the URL, e.g. `-----{retina}.png`, and set a retina value in the options, e.g. `retina: '@2x'`. If Leaflet detects a retina screen (`L.Browser.retina`), the retina option passed to the tileLayer is set to the value supplied, otherwise it's replaced by an empty string.
+
+# Providers
+
+Leaflet-providers provides tile layers from different providers, including *OpenStreetMap*, *MapQuestOpen*, *Stamen*, *Esri* and *OpenWeatherMap*. The full listing of free to use layers can be [previewed](http://leaflet-extras.github.io/leaflet-providers/preview/index.html). The page will show you the name to use with `leaflet-providers.js` and the code to use it without dependencies.
+
+## Providers requiring registration
+
+In addition to the providers you are free<b id="what-is-free">1</b> to use, we support some layers which require registration.
+
+### HERE (formerly Nokia).
+
+In order to use HERE layers, you must [register](http://developer.here.com/). Once registered, you can create an `app_id` and `app_code` which you have to pass to `L.tileLayer.provider` in the options:
+
+```Javascript
+L.tileLayer.provider('HERE.terrainDay', {
+    app_id: '<insert ID here>',
+    app_code: '<insert ID here>'
+}).addTo(map);
+```
+
+[Available HERE layers](http://leaflet-extras.github.io/leaflet-providers/preview/#filter=HERE)
+
+### Mapbox
+
+In order to use Mapbox maps, you must [register](https://tiles.mapbox.com/signup). You can get map ID and ACCESS_TOKEN from [Mapbox projects](https://www.mapbox.com/projects):
+```JavaScript
+L.tileLayer.provider('MapBox', {id: 'ID', accessToken: 'ACCESS_TOKEN'}).addTo(map);
+```
+
+### Esri/ArcGIS
+
+In order to use ArcGIS maps, you must [register](https://developers.arcgis.com/en/sign-up/) and abide by the [terms of service](https://developers.arcgis.com/en/terms/). No special syntax is required.
+
+[Available Esri layers](http://leaflet-extras.github.io/leaflet-providers/preview/#filter=Esri)
+
+# Attribution
+
+This work was inspired from <https://gist.github.com/1804938>, and originally created by [Stefan Seelmann](https://github.com/seelmann).
+
+### What do we mean by *free*?
+<b id="what-is-free">1</b>
+We try to maintain leaflet-providers in such a way that you'll be able to use the layers we include without paying money. 
+This doesn't mean no limits apply, you should always check before using these layers for anything serious.

+ 25 - 0
www/public_html/bower_components/leaflet-providers/bower.json

@@ -0,0 +1,25 @@
+{
+  "name": "leaflet-providers",
+  "version": "1.1.11",
+  "homepage": "https://github.com/leaflet-extras/leaflet-providers",
+  "description": "An extension to Leaflet that contains configurations for various free tile providers.",
+  "dependencies": {
+    "leaflet": "~0.7.3"
+  },
+  "main": "leaflet-providers.js",
+  "keywords": [
+    "leaflet",
+    "stamen",
+    "osm"
+  ],
+  "license": "BSD-2-Clause",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "preview",
+    "*.html"
+  ]
+}

+ 127 - 0
www/public_html/bower_components/leaflet-providers/css/gh-fork-ribbon.css

@@ -0,0 +1,127 @@
+/* Left will inherit from right (so we don't need to duplicate code */
+.github-fork-ribbon {
+  /* The right and left lasses determine the side we attach our banner to */
+  position: absolute;
+
+  /* Add a bit of padding to give some substance outside the "stitching" */
+  padding: 2px 0;
+
+  /* Set the base colour */
+  background-color: #a00;
+
+  /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.00)), to(rgba(0, 0, 0, 0.15)));
+  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
+  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
+  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
+  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
+  background-image: linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
+  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#000000', EndColorStr='#000000');
+
+  /* Add a drop shadow */
+  -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
+  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
+
+  z-index: 9999;
+}
+
+.github-fork-ribbon a {
+  /* Set the font */
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  font-weight: 700;
+  color: white;
+
+  /* Set the text properties */
+  text-decoration: none;
+  text-shadow: 0 -1px rgba(0,0,0,0.5);
+  text-align: center;
+
+  /* Set the geometry. If you fiddle with these you'll also need to tweak the top and right values in #github-fork-ribbon. */
+  width: 200px;
+  line-height: 20px;
+
+  /* Set the layout properties */
+  display: inline-block;
+  padding: 2px 0;
+
+  /* Add "stitching" effect */
+  border-width: 1px 0;
+  border-style: dotted;
+  border-color: rgba(255,255,255,0.7);
+}
+
+.github-fork-ribbon-wrapper {
+  width: 150px;
+  height: 150px;
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+}
+
+.github-fork-ribbon-wrapper.left {
+  left: 0;
+}
+
+.github-fork-ribbon-wrapper.right {
+  right: 0;
+}
+
+.github-fork-ribbon-wrapper.left-bottom {
+  position: fixed;
+  top: inherit;
+  bottom: 0;
+  left: 0;
+}
+
+.github-fork-ribbon-wrapper.right-bottom {
+  position: fixed;
+  top: inherit;
+  bottom: 0;
+  right: 0;
+}
+
+.github-fork-ribbon-wrapper.right .github-fork-ribbon {
+  top: 42px;
+  right: -43px;
+
+  /* Rotate the banner 45 degrees */
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.github-fork-ribbon-wrapper.left .github-fork-ribbon {
+  top: 42px;
+  left: -43px;
+
+  /* Rotate the banner -45 degrees */
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+
+.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
+  top: 80px;
+  left: -43px;
+
+  /* Rotate the banner -45 degrees */
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
+  top: 80px;
+  right: -43px;
+
+  /* Rotate the banner -45 degrees */
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}

+ 68 - 0
www/public_html/bower_components/leaflet-providers/css/gh-fork-ribbon.ie.css

@@ -0,0 +1,68 @@
+/* IE voodoo courtesy of http://stackoverflow.com/a/4617511/263871 and
+ * http://www.useragentman.com/IETransformsTranslator */
+.github-fork-ribbon-wrapper.right .github-fork-ribbon {
+  /* IE positioning hack (couldn't find a transform-origin alternative for IE) */
+  top: -22px;
+  right: -62px;
+
+  /* IE8+ */
+  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
+  /* IE6 and 7 */
+  filter: progid:DXImageTransform.Microsoft.Matrix(
+    M11=0.7071067811865474,
+    M12=-0.7071067811865477,
+    M21=0.7071067811865477,
+    M22=0.7071067811865474,
+    SizingMethod='auto expand'
+  );
+}
+
+.github-fork-ribbon-wrapper.left .github-fork-ribbon {
+  top: -22px;
+  left: -22px;
+
+  /* IE8+ */
+  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
+  /* IE6 and 7 */
+  filter: progid:DXImageTransform.Microsoft.Matrix(
+    M11=0.7071067811865483,
+    M12=0.7071067811865467,
+    M21=-0.7071067811865467,
+    M22=0.7071067811865483,
+    SizingMethod='auto expand'
+  );
+}
+
+.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
+  /* IE positioning hack (couldn't find a transform-origin alternative for IE) */
+  top: 12px;
+  left: -22px;
+
+
+  /* IE8+ */
+  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
+  /* IE6 and 7 */
+/*  filter: progid:DXImageTransform.Microsoft.Matrix(
+    M11=0.7071067811865474,
+    M12=-0.7071067811865477,
+    M21=0.7071067811865477,
+    M22=0.7071067811865474,
+    SizingMethod='auto expand'
+  );
+*/}
+
+.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
+  top: 12px;
+  right: -62px;
+
+  /* IE8+ */
+  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
+  /* IE6 and 7 */
+  filter: progid:DXImageTransform.Microsoft.Matrix(
+    M11=0.7071067811865483,
+    M12=0.7071067811865467,
+    M21=-0.7071067811865467,
+    M22=0.7071067811865483,
+    SizingMethod='auto expand'
+  );
+}

+ 673 - 0
www/public_html/bower_components/leaflet-providers/leaflet-providers.js

@@ -0,0 +1,673 @@
+(function (root, factory) {
+	if (typeof define === 'function' && define.amd) {
+		// AMD. Register as an anonymous module.
+		define(['leaflet'], factory);
+	} else if (typeof modules === 'object' && module.exports) {
+		// define a Common JS module that relies on 'leaflet'
+		module.exports = factory(require('leaflet'));
+	} else {
+		// Assume Leaflet is loaded into global object L already
+		factory(L);
+	}
+}(this, function (L) {
+	'use strict';
+
+	L.TileLayer.Provider = L.TileLayer.extend({
+		initialize: function (arg, options) {
+			var providers = L.TileLayer.Provider.providers;
+
+			var parts = arg.split('.');
+
+			var providerName = parts[0];
+			var variantName = parts[1];
+
+			if (!providers[providerName]) {
+				throw 'No such provider (' + providerName + ')';
+			}
+
+			var provider = {
+				url: providers[providerName].url,
+				options: providers[providerName].options
+			};
+
+			// overwrite values in provider from variant.
+			if (variantName && 'variants' in providers[providerName]) {
+				if (!(variantName in providers[providerName].variants)) {
+					throw 'No such variant of ' + providerName + ' (' + variantName + ')';
+				}
+				var variant = providers[providerName].variants[variantName];
+				var variantOptions;
+				if (typeof variant === 'string') {
+					variantOptions = {
+						variant: variant
+					};
+				} else {
+					variantOptions = variant.options;
+				}
+				provider = {
+					url: variant.url || provider.url,
+					options: L.Util.extend({}, provider.options, variantOptions)
+				};
+			}
+
+			var forceHTTP = window.location.protocol === 'file:' || provider.options.forceHTTP;
+			if (provider.url.indexOf('//') === 0 && forceHTTP) {
+				provider.url = 'http:' + provider.url;
+			}
+
+			// If retina option is set
+			if (provider.options.retina) {
+				// Check retina screen
+				if (options.detectRetina && L.Browser.retina) {
+					// The retina option will be active now
+					// But we need to prevent Leaflet retina mode
+					options.detectRetina = false;
+				} else {
+					// No retina, remove option
+					provider.options.retina = '';
+				}
+			}
+
+			// replace attribution placeholders with their values from toplevel provider attribution,
+			// recursively
+			var attributionReplacer = function (attr) {
+				if (attr.indexOf('{attribution.') === -1) {
+					return attr;
+				}
+				return attr.replace(/\{attribution.(\w*)\}/,
+					function (match, attributionName) {
+						return attributionReplacer(providers[attributionName].options.attribution);
+					}
+				);
+			};
+			provider.options.attribution = attributionReplacer(provider.options.attribution);
+
+			// Compute final options combining provider options with any user overrides
+			var layerOpts = L.Util.extend({}, provider.options, options);
+			L.TileLayer.prototype.initialize.call(this, provider.url, layerOpts);
+		}
+	});
+
+	/**
+	 * Definition of providers.
+	 * see http://leafletjs.com/reference.html#tilelayer for options in the options map.
+	 */
+
+	L.TileLayer.Provider.providers = {
+		OpenStreetMap: {
+			url: '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			options: {
+				maxZoom: 19,
+				attribution:
+					'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+			},
+			variants: {
+				Mapnik: {},
+				BlackAndWhite: {
+					url: 'http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png',
+					options: {
+						maxZoom: 18
+					}
+				},
+				DE: {
+					url: 'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',
+					options: {
+						maxZoom: 18
+					}
+				},
+				France: {
+					url: '//{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
+					options: {
+						attribution: '&copy; Openstreetmap France | {attribution.OpenStreetMap}'
+					}
+				},
+				HOT: {
+					url: '//{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
+					options: {
+						attribution: '{attribution.OpenStreetMap}, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
+					}
+				}
+			}
+		},
+		OpenSeaMap: {
+			url: 'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
+			options: {
+				attribution: 'Map data: &copy; <a href="http://www.openseamap.org">OpenSeaMap</a> contributors'
+			}
+		},
+		OpenTopoMap: {
+			url: '//{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
+			options: {
+				maxZoom: 17,
+				attribution: 'Map data: {attribution.OpenStreetMap}, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
+			}
+		},
+		Thunderforest: {
+			url: '//{s}.tile.thunderforest.com/{variant}/{z}/{x}/{y}.png',
+			options: {
+				attribution:
+					'&copy; <a href="http://www.thunderforest.com/">Thunderforest</a>, {attribution.OpenStreetMap}',
+				variant: 'cycle'
+			},
+			variants: {
+				OpenCycleMap: 'cycle',
+				Transport: {
+					options: {
+						variant: 'transport',
+						maxZoom: 19
+					}
+				},
+				TransportDark: {
+					options: {
+						variant: 'transport-dark',
+						maxZoom: 19
+					}
+				},
+				SpinalMap: {
+					options: {
+						variant: 'spinal-map',
+						maxZoom: 11
+					}
+				},
+				Landscape: 'landscape',
+				Outdoors: 'outdoors',
+				Pioneer: 'pioneer'
+			}
+		},
+		OpenMapSurfer: {
+			url: 'http://korona.geog.uni-heidelberg.de/tiles/{variant}/x={x}&y={y}&z={z}',
+			options: {
+				maxZoom: 20,
+				variant: 'roads',
+				attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> &mdash; Map data {attribution.OpenStreetMap}'
+			},
+			variants: {
+				Roads: 'roads',
+				AdminBounds: {
+					options: {
+						variant: 'adminb',
+						maxZoom: 19
+					}
+				},
+				Grayscale: {
+					options: {
+						variant: 'roadsg',
+						maxZoom: 19
+					}
+				}
+			}
+		},
+		Hydda: {
+			url: '//{s}.tile.openstreetmap.se/hydda/{variant}/{z}/{x}/{y}.png',
+			options: {
+				variant: 'full',
+				attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data {attribution.OpenStreetMap}'
+			},
+			variants: {
+				Full: 'full',
+				Base: 'base',
+				RoadsAndLabels: 'roads_and_labels'
+			}
+		},
+		MapQuestOpen: {
+			/* Mapquest does support https, but with a different subdomain:
+			 * https://otile{s}-s.mqcdn.com/tiles/1.0.0/{type}/{z}/{x}/{y}.{ext}
+			 * which makes implementing protocol relativity impossible.
+			 */
+			url: 'http://otile{s}.mqcdn.com/tiles/1.0.0/{type}/{z}/{x}/{y}.{ext}',
+			options: {
+				type: 'map',
+				ext: 'jpg',
+				attribution:
+					'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; ' +
+					'Map data {attribution.OpenStreetMap}',
+				subdomains: '1234'
+			},
+			variants: {
+				OSM: {},
+				Aerial: {
+					options: {
+						type: 'sat',
+						attribution:
+							'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; ' +
+							'Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency'
+					}
+				},
+				HybridOverlay: {
+					options: {
+						type: 'hyb',
+						ext: 'png',
+						opacity: 0.9
+					}
+				}
+			}
+		},
+		MapBox: {
+			url: '//api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',
+			options: {
+				attribution:
+					'Imagery from <a href="http://mapbox.com/about/maps/">MapBox</a> &mdash; ' +
+					'Map data {attribution.OpenStreetMap}',
+				subdomains: 'abcd'
+			}
+		},
+		Stamen: {
+			url: '//stamen-tiles-{s}.a.ssl.fastly.net/{variant}/{z}/{x}/{y}.{ext}',
+			options: {
+				attribution:
+					'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
+					'<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; ' +
+					'Map data {attribution.OpenStreetMap}',
+				subdomains: 'abcd',
+				minZoom: 0,
+				maxZoom: 20,
+				variant: 'toner',
+				ext: 'png'
+			},
+			variants: {
+				Toner: 'toner',
+				TonerBackground: 'toner-background',
+				TonerHybrid: 'toner-hybrid',
+				TonerLines: 'toner-lines',
+				TonerLabels: 'toner-labels',
+				TonerLite: 'toner-lite',
+				Watercolor: {
+					options: {
+						variant: 'watercolor',
+						minZoom: 1,
+						maxZoom: 16
+					}
+				},
+				Terrain: {
+					options: {
+						variant: 'terrain',
+						minZoom: 4,
+						maxZoom: 18,
+						bounds: [[22, -132], [70, -56]]
+					}
+				},
+				TerrainBackground: {
+					options: {
+						variant: 'terrain-background',
+						minZoom: 4,
+						maxZoom: 18,
+						bounds: [[22, -132], [70, -56]]
+					}
+				},
+				TopOSMRelief: {
+					options: {
+						variant: 'toposm-color-relief',
+						ext: 'jpg',
+						bounds: [[22, -132], [51, -56]]
+					}
+				},
+				TopOSMFeatures: {
+					options: {
+						variant: 'toposm-features',
+						bounds: [[22, -132], [51, -56]],
+						opacity: 0.9
+					}
+				}
+			}
+		},
+		Esri: {
+			url: '//server.arcgisonline.com/ArcGIS/rest/services/{variant}/MapServer/tile/{z}/{y}/{x}',
+			options: {
+				variant: 'World_Street_Map',
+				attribution: 'Tiles &copy; Esri'
+			},
+			variants: {
+				WorldStreetMap: {
+					options: {
+						attribution:
+							'{attribution.Esri} &mdash; ' +
+							'Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
+					}
+				},
+				DeLorme: {
+					options: {
+						variant: 'Specialty/DeLorme_World_Base_Map',
+						minZoom: 1,
+						maxZoom: 11,
+						attribution: '{attribution.Esri} &mdash; Copyright: &copy;2012 DeLorme'
+					}
+				},
+				WorldTopoMap: {
+					options: {
+						variant: 'World_Topo_Map',
+						attribution:
+							'{attribution.Esri} &mdash; ' +
+							'Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
+					}
+				},
+				WorldImagery: {
+					options: {
+						variant: 'World_Imagery',
+						attribution:
+							'{attribution.Esri} &mdash; ' +
+							'Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
+					}
+				},
+				WorldTerrain: {
+					options: {
+						variant: 'World_Terrain_Base',
+						maxZoom: 13,
+						attribution:
+							'{attribution.Esri} &mdash; ' +
+							'Source: USGS, Esri, TANA, DeLorme, and NPS'
+					}
+				},
+				WorldShadedRelief: {
+					options: {
+						variant: 'World_Shaded_Relief',
+						maxZoom: 13,
+						attribution: '{attribution.Esri} &mdash; Source: Esri'
+					}
+				},
+				WorldPhysical: {
+					options: {
+						variant: 'World_Physical_Map',
+						maxZoom: 8,
+						attribution: '{attribution.Esri} &mdash; Source: US National Park Service'
+					}
+				},
+				OceanBasemap: {
+					options: {
+						variant: 'Ocean_Basemap',
+						maxZoom: 13,
+						attribution: '{attribution.Esri} &mdash; Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri'
+					}
+				},
+				NatGeoWorldMap: {
+					options: {
+						variant: 'NatGeo_World_Map',
+						maxZoom: 16,
+						attribution: '{attribution.Esri} &mdash; National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC'
+					}
+				},
+				WorldGrayCanvas: {
+					options: {
+						variant: 'Canvas/World_Light_Gray_Base',
+						maxZoom: 16,
+						attribution: '{attribution.Esri} &mdash; Esri, DeLorme, NAVTEQ'
+					}
+				}
+			}
+		},
+		OpenWeatherMap: {
+			url: 'http://{s}.tile.openweathermap.org/map/{variant}/{z}/{x}/{y}.png',
+			options: {
+				maxZoom: 19,
+				attribution: 'Map data &copy; <a href="http://openweathermap.org">OpenWeatherMap</a>',
+				opacity: 0.5
+			},
+			variants: {
+				Clouds: 'clouds',
+				CloudsClassic: 'clouds_cls',
+				Precipitation: 'precipitation',
+				PrecipitationClassic: 'precipitation_cls',
+				Rain: 'rain',
+				RainClassic: 'rain_cls',
+				Pressure: 'pressure',
+				PressureContour: 'pressure_cntr',
+				Wind: 'wind',
+				Temperature: 'temp',
+				Snow: 'snow'
+			}
+		},
+		HERE: {
+			/*
+			 * HERE maps, formerly Nokia maps.
+			 * These basemaps are free, but you need an API key. Please sign up at
+			 * http://developer.here.com/getting-started
+			 *
+			 * Note that the base urls contain '.cit' whichs is HERE's
+			 * 'Customer Integration Testing' environment. Please remove for production
+			 * envirionments.
+			 */
+			url:
+				'//{s}.{base}.maps.cit.api.here.com/maptile/2.1/' +
+				'{type}/{mapID}/{variant}/{z}/{x}/{y}/{size}/{format}?' +
+				'app_id={app_id}&app_code={app_code}&lg={language}',
+			options: {
+				attribution:
+					'Map &copy; 1987-2014 <a href="http://developer.here.com">HERE</a>',
+				subdomains: '1234',
+				mapID: 'newest',
+				'app_id': '<insert your app_id here>',
+				'app_code': '<insert your app_code here>',
+				base: 'base',
+				variant: 'normal.day',
+				maxZoom: 20,
+				type: 'maptile',
+				language: 'eng',
+				format: 'png8',
+				size: '256'
+			},
+			variants: {
+				normalDay: 'normal.day',
+				normalDayCustom: 'normal.day.custom',
+				normalDayGrey: 'normal.day.grey',
+				normalDayMobile: 'normal.day.mobile',
+				normalDayGreyMobile: 'normal.day.grey.mobile',
+				normalDayTransit: 'normal.day.transit',
+				normalDayTransitMobile: 'normal.day.transit.mobile',
+				normalNight: 'normal.night',
+				normalNightMobile: 'normal.night.mobile',
+				normalNightGrey: 'normal.night.grey',
+				normalNightGreyMobile: 'normal.night.grey.mobile',
+
+				basicMap: {
+					options: {
+						type: 'basetile'
+					}
+				},
+				mapLabels: {
+					options: {
+						type: 'labeltile',
+						format: 'png'
+					}
+				},
+				trafficFlow: {
+					options: {
+						base: 'traffic',
+						type: 'flowtile'
+					}
+				},
+				carnavDayGrey: 'carnav.day.grey',
+				hybridDay: {
+					options: {
+						base: 'aerial',
+						variant: 'hybrid.day'
+					}
+				},
+				hybridDayMobile: {
+					options: {
+						base: 'aerial',
+						variant: 'hybrid.day.mobile'
+					}
+				},
+				pedestrianDay: 'pedestrian.day',
+				pedestrianNight: 'pedestrian.night',
+				satelliteDay: {
+					options: {
+						base: 'aerial',
+						variant: 'satellite.day'
+					}
+				},
+				terrainDay: {
+					options: {
+						base: 'aerial',
+						variant: 'terrain.day'
+					}
+				},
+				terrainDayMobile: {
+					options: {
+						base: 'aerial',
+						variant: 'terrain.day.mobile'
+					}
+				}
+			}
+		},
+		FreeMapSK: {
+			url: 'http://t{s}.freemap.sk/T/{z}/{x}/{y}.jpeg',
+			options: {
+				minZoom: 8,
+				maxZoom: 16,
+				subdomains: '1234',
+				bounds: [[47.204642, 15.996093], [49.830896, 22.576904]],
+				attribution:
+					'{attribution.OpenStreetMap}, vizualization CC-By-SA 2.0 <a href="http://freemap.sk">Freemap.sk</a>'
+			}
+		},
+		MtbMap: {
+			url: 'http://tile.mtbmap.cz/mtbmap_tiles/{z}/{x}/{y}.png',
+			options: {
+				attribution:
+					'{attribution.OpenStreetMap} &amp; USGS'
+			}
+		},
+		CartoDB: {
+			url: 'http://{s}.basemaps.cartocdn.com/{variant}/{z}/{x}/{y}.png',
+			options: {
+				attribution: '{attribution.OpenStreetMap} &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
+				subdomains: 'abcd',
+				maxZoom: 19,
+				variant: 'light_all'
+			},
+			variants: {
+				Positron: 'light_all',
+				PositronNoLabels: 'light_nolabels',
+				PositronOnlyLabels: 'light_only_labels',
+				DarkMatter: 'dark_all',
+				DarkMatterNoLabels: 'dark_nolabels',
+				DarkMatterOnlyLabels: 'dark_only_labels'
+			}
+		},
+		HikeBike: {
+			url: 'http://{s}.tiles.wmflabs.org/{variant}/{z}/{x}/{y}.png',
+			options: {
+				maxZoom: 19,
+				attribution: '{attribution.OpenStreetMap}',
+				variant: 'hikebike'
+			},
+			variants: {
+				HikeBike: {},
+				HillShading: {
+					options: {
+						maxZoom: 15,
+						variant: 'hillshading'
+					}
+				}
+			}
+		},
+		BasemapAT: {
+			url: '//maps{s}.wien.gv.at/basemap/{variant}/normal/google3857/{z}/{y}/{x}.{format}',
+			options: {
+				maxZoom: 19,
+				attribution: 'Datenquelle: <a href="www.basemap.at">basemap.at</a>',
+				subdomains: ['', '1', '2', '3', '4'],
+				format: 'png',
+				bounds: [[46.358770, 8.782379], [49.037872, 17.189532]],
+				variant: 'geolandbasemap'
+			},
+			variants: {
+				basemap: 'geolandbasemap',
+				grau: 'bmapgrau',
+				overlay: 'bmapoverlay',
+				highdpi: {
+					options: {
+						variant: 'bmaphidpi',
+						format: 'jpeg'
+					}
+				},
+				orthofoto: {
+					options: {
+						variant: 'bmaporthofoto30cm',
+						format: 'jpeg'
+					}
+				}
+			}
+		},
+		NASAGIBS: {
+			url: '//map1.vis.earthdata.nasa.gov/wmts-webmerc/{variant}/default/{time}/{tilematrixset}{maxZoom}/{z}/{y}/{x}.{format}',
+			options: {
+				attribution:
+					'Imagery provided by services from the Global Imagery Browse Services (GIBS), operated by the NASA/GSFC/Earth Science Data and Information System ' +
+					'(<a href="https://earthdata.nasa.gov">ESDIS</a>) with funding provided by NASA/HQ.',
+				bounds: [[-85.0511287776, -179.999999975], [85.0511287776, 179.999999975]],
+				minZoom: 1,
+				maxZoom: 9,
+				format: 'jpg',
+				time: '',
+				tilematrixset: 'GoogleMapsCompatible_Level'
+			},
+			variants: {
+				ModisTerraTrueColorCR: 'MODIS_Terra_CorrectedReflectance_TrueColor',
+				ModisTerraBands367CR: 'MODIS_Terra_CorrectedReflectance_Bands367',
+				ViirsEarthAtNight2012: {
+					options: {
+						variant: 'VIIRS_CityLights_2012',
+						maxZoom: 8
+					}
+				},
+				ModisTerraLSTDay: {
+					options: {
+						variant: 'MODIS_Terra_Land_Surface_Temp_Day',
+						format: 'png',
+						maxZoom: 7,
+						opacity: 0.75
+					}
+				},
+				ModisTerraSnowCover: {
+					options: {
+						variant: 'MODIS_Terra_Snow_Cover',
+						format: 'png',
+						maxZoom: 8,
+						opacity: 0.75
+					}
+				},
+				ModisTerraAOD: {
+					options: {
+						variant: 'MODIS_Terra_Aerosol',
+						format: 'png',
+						maxZoom: 6,
+						opacity: 0.75
+					}
+				},
+				ModisTerraChlorophyll: {
+					options: {
+						variant: 'MODIS_Terra_Chlorophyll_A',
+						format: 'png',
+						maxZoom: 7,
+						opacity: 0.75
+					}
+				}
+			}
+		},
+		NLS: {
+			// NLS maps are copyright National library of Scotland.
+			// http://maps.nls.uk/projects/api/index.html
+			// Please contact NLS for anything other than non-commercial low volume usage
+			//
+			// Map sources: Ordnance Survey 1:1m to 1:63K, 1920s-1940s
+			//   z0-9  - 1:1m
+			//  z10-11 - quarter inch (1:253440)
+			//  z12-18 - one inch (1:63360)
+			url: '//nls-{s}.tileserver.com/nls/{z}/{x}/{y}.jpg',
+			options: {
+				attribution: '<a href="http://geo.nls.uk/maps/">National Library of Scotland Historic Maps</a>',
+				bounds: [[49.6, -12], [61.7, 3]],
+				minZoom: 1,
+				maxZoom: 18,
+				subdomains: '0123',
+			}
+		}
+	};
+
+	L.tileLayer.provider = function (provider, options) {
+		return new L.TileLayer.Provider(provider, options);
+	};
+
+	return L;
+}));

Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 8 - 0
www/public_html/bower_components/leaflet-providers/license.md


+ 45 - 0
www/public_html/bower_components/leaflet-providers/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "leaflet-providers",
+  "version": "1.1.11",
+  "description": "An extension to Leaflet that contains configurations for various free tile providers.",
+  "main": "leaflet-providers.js",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/leaflet-extras/leaflet-providers.git"
+  },
+  "scripts": {
+    "test": "npm run lint && npm run testsuite",
+    "testsuite": "mocha-phantomjs tests/index.html",
+    "lint": "eslint --config .eslintrc leaflet-providers.js index.html preview/*.js preview/*.html tests/*",
+    "min": "uglifyjs leaflet-providers.js -mc -o leaflet-providers.min.js",
+    "release": "mversion patch -m"
+  },
+  "license": "BSD-2-Clause",
+  "bugs": {
+    "url": "https://github.com/leaflet-extras/leaflet-providers/issues"
+  },
+  "files": [
+    "leaflet-providers.js",
+    "README.md",
+    "CHANGELOG.md",
+    "licence.md"
+  ],
+  "devDependencies": {
+    "chai": "^2.3.0",
+    "eslint": "^2.7.0",
+    "eslint-plugin-html": "^1.4.0",
+    "mocha": "^2.2.4",
+    "mocha-phantomjs": "^3.5.3",
+    "mversion": "^1.3.0",
+    "phantomjs": "1.9.7-15",
+    "uglify-js": "^2.4.15"
+  },
+  "autoupdate": {
+    "source": "git",
+    "target": "git://github.com/leaflet-extras/leaflet-providers.git",
+    "basePath": "/",
+    "files": [
+      "leaflet-providers.js"
+    ]
+  }
+}

Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 0 - 0
www/public_html/css/dist/styles.min.css


+ 36 - 24
www/public_html/css/styles.css

@@ -16,7 +16,8 @@ html, body {
   position: absolute;
   z-index: 10;
   top: 0;
-  left: 0; }
+  left: 0;
+  display: none; }
 
 #timelaps {
   position: relative;
@@ -32,22 +33,45 @@ html, body {
     height: 100%; }
     @media (min-aspect-ratio: 16 / 9) {
       #timelaps video#timelapsvid {
-        height: 300%;
-        top: -100%; } }
+        height: 200%;
+        top: -50%; } }
     @media (max-aspect-ratio: 16 / 9) {
       #timelaps video#timelapsvid {
-        width: 300%;
-        left: -100%; } }
+        width: 200%;
+        left: -50%; } }
 
-#timeline {
+#mapout {
   position: absolute;
   z-index: 9;
   bottom: 0;
   left: 0;
-  width: 67%;
-  margin: 1% 0 1% 32%;
-  padding: 7px;
-  background-color: rgba(0, 0, 0, 0.8);
+  width: 23.5%;
+  margin: 1% 0.5% 1% 1%;
+  height: 10%;
+  background-color: rgba(255, 255, 255, 0.6);
+  border-radius: 2px; }
+
+#mapin {
+  position: absolute;
+  z-index: 9;
+  bottom: 0;
+  left: 25%;
+  width: 23.5%;
+  margin: 1% 0.5% 1% 0.5%;
+  height: 10%;
+  background-color: rgba(255, 255, 255, 0.6);
+  border-radius: 2px; }
+
+#timeline {
+  position: absolute;
+  z-index: 9;
+  bottom: 0;
+  right: 0;
+  width: 48%;
+  margin: 1% 1% 1% 0.5%;
+  padding: 0.5%;
+  height: 8.3%;
+  background-color: rgba(15, 15, 15, 0.8);
   border-radius: 2px; }
   #timeline .vis-timeline {
     border: none; }
@@ -56,18 +80,6 @@ html, body {
   #timeline .vis-panel.vis-center, #timeline .vis-panel.vis-top, #timeline .vis-panel.vis-bottom {
     border: none; }
   #timeline .vis-text {
-    color: white; }
+    color: #827f7f; }
   #timeline .vis-custom-time.videotime {
-    background-color: red; }
-
-#map {
-  position: absolute;
-  z-index: 9;
-  bottom: 0;
-  left: 0;
-  width: 30%;
-  margin: 1%;
-  height: 40%;
-  background-color: rgba(255, 255, 255, 0.6);
-  border-radius: 2px;
-  display: none; }
+    background-color: #2781cc; }

+ 12 - 3
www/public_html/index.php

@@ -11,15 +11,16 @@ header("Pragma: no-cache");
 
     <link rel="stylesheet" href="bower_components/normalize-css/normalize.css" media="screen" charset="utf-8">
     <link href="bower_components/vis/dist/vis.min.css" rel="stylesheet" type="text/css" />
+    <link href="bower_components/leaflet/dist/leaflet.css" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="css/styles.css" media="screen" charset="utf-8">
   </head>
   <body>
     <div id="root">
       <header id="header">
-        <h1>Lot Explorer</h1>
+        <h1>hehe, Exo Planete</h1>
       </header>
       <section id="timelaps">
-        <video id="timelapsvid" loop preload autoplay>
+        <video id="timelapsvid" loop preload >
           <!-- <source class="240p" src="videos/timelaps-240p.mp4?nocache=<?php echo time(); ?>" type="video/mp4">
           <source class="360p" src="videos/timelaps-360p.mp4?nocache=<?php echo time(); ?>" type="video/mp4">
           <source class="480p" src="videos/timelaps-480p.mp4?nocache=<?php echo time(); ?>" type="video/mp4">
@@ -34,7 +35,13 @@ header("Pragma: no-cache");
       </section>
       <!-- timeline -->
 
-      <section id="map">
+      <section id="mapout">
+        <!-- add leaflet map here -->
+        <!-- or a striped map https://bl.ocks.org/veltman/3ad474e52925d007b292eefbe676174d -->
+      </section>
+      <!-- map -->
+
+      <section id="mapin">
         <!-- add leaflet map here -->
         <!-- or a striped map https://bl.ocks.org/veltman/3ad474e52925d007b292eefbe676174d -->
       </section>
@@ -45,6 +52,8 @@ header("Pragma: no-cache");
 
     <script src="bower_components/jquery/dist/jquery.min.js" charset="utf-8"></script>
     <script src="bower_components/vis/dist/vis.min.js"></script>
+    <script src="bower_components/leaflet/dist/leaflet.js"></script>
+    <script src="bower_components/leaflet-providers/leaflet-providers.js"></script>
     <script src="js/dist/script.min.js" charset="utf-8"></script>
   </body>
 </html>

Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 0 - 0
www/public_html/js/dist/script.min.js


+ 101 - 14
www/public_html/js/script.js

@@ -1,10 +1,25 @@
 $(document).ready(function() {
 
-  var _frames, _frames_length;
-  var _$timelaps = $('#timelaps'), _$video = $("#timelapsvid"), _video = document.getElementById('timelapsvid'), _fps = 12, _vid_current_time;
+  var _frames;
+
+  var _$timelaps = $('#timelaps'),
+      _$video = $("#timelapsvid"),
+      _video = document.getElementById('timelapsvid'),
+      _fps = 12,
+      _vid_current_time;
+
   var _timeline, _timeline_container = document.getElementById('timeline'),
       _tl_data_ar = [], _tl_items, _tl_start, _tl_end;
 
+  var _mapout, _mapout_zoom=7, _mapout_pin, _mapout_provider = "CartoDB.DarkMatter";
+  var _mapin, _mapin_zoom=15, _mapin_pin, _mapin_provider = "CartoDB.DarkMatter";
+  var _map_pin_coordinates;
+  var _mapicon = L.icon({
+    iconUrl: 'assets/icon.svg',
+    iconSize: [20, 20],
+    iconAnchor: [10, 10]
+  });
+
   function init(){
     console.log("Init");
 
@@ -30,31 +45,46 @@ $(document).ready(function() {
     _frames = d.frames;
     // console.log(_frames);
 
-    // for (var i in _frames) {
-    //   // console.log(data.frames[i]);
-    //   _tl_data_ar.push({
-    //     start:new Date(_frames[i].datetime),
-    //     id:_frames[i].id
-    //   });
-    // }
-
-    // console.log("_frames[_frames.length]",_frames[_frames.length-1]);
+    for (i in _frames) {
+      // convert gps from string to float array
+      _frames[i].gps = _frames[i].gps.split(',').map(function(a) {
+        return parseFloat(a);
+      });
+    }
 
+    // timeline
     _tl_start= new Date(_frames[0].datetime);
     _tl_end= new Date(_frames[_frames.length-1].datetime);
     // console.log('_tl_start : '+_tl_start+" | _tl_end"+_tl_end);
 
+    // map
+    _map_pin_coordinates = _frames[0].gps;
+    console.log(_map_pin_coordinates);
+
     initDataReady();
   };
 
   function initDataReady(){
     console.log("initDataReady");
     setupTimeline();
+    setupMap();
     setupVideoEvents();
 
     play();
+
+    setTimeout(function(){
+      _video.play();
+    }, 2000);
   }
 
+  /*
+    _   _                _ _
+   | | (_)              | (_)
+   | |_ _ _ __ ___   ___| |_ _ __   ___
+   | __| | '_ ` _ \ / _ \ | | '_ \ / _ \
+   | |_| | | | | | |  __/ | | | | |  __/
+    \__|_|_| |_| |_|\___|_|_|_| |_|\___|
+  */
   function setupTimeline(){
 
     // Create a DataSet (allows two way data-binding)
@@ -65,7 +95,7 @@ $(document).ready(function() {
 
     // Create a Timeline
     _timeline = new vis.Timeline(_timeline_container, [], {
-      height:'50px',
+      // height:'50px',
       showCurrentTime:false,
       start:_tl_start,
       end:_tl_end,
@@ -87,6 +117,56 @@ $(document).ready(function() {
     _timeline.moveTo(date, {animation:false});
   }
 
+  /*
+    __  __
+   |  \/  |
+   | \  / | __ _ _ __
+   | |\/| |/ _` | '_ \
+   | |  | | (_| | |_) |
+   |_|  |_|\__,_| .__/
+                | |
+                |_|
+  */
+  function setupMap(){
+    console.log('setupMap');
+
+    _mapout = L.map('mapout', {
+      center:_map_pin_coordinates,
+      zoom:_mapout_zoom,
+      zoomControl:false,
+      attributionControl:false
+    });
+    L.tileLayer.provider(_mapout_provider).addTo(_mapout);
+    _mapout_pin = L.marker(_map_pin_coordinates, {icon:_mapicon}).addTo(_mapout);
+
+    _mapin = L.map('mapin', {
+      center:_map_pin_coordinates,
+      zoom:_mapin_zoom,
+      zoomControl:false,
+      attributionControl:false
+    });
+    L.tileLayer.provider(_mapin_provider).addTo(_mapin);
+    _mapin_pin = L.marker(_map_pin_coordinates, {icon:_mapicon}).addTo(_mapin);
+  };
+
+  function moveMapPin(c){
+    _mapout.setView(c, _mapout_zoom);
+    _mapout_pin.setLatLng(c);
+    _mapout_pin.update(c);
+    //
+    _mapin.setView(c, _mapin_zoom);
+    _mapin_pin.setLatLng(c);
+    _mapin_pin.update(c);
+  };
+
+  /*
+   __      ___     _
+   \ \    / (_)   | |
+    \ \  / / _  __| | ___  ___
+     \ \/ / | |/ _` |/ _ \/ _ \
+      \  /  | | (_| |  __/ (_) |
+       \/   |_|\__,_|\___|\___/
+  */
   function setupVideoEvents(){
     // console.log("setupVideoEvents");
     _$video.on("click", onClickVid);
@@ -107,12 +187,21 @@ $(document).ready(function() {
   //   _video.currentTime = f/_fps;
   // };
 
+  /*
+                _                 _   _
+               (_)               | | (_)
+     __ _ _ __  _ _ __ ___   __ _| |_ _  ___  _ __
+    / _` | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \
+   | (_| | | | | | | | | | | (_| | |_| | (_) | | | |
+    \__,_|_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|
+  */
   function play(millis){
     requestAnimationFrame(play);
     // console.log("_video.playing",_video.paused);
 
     if (!_video.paused) {
       moveTimelineCursor(_frames[vt2f(_video.currentTime)].datetime);
+      moveMapPin(_frames[vt2f(_video.currentTime)].gps);
     }
     // now = Date.now();
     // delta = now - then;
@@ -122,8 +211,6 @@ $(document).ready(function() {
     // }
   }
 
-
-
   /* helpers */
 
   function vt2f(ct){

+ 23 - 17
www/public_html/scss/styles.scss

@@ -14,6 +14,7 @@ html, body{
 #header{
   position: absolute; z-index: 10;
   top:0; left:0;
+  display: none;
 }
 
 #timelaps{
@@ -31,13 +32,13 @@ html, body{
     // }
 
     @media (min-aspect-ratio: 16/9) {
-      height: 300%;
-      top: -100%;
+      height: 200%;
+      top: -50%;
     }
 
     @media (max-aspect-ratio: 16/9) {
-      width: 300%;
-      left: -100%;
+      width: 200%;
+      left: -50%;
     }
 
 
@@ -45,10 +46,24 @@ html, body{
 
 }
 
+#mapout{
+  position: absolute; z-index: 9;
+  bottom:0; left:0; width:23.5%; margin:1% 0.5% 1% 1%; height:10%;
+  background-color: rgba(255, 255, 255, 0.6);
+  border-radius: 2px;
+}
+
+#mapin{
+  position: absolute; z-index: 9;
+  bottom:0; left:25%; width:23.5%; margin:1% 0.5% 1% 0.5%; height:10%;
+  background-color: rgba(255, 255, 255, 0.6);
+  border-radius: 2px;
+}
+
 #timeline{
   position: absolute; z-index: 9;
-  bottom:0; left:0; width:67%; margin:1% 0 1% 32%; padding:7px;
-  background-color: rgba(0, 0, 0, 0.8);
+  bottom:0; right:0; width:48%; margin:1% 1% 1% 0.5%; padding:0.5%; height:8.3%;
+  background-color: rgba(15, 15, 15, 0.8);
   border-radius: 2px;
 
   .vis-timeline{
@@ -60,19 +75,10 @@ html, body{
     border:none;
   }
   .vis-text{
-    color:white;
+    color:#827f7f;
   }
 
   .vis-custom-time.videotime{
-    background-color: red;
+    background-color: #2781cc;
   }
 }
-
-
-#map{
-  position: absolute; z-index: 9;
-  bottom:0; left:0; width:30%; margin:1%; height:40%;
-  background-color: rgba(255, 255, 255, 0.6);
-  border-radius: 2px;
-  display: none;
-}

Některé soubory nejsou zobrazeny, neboť je v těchto rozdílových datech změněno mnoho souborů