From 0bd1a10753b4c02dcfe99c9424b04db42698c03e Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Thu, 15 Jan 2026 20:39:20 +0000
Subject: [PATCH] Fix click interface on aggregate map going to cell detail

---
 htmlpage/static/js/map-aggregate.js | 33 +++++++++++------------------
 sync/template/dashboard.html        |  9 ++++++++
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/htmlpage/static/js/map-aggregate.js b/htmlpage/static/js/map-aggregate.js
index 3a8d1090..6c912eb0 100644
--- a/htmlpage/static/js/map-aggregate.js
+++ b/htmlpage/static/js/map-aggregate.js
@@ -78,7 +78,7 @@ class MapAggregate extends HTMLElement {
 			style: 'mapbox://styles/mapbox/streets-v12', // style URL
 			zoom: zoom,
 		});
-		map.on("load", function() {
+		map.on("load", () => {
 			map.addSource('tegola', {
 				'type': 'vector',
 				'tiles': [
@@ -132,31 +132,22 @@ class MapAggregate extends HTMLElement {
 					'fill-color': '#0dcaf0'
 				}
 			});
-			map.addInteraction("nidus-click-interaction", {
-				type: 'click',
-				target: { layerId: 'nidus' },
+			var self = this;
+			map.addInteraction("tegola-click-interaction", {
+				type: "click",
+				target: { layerId: "mosquito_source" },
 				handler: (e) => {
 					const coordinates = e.feature.geometry.coordinates.slice();
 					const properties = e.feature.properties;
-					//console.log("Coordinates", coordinates[0]);
-					//console.log("Properties", properties.cell, properties.count_);
-					/*new mapboxgl.Popup()
-						.setLngLat(coordinates[0][0])
-						.setHTML("Cell: " + properties.cell)
-						.addTo(map);*/
-					window.location.href = '/cell/' + properties.cell;
+					self.dispatchEvent(new CustomEvent("cell-click", {
+						bubbles: true,
+						composed: true, // Allows event to cross shadow DOM boundary
+						detail: {
+							cell: properties.cell
+						}
+					}));
 				}
 			});
-
-			/*
-			this.dispatchEvent(new CustomEvent('load') {
-				bubbles: true,
-				composed: true, // Allows event to cross shadow DOM boundary
-				detail: {
-					map: this
-				}
-			});
-			*/
 		});
 	}
 
diff --git a/sync/template/dashboard.html b/sync/template/dashboard.html
index 07c66165..370ae135 100644
--- a/sync/template/dashboard.html
+++ b/sync/template/dashboard.html
@@ -57,6 +57,15 @@ body {
 	animation: fa-spin 2s linear infinite;
 }
 </style>
+<script>
+function onLoad() {
+	const map = document.querySelector("map-aggregate");
+	map.addEventListener("cell-click", (event) => {
+		window.location.href = '/cell/' + event.detail.cell;
+	});
+}
+window.addEventListener("load", onLoad);
+</script>
 {{end}}
 {{define "content"}}
 <div class="container dashboard-container">