From cd763efb1540dfde54106a640b9c19ea144b89d2 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Tue, 10 Mar 2026 04:20:55 +0000
Subject: [PATCH] Require passing actual markers into SetMarkers

And frame locations of images and the report when a report is selected
---
 html/static/js/map-multipoint.js           | 12 +++-----
 html/template/sync/communication-root.html | 36 ++++++++++++++++------
 html/template/sync/planning-root.html      |  7 ++++-
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/html/static/js/map-multipoint.js b/html/static/js/map-multipoint.js
index 713d830c..0c9a5308 100644
--- a/html/static/js/map-multipoint.js
+++ b/html/static/js/map-multipoint.js
@@ -126,14 +126,10 @@ class MapMultipoint extends HTMLElement {
 	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);
-		});
+		this._markers = markers;
+		for (let m of markers) {
+			m.addTo(this._map);
+		}
 	}
 }
 
diff --git a/html/template/sync/communication-root.html b/html/template/sync/communication-root.html
index 895be03e..912013db 100644
--- a/html/template/sync/communication-root.html
+++ b/html/template/sync/communication-root.html
@@ -267,16 +267,34 @@
 				},
 				updateMap() {
 					const map = document.querySelector("map-multipoint");
-					const p = {
-						latitude:
-							this.selectedCommunication.public_report.location.latitude,
-						longitude:
-							this.selectedCommunication.public_report.location.longitude,
-					};
-					map.SetMarkers([p]);
+					const loc = this.selectedCommunication.public_report.location;
+					let markers = [
+						new maplibregl.Marker({
+							color: "#FF0000",
+							draggable: false,
+						}).setLngLat([loc.longitude, loc.latitude]),
+					];
+					let min = { lat: loc.latitude, lng: loc.longitude };
+					let max = { lat: loc.latitude, lng: loc.longitude };
+					for (const i of this.selectedCommunication.public_report.images) {
+						if (i.location.latitude != 0 && i.location.longitude != 0) {
+							markers.push(
+								new maplibregl.Marker({
+									color: "#00FF00",
+									draggable: false,
+								}).setLngLat([i.location.longitude, i.location.latitude]),
+							);
+							min.lat = Math.min(min.lat, i.location.latitude);
+							min.lng = Math.min(min.lng, i.location.longitude);
+							max.lat = Math.max(max.lat, i.location.latitude);
+							max.lng = Math.max(max.lng, i.location.longitude);
+						}
+					}
+					map.SetMarkers(markers);
+
 					const bounds = new maplibregl.LngLatBounds(
-						new maplibregl.LngLat(p.longitude - 0.01, p.latitude - 0.01),
-						new maplibregl.LngLat(p.longitude + 0.01, p.latitude + 0.01),
+						new maplibregl.LngLat(min.lng - 0.01, min.lat - 0.01),
+						new maplibregl.LngLat(max.lng + 0.01, max.lat + 0.01),
 					);
 
 					map.FitBounds(bounds, {
diff --git a/html/template/sync/planning-root.html b/html/template/sync/planning-root.html
index 3393d4a3..8f71260e 100644
--- a/html/template/sync/planning-root.html
+++ b/html/template/sync/planning-root.html
@@ -48,7 +48,12 @@
 		}
 		function updateMap(signals) {
 			const map = document.querySelector("map-multipoint");
-			const markers = signals.map((s) => s.location);
+			const markers = signals.map((s) =>
+				new maplibregl.Marker({
+					color: "#FF0000",
+					draggable: false,
+				}).setLatLng([s.location.longitude, s.location.latitude]),
+			);
 			map.SetMarkers(markers);
 			bounds = getBoundingBox(markers);
 			map.FitBounds(bounds, {