Start trying to add a time dimension to the heatmap, but it doesn't work yet.

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(() => {

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';
 
 // ----------------------------------------------------------------------------
 

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",

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",