sbrl-github/Air-Quality-Web
1
0
Fork 0
mirror of https://github.com/ConnectedHumber/Air-Quality-Web synced 2024-11-22 06:23:01 +00:00
Code Issues Releases Wiki Activity

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

Browse source
This commit is contained in:
Starbeamrainbowlabs 2019-03-18 20:44:12 +00:00
parent a3647fa716
commit 61baac288a
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
4 changed files with 24 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
client_src/js/MapManager.mjs
View file

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

1
client_src/js/index.mjs
View file

@ -1,6 +1,7 @@
"use strict";
import '../css/main.css';
import '../../node_modules/leaflet-timedimension/dist/leaflet.timedimension.control.css';
// ----------------------------------------------------------------------------

11
package-lock.json generated
View file

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

1
package.json
View file

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