LoRaWAN-Signal-Mapping/client_src/js/MapManager.mjs
Starbeamrainbowlabs 4282ae4470 [web interface] Add guage to the side
This is ported over from the air quality web interface.

Proof I wrote this is, of course, available upon request.
2019-08-07 16:58:06 +01:00

70 lines
1.7 KiB
JavaScript

"use strict";
import Config from './ClientConfig.mjs';
import L from 'leaflet';
import LayerGateways from './LayerGateways.mjs';
import LayerAI from './LayerAI.mjs';
import Guage from './Guage.mjs';
class MapManager {
constructor() {
}
async setup() {
document.querySelector("main").classList.add("working", "working-visual");
this.map = L.map("map", {
fullscreenControl: true
});
this.map.setView(Config.default_location, Config.default_zoom);
// Add the OpenStreetMap tile layer
this.layer_openstreet = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
id: "openstreetmap",
maxZoom: 19,
attribution: "&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap contributors</a>"
}).addTo(this.map);
// Add the gateway markers layer
this.layer_gateways = new LayerGateways(this.map);
await this.layer_gateways.setup();
this.setup_guage();
// Add the AI coverage prediction layer
this.layer_ai = new LayerAI(this.map);
await this.layer_ai.setup();
this.setup_layer_control();
document.querySelector("main").classList.remove("working", "working-visual");
}
setup_layer_control() {
this.layer_control = L.control.layers({
// Base layer(s)
"OpenStreetMap": this.layer_openstreet
}, { // Overlay(s)
"Gateways": this.layer_gateways.layer,
// FUTURE: Have 1 heatmap layer per reading type?
"Heatmap": this.layer_ai.layer
}, { // Options
});
this.layer_control.addTo(this.map);
}
setup_guage() {
this.guage = new Guage(document.getElementById("canvas-guage"));
this.guage.set_spec({
gradient: Config.colour_scale,
max: -30
});
this.guage.render();
}
}
export default MapManager;