Fix click interface on aggregate map going to cell detail

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
-				}
-			});
-			*/
 		});
 	}
 

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">