Air-Quality-Web/client_src/js/Map.mjs

84 lines
2.1 KiB
JavaScript
Raw Normal View History

"use strict";
2019-01-17 14:07:31 +00:00
// Import leaflet, but some plugins require it to have the variable name 'L' :-/
import L from 'leaflet';
import 'leaflet-fullscreen';
import GetFromUrl from './Helpers/GetFromUrl.mjs';
import Config from './Config.mjs';
import LayerDeviceMarkers from './LayerDeviceMarkers.mjs';
import LayerHeatmap from './LayerHeatmap.mjs';
2019-01-18 21:25:30 +00:00
import UI from './UI.mjs';
class Map {
constructor() {
2019-01-18 21:25:30 +00:00
}
setup() {
// Create the map
2019-01-17 14:07:31 +00:00
this.map = L.map("map", {
fullscreenControl: true
});
this.map.setView(Config.default_location, Config.default_zoom);
// Add the OpenStreetMap tile layer
2019-01-17 14:07:31 +00:00
this.layer_openstreet = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
id: "openstreetmap",
maxZoom: 19,
2019-01-17 13:58:56 +00:00
attribution: "&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap contributors</a>"
}).addTo(this.map);
// Add the device markers
console.info("[map] Loading device markers....");
this.setup_device_markers().then(() => {
console.info("[map] Device markers loaded successfully.");
// Display a layer controller
this.setup_layer_control();
});
// Add the heatmap
console.info("[map] Loading heatmap....");
this.setup_heatmap().then(() => {
console.info("[map] Heatmap loaded successfully.");
});
2019-01-18 21:25:30 +00:00
this.ui = new UI(this);
}
async setup_device_markers() {
this.device_markers = new LayerDeviceMarkers(this.map);
await this.device_markers.setup();
}
async setup_heatmap() {
this.heatmap = new LayerHeatmap(this.map);
// TODO: Use leaflet-timedimension here
// TODO: Allow configuration of the different reading types here
this.heatmap.set_data(JSON.parse(await GetFromUrl(
`${Config.api_root}?action=fetch-data&datetime=2019-01-03 07:52:10&reading_type=PM10`
)));
}
setup_layer_control() {
this.layer_control = L.control.layers({
// Base layer(s)
"OpenStreetMap": this.layer_openstreet
}, { // Overlay(s)
"Devices": this.device_markers.layer,
// TODO: Have 1 heatmap layer per reading type?
"Heatmap": this.heatmap.layer
}, { // Options
2019-01-17 16:39:47 +00:00
});
this.layer_control.addTo(this.map);
}
}
export default Map;