71 lines
1.7 KiB
JavaScript
71 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: "© <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;
|