Add gateway marker layer to display gateway locations

client_src/js/LayerGateways.mjs

@@ -0,0 +1,37 @@
+"use strict";
+
+import L from 'leaflet';
+
+import Config from './ClientConfig.mjs';
+import GetFromUrl from './Helpers/GetFromUrl.mjs';
+
+class LayerGateways {
+	constructor(map) {
+		this.map = map;
+		this.layer = L.layerGroup();
+	}
+	
+	async setup() {
+		// TODO: Cache this in MapManager?
+		let gateways = JSON.parse(
+			await GetFromUrl(Config.ai_index_file)
+		);
+		
+		// Generate markers for each of the gateways
+		for(let gateway of gateways.index) {
+			this.layer.addLayer(L.marker(
+				L.latLng(gateway.latitude, gateway.longitude),
+				{
+					title: gateway.id,
+					autoPan: true,
+					autoPanPadding: L.point(100, 100)
+				}
+			));
+		}
+		
+		// Add the layer to the map
+		this.map.addLayer(this.layer);
+	}
+}
+
+export default LayerGateways;

client_src/js/MapManager.mjs

@@ -4,6 +4,7 @@ import Config from './ClientConfig.mjs';
 
 import L from 'leaflet';
 
+import LayerGateways from './LayerGateways.mjs';
 import LayerAI from './LayerAI.mjs';
 
 class MapManager {
@@ -24,8 +25,29 @@ class MapManager {
 			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();
+		
+		// Add the AI coverage prediction layer
 		this.layer_ai = new LayerAI(this.map);
 		await this.layer_ai.setup();
+		
+		this.setup_layer_control();
+	}
+	
+	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);
 	}
 }