Parcourir la source

added maps (leaflet)

Bachir Soussi Chiadmi il y a 9 ans
Parent
commit
8adb390d91

+ 66 - 0
www/public_html/assets/icon.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="20"
+   height="20"
+   viewBox="0 0 20 20"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="icon.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="31.678384"
+     inkscape:cx="13.788541"
+     inkscape:cy="11.524203"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1025"
+     inkscape:window-x="0"
+     inkscape:window-y="28"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1032.3622)">
+    <circle
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#2781cc;stroke-width:4.23042965;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       id="path4136"
+       cx="9.9910393"
+       cy="1042.3712"
+       r="7.7813315"
+       mask="none"
+       clip-path="none" />
+  </g>
+</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;
+}));

+ 9 - 0
www/public_html/bower_components/leaflet-providers/license.md

@@ -0,0 +1,9 @@
+Copyright (c) 2013 Leaflet Providers contributors
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+_THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE._

+ 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"
+    ]
+  }
+}

+ 1 - 1
www/public_html/css/dist/styles.min.css

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

+ 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>

+ 4 - 3
www/public_html/js/dist/script.min.js

@@ -1,7 +1,8 @@
 
-$(document).ready(function(){var _frames,_frames_length;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;function init(){console.log("Init");loadData();};function loadData(){console.log('loadData');$.ajax({dataType:"json",url:'metadata/frames.json',cache:false,success:setUpData});console.log('getMetaData END');};function setUpData(d){console.log("setUpData");_frames=d.frames;_tl_start=new Date(_frames[0].datetime);_tl_end=new Date(_frames[_frames.length-1].datetime);initDataReady();};function initDataReady(){console.log("initDataReady");setupTimeline();setupVideoEvents();play();}
-function setupTimeline(){_timeline=new vis.Timeline(_timeline_container,[],{height:'50px',showCurrentTime:false,start:_tl_start,end:_tl_end,stack:false});_timeline.addCustomTime(_tl_start,"videotime");_timeline.on('click',onClickTimeline)}
+$(document).ready(function(){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");loadData();};function loadData(){console.log('loadData');$.ajax({dataType:"json",url:'metadata/frames.json',cache:false,success:setUpData});console.log('getMetaData END');};function setUpData(d){console.log("setUpData");_frames=d.frames;for(i in _frames){_frames[i].gps=_frames[i].gps.split(',').map(function(a){return parseFloat(a);});}
+_tl_start=new Date(_frames[0].datetime);_tl_end=new Date(_frames[_frames.length-1].datetime);_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(){_timeline=new vis.Timeline(_timeline_container,[],{showCurrentTime:false,start:_tl_start,end:_tl_end,stack:false});_timeline.addCustomTime(_tl_start,"videotime");_timeline.on('click',onClickTimeline)}
 function onClickTimeline(props){console.log("onClickTimeline",props.time);};function moveTimelineCursor(date){_timeline.setCustomTime(date,"videotime",{animation:false});_timeline.moveTo(date,{animation:false});}
-function setupVideoEvents(){_$video.on("click",onClickVid);};function onClickVid(e){console.log("onClickVid",e);if(_video.paused){_video.play();}else{_video.pause();}};function play(millis){requestAnimationFrame(play);if(!_video.paused){moveTimelineCursor(_frames[vt2f(_video.currentTime)].datetime);}}
+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(){_$video.on("click",onClickVid);};function onClickVid(e){console.log("onClickVid",e);if(_video.paused){_video.play();}else{_video.pause();}};function play(millis){requestAnimationFrame(play);if(!_video.paused){moveTimelineCursor(_frames[vt2f(_video.currentTime)].datetime);moveMapPin(_frames[vt2f(_video.currentTime)].gps);}}
 function vt2f(ct){return Math.round(ct/(1/_fps));}
 init();});

+ 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;
-}