From 61baac288a096180ebd6d560d56bd5e3522ec896 Mon Sep 17 00:00:00 2001
From: Starbeamrainbowlabs <sbrl@starbeamrainbowlabs.com>
Date: Mon, 18 Mar 2019 20:44:12 +0000
Subject: [PATCH] Start trying to add a time dimension to the heatmap, but it
 doesn't work yet.

---
 client_src/js/MapManager.mjs | 15 ++++++++++++++-
 client_src/js/index.mjs      |  1 +
 package-lock.json            | 11 ++++++++---
 package.json                 |  1 +
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/client_src/js/MapManager.mjs b/client_src/js/MapManager.mjs
index 6ae6e45..580bb53 100644
--- a/client_src/js/MapManager.mjs
+++ b/client_src/js/MapManager.mjs
@@ -3,6 +3,8 @@
 // Import leaflet, but some plugins require it to have the variable name 'L' :-/
 import L from 'leaflet';
 import 'leaflet-fullscreen';
+import 'iso8601-js-period';
+import '../../node_modules/leaflet-timedimension/dist/leaflet.timedimension.src.withlog.js';
 
 import Config from './Config.mjs';
 import LayerDeviceMarkers from './LayerDeviceMarkers.mjs';
@@ -17,7 +19,12 @@ class MapManager {
 	setup() {
 		// Create the map
 		this.map = L.map("map", {
-			fullscreenControl: true
+			fullscreenControl: true,
+			timeDimension: true,
+			timeDimensionOptions: {
+				timeInterval: `2019-01-01/${(new Date()).toISOString().split("T")[0]}`,
+				period: "PT6M" // 6 minutes, in ISO 8601 Durations format: https://en.wikipedia.org/wiki/ISO_8601#Durations
+			}
 		});
 		this.map.setView(Config.default_location, Config.default_zoom);
 		
@@ -28,9 +35,15 @@ class MapManager {
 			attribution: "&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap contributors</a>"
 		}).addTo(this.map);
 		
+		// Add the attribution
 		this.map.attributionControl.addAttribution("Data: <a href='https://connectedhumber.org/'>Connected Humber</a>");
 		this.map.attributionControl.addAttribution("<a href='https://github.com/ConnectedHumber/Air-Quality-Web/'>Air Quality Web</a> by <a href='https://starbeamrainbowlabs.com/'>Starbeamrainbowlabs</a>");
 		
+		// Add the time dimension
+		this.layer_time = L.timeDimension()
+			.addTo(this.map);
+		this.layer_time.on("timeloading", console.log);
+		
 		// Add the device markers
 		console.info("[map] Loading device markers....");
 		this.setup_device_markers().then(() => {
diff --git a/client_src/js/index.mjs b/client_src/js/index.mjs
index 0019d57..d097ed4 100644
--- a/client_src/js/index.mjs
+++ b/client_src/js/index.mjs
@@ -1,6 +1,7 @@
 "use strict";
 
 import '../css/main.css';
+import '../../node_modules/leaflet-timedimension/dist/leaflet.timedimension.control.css';
 
 // ----------------------------------------------------------------------------
 
diff --git a/package-lock.json b/package-lock.json
index e2d0235..905da70 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1641,9 +1641,9 @@
       "dev": true
     },
     "iso8601-js-period": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/iso8601-js-period/-/iso8601-js-period-0.2.0.tgz",
-      "integrity": "sha1-5XQP1OcguWCoXraF/CBSAWIcAYw="
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/iso8601-js-period/-/iso8601-js-period-0.2.1.tgz",
+      "integrity": "sha512-iDyz2TQFBd5WhCZjruOwHj01JkQGu7YbVLCVdpA7lCGEcBzE3ffCPAhLh/M8TAp//kCixPpYN4XU54WHCxvD2Q=="
     },
     "isobject": {
       "version": "3.0.1",
@@ -1745,6 +1745,11 @@
         "leaflet": "~0.7.4 || ~1.0.0"
       },
       "dependencies": {
+        "iso8601-js-period": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/iso8601-js-period/-/iso8601-js-period-0.2.0.tgz",
+          "integrity": "sha1-5XQP1OcguWCoXraF/CBSAWIcAYw="
+        },
         "leaflet": {
           "version": "1.0.3",
           "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.0.3.tgz",
diff --git a/package.json b/package.json
index ae17b28..272f4de 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
 	"dependencies": {
 		"chart.js": "^2.7.3",
 		"dom-create-element-query-selector": "github:hekigan/dom-create-element-query-selector",
+		"iso8601-js-period": "^0.2.1",
 		"leaflet": "^1.4.0",
 		"leaflet-fullscreen": "^1.0.2",
 		"leaflet-timedimension": "^1.1.0",