Switch to Stadia geocoding.

Author: njhenry

.github/workflows/deploy-site.yml

@@ -40,6 +40,8 @@ jobs:
       - name: Build
         run: npm run build
         working-directory: site
+        env:
+          VITE_STADIA_API_KEY: ${{ secrets.VITE_STADIA_API_KEY }}
 
       - uses: actions/upload-pages-artifact@v3
         with:

.gitignore

@@ -120,6 +120,7 @@ venv.bak/
 # Site build output
 site/dist
 site/node_modules
+site/.env
 
 # mypy
 .mypy_cache/

site/src/assets/styles.css

@@ -175,12 +175,24 @@ body,
 
 .confidence-legend .legend-ticks {
   display: flex;
-  justify-content: space-between;
   font-size: 10px;
   color: #777;
   margin-top: 2px;
 }
 
+.confidence-legend .legend-ticks span {
+  flex: 1;
+  text-align: center;
+}
+
+.confidence-legend .legend-ticks span:first-child {
+  text-align: left;
+}
+
+.confidence-legend .legend-ticks span:last-child {
+  text-align: right;
+}
+
 /* Geolocation button */
 .geolocation-btn {
   position: absolute;
@@ -414,6 +426,29 @@ body,
   }
 }
 
+/* Geocode marker (X) */
+.geocode-marker {
+  width: 20px;
+  height: 20px;
+  position: relative;
+  pointer-events: none;
+}
+
+.geocode-marker::before,
+.geocode-marker::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: 2.5px;
+  height: 100%;
+  background: #444;
+  margin-left: -1.25px;
+}
+
+.geocode-marker::before { transform: rotate(45deg); }
+.geocode-marker::after { transform: rotate(-45deg); }
+
 /* Geolocation dot */
 .geolocation-dot {
   width: 16px;

site/src/components/MapContainer.vue

@@ -2,7 +2,7 @@
   <div class="map-container">
     <div ref="mapEl" style="width: 100%; height: 100%"></div>
 
-    <div v-if="loading" class="loading-indicator">
+    <div v-show="loading" class="loading-indicator">
       <div class="spinner"></div>
       Loading POIs...
     </div>
@@ -103,6 +103,7 @@ const { locate } = useGeolocation()
 const debouncer = createQueryDebouncer(300)
 
 let geoOverlay = null
+let geocodeMarker = null
 
 // Helper: get all data layers
 function getDataLayers() {
@@ -381,6 +382,21 @@ function flyToBbox(bbox) {
     maxZoom: 17,
     padding: [50, 50, 50, 50],
   })
+
+  if (bbox.lng != null && bbox.lat != null) {
+    const coord = fromLonLat([bbox.lng, bbox.lat])
+    if (!geocodeMarker) {
+      const el = document.createElement('div')
+      el.className = 'geocode-marker'
+      geocodeMarker = new Overlay({
+        element: el,
+        positioning: 'center-center',
+        stopEvent: false,
+      })
+      map.value.addOverlay(geocodeMarker)
+    }
+    geocodeMarker.setPosition(coord)
+  }
 }
 
 defineExpose({ flyToBbox })

site/src/components/SearchBar.vue

@@ -10,10 +10,10 @@
     <ul v-if="results.length" class="search-results">
       <li
         v-for="r in results"
-        :key="r.place_id"
+        :key="r.properties.id"
         @click="selectResult(r)"
       >
-        {{ r.display_name }}
+        {{ r.properties.label }}
       </li>
     </ul>
   </div>
@@ -32,10 +32,21 @@ function onInput() {
 }
 
 function selectResult(r) {
-  // Nominatim returns boundingbox as [south, north, west, east]
-  const [south, north, west, east] = r.boundingbox.map(Number)
-  emit('fly-to', { south, north, west, east })
-  query.value = r.display_name
+  // Stadia/Pelias GeoJSON bbox: [west, south, east, north]
+  // Fall back to a small box around the point if bbox is absent.
+  const [lng, lat] = r.geometry.coordinates
+  let west, south, east, north
+  if (r.bbox) {
+    ;[west, south, east, north] = r.bbox
+  } else {
+    const delta = 0.01
+    west = lng - delta
+    east = lng + delta
+    south = lat - delta
+    north = lat + delta
+  }
+  emit('fly-to', { west, south, east, north, lng, lat })
+  query.value = r.properties.label
   clearResults()
 }
 

site/src/composables/useDuckDB.js

@@ -22,7 +22,7 @@ async function _init() {
     const wasmUrl = `${baseUrl}duckdb-eh.wasm`
 
     const worker = new Worker(workerUrl)
-    const logger = new duckdb.ConsoleLogger()
+    const logger = new duckdb.VoidLogger()
     const instance = new duckdb.AsyncDuckDB(logger, worker)
     await instance.instantiate(wasmUrl)
 

site/src/composables/useGeocoder.js

@@ -1,5 +1,5 @@
 import { ref } from 'vue'
-import { NOMINATIM_URL } from '../constants.js'
+import { STADIA_GEOCODING_URL } from '../constants.js'
 
 const results = ref([])
 const loading = ref(false)
@@ -17,28 +17,22 @@ async function search(query) {
       loading.value = true
       try {
         const params = new URLSearchParams({
-          format: 'json',
-          q: query,
-          countrycodes: 'us',
-          limit: '5',
+          api_key: import.meta.env.VITE_STADIA_API_KEY,
+          text: query,
+          'boundary.country': 'US',
+          size: '5',
         })
-        const resp = await fetch(
-          `${NOMINATIM_URL}?${params}`,
-          {
-            headers: {
-              'User-Agent': 'openpois-viewer/1.0',
-            },
-          }
-        )
-        results.value = await resp.json()
+        const resp = await fetch(`${STADIA_GEOCODING_URL}?${params}`)
+        const data = await resp.json()
+        results.value = data.features ?? []
       } catch (err) {
         console.error('Geocoding error:', err)
         results.value = []
       } finally {
         loading.value = false
         resolve()
       }
-    }, 1000) // 1s debounce for Nominatim rate limit
+    }, 300)
   })
 }
 

site/src/constants.js

@@ -163,9 +163,9 @@ export const MAX_GEOHASH_CELLS = 50
 export const MIN_ZOOM_FOR_DATA = 14
 export const CLUSTER_MAX_ZOOM = 12
 
-// Nominatim
-export const NOMINATIM_URL =
-  'https://nominatim.openstreetmap.org/search'
+// Stadia Maps Geocoding
+export const STADIA_GEOCODING_URL =
+  'https://api.stadiamaps.com/geocoding/v1/search'
 
 // Initial map view — New York City (fallback if geolocation is denied)
 export const INITIAL_CENTER = [-74.006, 40.7128]