From eb24d871d052061777cd4e4d0e7c424b5cc319b7 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Fri, 9 Jan 2026 23:52:35 +0000
Subject: [PATCH] Bastardize mapbox example to query points

This is just to get the structure of what I need to integrate with
Mapbox to query a tile server and try to find point locations. In this
case, I'm getting the airport locations and barely showing them. This
saves me time understanding the pertinent APIs.

I need to adapt this to get our mosquito reports instead.
---
 public-report/template/search.html | 123 ++++++++++++++++++++++++++++-
 1 file changed, 121 insertions(+), 2 deletions(-)

diff --git a/public-report/template/search.html b/public-report/template/search.html
index 60ee08b9..e674567d 100644
--- a/public-report/template/search.html
+++ b/public-report/template/search.html
@@ -51,8 +51,121 @@
 <script>
 const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
 var markers = [];
+// Because features come from tiled vector data,
+// feature geometries may be split
+// or duplicated across tile boundaries.
+// As a result, features may appear
+// multiple times in query results.
+function getUniqueFeatures(features, comparatorProperty) {
+	const uniqueIds = new Set();
+	const uniqueFeatures = [];
+	for (const feature of features) {
+		const id = feature.properties[comparatorProperty];
+		if (!uniqueIds.has(id)) {
+		uniqueIds.add(id);
+		uniqueFeatures.push(feature);
+		}
+	}
+	return uniqueFeatures;
+}
+function renderListings(features) {
+	console.log("render listings", features);
+	
+	const filterEl = document.getElementById('feature-filter');
+	const listingEl = document.getElementById('feature-listing');
+	const empty = document.createElement('p');
+        // Clear any existing listings
+        listingEl.innerHTML = '';
+        if (features.length) {
+            for (const feature of features) {
+                const itemLink = document.createElement('a');
+                const label = `${feature.properties.name} (${feature.properties.abbrev})`;
+                itemLink.href = feature.properties.wikipedia;
+                itemLink.target = '_blank';
+                itemLink.textContent = label;
+                itemLink.addEventListener('mouseover', () => {
+                    // Highlight corresponding feature on the map
+                    popup
+                        .setLngLat(feature.geometry.coordinates)
+                        .setText(label)
+                        .addTo(map);
+                });
+                listingEl.appendChild(itemLink);
+            }
+
+            // Show the filter input
+            filterEl.parentNode.style.display = 'block';
+        } else if (features.length === 0 && filterEl.value !== '') {
+            empty.textContent = 'No results found';
+            listingEl.appendChild(empty);
+        } else {
+            empty.textContent = 'Drag the map to populate results';
+            listingEl.appendChild(empty);
+
+            // Hide the filter input
+            filterEl.parentNode.style.display = 'none';
+
+            // remove features filter
+            map.setFilter('airport', ['has', 'abbrev']);
+        }
+}
 document.addEventListener('DOMContentLoaded', function() {
-	mapLoad(MAPBOX_ACCESS_TOKEN).then(() => {
+	const filterEl = document.getElementById('feature-filter');
+	const listingEl = document.getElementById('feature-listing');
+	mapLoad(MAPBOX_ACCESS_TOKEN).then((map) => {
+		map.addSource('airports', {
+			'type': 'vector',
+			'url': 'mapbox://mapbox.04w69w5j',
+		});
+	        map.addLayer({
+			'id': 'airport',
+			'source': 'airports',
+			'source-layer': 'ne_10m_airports',
+			'type': 'circle',
+			'paint': {
+				'circle-color': '#4264fb',
+				'circle-radius': 4,
+				'circle-stroke-width': 2,
+				'circle-stroke-color': '#ffffff'
+			}
+		});
+	        map.on('movestart', () => {
+			// reset features filter as the map starts moving
+			map.setFilter('airport', ['has', 'abbrev']);
+		});
+	        map.on('moveend', () => {
+			const features = map.queryRenderedFeatures({ layers: ['airport'] });
+
+			if (features) {
+				const uniqueFeatures = getUniqueFeatures(features, 'iata_code');
+				// Populate features for the listing overlay.
+				renderListings(uniqueFeatures);
+
+				// Clear the input container
+				filterEl.value = '';
+
+				// Store the current features in sn `airports` variable to
+				// later use for filtering on `keyup`.
+				airports = uniqueFeatures;
+			}
+		});
+		map.on('mousemove', 'airport', (e) => {
+			// Change the cursor style as a UI indicator.
+			map.getCanvas().style.cursor = 'pointer';
+
+			// Populate the popup and set its coordinates based on the feature.
+			const feature = e.features[0];
+			popup
+			.setLngLat(feature.geometry.coordinates)
+			.setText(
+				`${feature.properties.name} (${feature.properties.abbrev})`
+			)
+			.addTo(map);
+		});
+	        map.on('mouseleave', 'airport', () => {
+			map.getCanvas().style.cursor = '';
+			popup.remove();
+		});
 		getGeolocation({
 			enableHighAccuracy: true,
 			timeout: 10000,
@@ -63,7 +176,7 @@ document.addEventListener('DOMContentLoaded', function() {
 					lng: position.coords.longitude,
 					lat: position.coords.latitude,
 				},
-				zoom: 13,
+				zoom: 8,
 			});
 		}).catch(error => {
 			console.error("Failed to get position", error);
@@ -116,6 +229,12 @@ document.addEventListener('DOMContentLoaded', function() {
 			<div class="map-container" id="map-container">
 				<div id="map"></div>
 			</div>
+			<div class="map-overlay">
+				<fieldset>
+					<input id="feature-filter" type="text" placeholder="Filter results by name">
+				</fieldset>
+				<div id="feature-listing" class="listing"></div>
+			</div>
 		</div>
 	</div>