Show markers on the map

html/static/js/map-multipoint.js

@@ -12,7 +12,7 @@ class MapMultipoint extends HTMLElement {
 		this.render();
 
 		this._map = null;
-		this._markers = null;
+		this._markers = [];
 	}
 
 	// Lifecycle: when element is added to the DOM
@@ -80,9 +80,10 @@ class MapMultipoint extends HTMLElement {
 	render() {
 		this.shadowRoot.innerHTML = `
 			<style>
+				@import url("//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.css");
 				#map {
 					height: 100%;
-					width:100%;
+					width: 100%;
 				}
 			</style>
 			
@@ -112,6 +113,18 @@ class MapMultipoint extends HTMLElement {
 	SetLayoutProperty(layout, property, value) {
 		return this._map.setLayoutProperty(layout, property, value);
 	}
+	SetMarkers(markers) {
+		console.log("Setting map markers", markers);
+		this._markers.forEach((marker) => marker.remove());
+		this._markers = markers.map((m) => {
+			return new maplibregl.Marker({
+				color: "#FF0000",
+				draggable: false,
+			})
+				.setLngLat([m.longitude, m.latitude])
+				.addTo(this._map);
+		});
+	}
 }
 
 customElements.define("map-multipoint", MapMultipoint);

html/template/sync/intelligence-root.html

@@ -16,6 +16,11 @@
 		function shortAddress(a) {
 			return a.number + " " + a.street + ", " + a.locality + ", " + a.region;
 		}
+		function updateMap(signals) {
+			const map = document.querySelector("map-multipoint");
+			const markers = signals.map((s) => s.location);
+			map.SetMarkers(markers);
+		}
 		function workbench() {
 			return {
 				// API Configuration
@@ -123,18 +128,6 @@
 					return this.selectedSignals.some((s) => s.id === id);
 				},
 
-				toggleSignal(signal) {
-					const index = this.selectedSignals.findIndex(
-						(s) => s.id === signal.id,
-					);
-
-					if (index > -1) {
-						this.selectedSignals.splice(index, 1);
-					} else {
-						this.selectedSignals.push(signal);
-					}
-				},
-
 				clearSelection() {
 					this.selectedSignals = [];
 				},
@@ -220,6 +213,18 @@
 						alert(`Failed to mark signals: ${err.message}`);
 					}
 				},
+				toggleSignal(signal) {
+					const index = this.selectedSignals.findIndex(
+						(s) => s.id === signal.id,
+					);
+
+					if (index > -1) {
+						this.selectedSignals.splice(index, 1);
+					} else {
+						this.selectedSignals.push(signal);
+					}
+					updateMap(this.selectedSignals);
+				},
 			};
 		}
 	</script>