From 3501c38debe0504796b2e24d302a46987f7d28b6 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Thu, 5 Mar 2026 16:04:58 +0000
Subject: [PATCH] Move the map to fit the pools on selection

---
 html/static/js/map-multipoint.js          |  9 +++++--
 html/template/sync/intelligence-root.html | 31 +++++++++++++++++++++++
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/html/static/js/map-multipoint.js b/html/static/js/map-multipoint.js
index b75c0632..f7a25d3b 100644
--- a/html/static/js/map-multipoint.js
+++ b/html/static/js/map-multipoint.js
@@ -45,9 +45,11 @@ class MapMultipoint extends HTMLElement {
 			center: centroid.coordinates,
 			container: mapElement,
 			style: "https://tiles.stadiamaps.com/styles/osm_bright.json",
-		}).fitBounds(bounds, {
-			padding: { top: 10, bottom: 10, left: 10, right: 10 },
 		});
+		let camera_transform = this._map.cameraForBounds(bounds, {
+			padding: 10,
+		});
+		this._map.setZoom(camera_transform.zoom);
 		this._map.on("load", () => {
 			if (organization_id != 0) {
 				this._map.addSource("tegola", {
@@ -110,6 +112,9 @@ class MapMultipoint extends HTMLElement {
 		return this._map.queryRenderedFeatures(a);
 	}
 
+	FitBounds(bounds, options) {
+		return this._map.fitBounds(bounds, options);
+	}
 	SetLayoutProperty(layout, property, value) {
 		return this._map.setLayoutProperty(layout, property, value);
 	}
diff --git a/html/template/sync/intelligence-root.html b/html/template/sync/intelligence-root.html
index 1fd06ae3..879e7bb6 100644
--- a/html/template/sync/intelligence-root.html
+++ b/html/template/sync/intelligence-root.html
@@ -13,6 +13,33 @@
 	></script>
 
 	<script>
+		// Return two points defining a bounding box for the given points
+		function getBoundingBox(points) {
+			// Handle empty or invalid input
+			if (!points || points.length === 0) {
+				return null;
+			}
+
+			// Initialize with the first point's coordinates
+			let minLat = points[0].latitude;
+			let maxLat = points[0].latitude;
+			let minLng = points[0].longitude;
+			let maxLng = points[0].longitude;
+
+			// Find the min and max for latitude and longitude
+			for (const point of points) {
+				if (point.latitude < minLat) minLat = point.latitude;
+				if (point.latitude > maxLat) maxLat = point.latitude;
+				if (point.longitude < minLng) minLng = point.longitude;
+				if (point.longitude > maxLng) maxLng = point.longitude;
+			}
+
+			// Return southwest and northeast corners
+			return new maplibregl.LngLatBounds(
+				new maplibregl.LngLat(minLng, minLat),
+				new maplibregl.LngLat(maxLng, maxLat),
+			);
+		}
 		function shortAddress(a) {
 			return a.number + " " + a.street + ", " + a.locality + ", " + a.region;
 		}
@@ -20,6 +47,10 @@
 			const map = document.querySelector("map-multipoint");
 			const markers = signals.map((s) => s.location);
 			map.SetMarkers(markers);
+			bounds = getBoundingBox(markers);
+			map.FitBounds(bounds, {
+				padding: 50,
+			});
 		}
 		function workbench() {
 			return {