fix: address MapLibre migration review findings

Fix marker CSS scoping so result markers render, remove the map
instance on unmount to avoid leaking WebGL contexts, make the base
layer switcher keyboard-accessible, and restore Nominatim-backed
place/address search that was dropped with the Leaflet geocoder.

Author: simon04

app/App.vue

@@ -27,6 +27,9 @@ label {
   justify-content: center;
   width: 29px;
   height: 29px;
+  padding: 0;
+  border: none;
+  background: none;
   cursor: pointer;
 }
 .lt-layers .lt-layers-toggle svg {
@@ -41,7 +44,8 @@ label {
 .lt-layers:hover .lt-layers-toggle {
   display: none;
 }
-.lt-layers:hover .lt-layers-list {
+.lt-layers:hover .lt-layers-list,
+.lt-layers:focus-within .lt-layers-list {
   display: block;
 }
 .lt-layers .lt-layers-list label {
@@ -56,6 +60,61 @@ label {
   height: 1em;
 }
 
+.lt-geocoder {
+  display: flex;
+  align-items: center;
+  position: relative;
+  background: var(--bs-body-bg);
+}
+.lt-geocoder-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 29px;
+  height: 29px;
+  flex: none;
+}
+.lt-geocoder-icon svg {
+  width: 14px;
+  height: 14px;
+}
+.lt-geocoder input {
+  width: 180px;
+  border: none;
+  outline: none;
+  background: none;
+  padding: 0 8px 0 0;
+}
+.lt-geocoder-results {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 280px;
+  margin: 4px 0 0;
+  padding: 0;
+  list-style: none;
+  background: var(--bs-body-bg);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  max-height: 200px;
+  overflow-y: auto;
+}
+.lt-geocoder-results:empty {
+  display: none;
+}
+.lt-geocoder-results button {
+  display: block;
+  width: 100%;
+  border: none;
+  background: none;
+  text-align: left;
+  padding: 6px 10px;
+  white-space: normal;
+}
+.lt-geocoder-results button:hover,
+.lt-geocoder-results button:focus {
+  background: rgba(0, 0, 0, 0.08);
+}
+
 .flex-grow-1 {
   /* https://stackoverflow.com/a/36247448 */
   min-height: 0;

app/api/nominatim.ts

@@ -0,0 +1,15 @@
+import {fetchJSON} from './fetchJSON';
+
+export interface NominatimResult {
+  display_name: string;
+  boundingbox: [string, string, string, string]; // [south, north, west, east]
+}
+
+export async function search(query: string, signal?: AbortSignal): Promise<NominatimResult[]> {
+  if (!query.trim()) return [];
+  const url = new URL('https://nominatim.openstreetmap.org/search');
+  url.searchParams.set('format', 'jsonv2');
+  url.searchParams.set('q', query);
+  url.searchParams.set('limit', '5');
+  return fetchJSON<NominatimResult[]>(url.toString(), {signal});
+}

app/components/ltAllMap.vue

@@ -94,7 +94,7 @@ function buildPopup(title: CommonsFile): maplibregl.Popup {
   margin-left: calc(var(--bs-gutter-x) * -0.5);
   margin-right: calc(var(--bs-gutter-x) * -0.5);
 }
-.lt-circle-marker {
+:deep(.lt-circle-marker) {
   width: 14px;
   height: 14px;
   border-radius: 50%;

app/components/useMaplibreMap.ts

@@ -1,8 +1,11 @@
-import {useLocalStorage} from '@vueuse/core';
+import {useDebounceFn, useLocalStorage} from '@vueuse/core';
 import BoxArrowUpRight from 'bootstrap-icons/icons/box-arrow-up-right.svg?raw';
+import Search from 'bootstrap-icons/icons/search.svg?raw';
 import Stack from 'bootstrap-icons/icons/stack.svg?raw';
 import maplibregl from 'maplibre-gl';
-import {onMounted, type Ref} from 'vue';
+import {onMounted, onUnmounted, type Ref} from 'vue';
+
+import {search as nominatimSearch, type NominatimResult} from '../api/nominatim';
 
 import 'maplibre-gl/dist/maplibre-gl.css';
 
@@ -100,8 +103,11 @@ class BaseLayerControl implements maplibregl.IControl {
     const container = document.createElement('div');
     container.className = 'maplibregl-ctrl maplibregl-ctrl-group lt-layers';
 
-    const toggle = document.createElement('div');
+    const toggle = document.createElement('button');
+    toggle.type = 'button';
     toggle.className = 'lt-layers-toggle';
+    toggle.setAttribute('aria-label', 'Base layer');
+    toggle.setAttribute('aria-haspopup', 'true');
     toggle.innerHTML = Stack;
     container.append(toggle);
 
@@ -142,6 +148,73 @@ class BaseLayerControl implements maplibregl.IControl {
   }
 }
 
+/** Custom control to search for a place or address, backed by Nominatim. */
+class GeocoderControl implements maplibregl.IControl {
+  private map?: maplibregl.Map;
+  private results?: HTMLElement;
+  private requestId = 0;
+  private readonly search = useDebounceFn((query: string) => this.runSearch(query), 300);
+
+  onAdd(map: maplibregl.Map): HTMLElement {
+    this.map = map;
+    const container = document.createElement('div');
+    container.className = 'maplibregl-ctrl maplibregl-ctrl-group lt-geocoder';
+
+    const icon = document.createElement('span');
+    icon.className = 'lt-geocoder-icon';
+    icon.setAttribute('aria-hidden', 'true');
+    icon.innerHTML = Search;
+    container.append(icon);
+
+    const input = document.createElement('input');
+    input.type = 'search';
+    input.placeholder = '…';
+    input.setAttribute('aria-label', 'Search for a place or address');
+    input.addEventListener('input', () => this.search(input.value));
+    container.append(input);
+
+    const results = document.createElement('ul');
+    results.className = 'lt-geocoder-results';
+    container.append(results);
+    this.results = results;
+
+    return container;
+  }
+
+  private async runSearch(query: string): Promise<void> {
+    const requestId = ++this.requestId;
+    const results = this.results;
+    if (!results) return;
+    results.replaceChildren();
+    if (!query.trim()) return;
+    const places = await nominatimSearch(query);
+    if (requestId !== this.requestId) return;
+    for (const place of places) {
+      const li = document.createElement('li');
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.textContent = place.display_name;
+      button.addEventListener('click', () => this.select(place));
+      li.append(button);
+      results.append(li);
+    }
+  }
+
+  private select(place: NominatimResult): void {
+    const [south, north, west, east] = place.boundingbox.map(Number);
+    this.map?.fitBounds([
+      [west, south],
+      [east, north]
+    ]);
+    this.results?.replaceChildren();
+  }
+
+  onRemove(): void {
+    this.map = undefined;
+    this.results = undefined;
+  }
+}
+
 export function useMaplibreMap(mapRef: Ref<HTMLElement | null>) {
   const mapLayer = useLocalStorage('mapLayer', '');
   const mapView = useLocalStorage<MapView>('mapView', {
@@ -171,6 +244,7 @@ export function useMaplibreMap(mapRef: Ref<HTMLElement | null>) {
       })
     );
     map.addControl(new maplibregl.NavigationControl(), 'top-left');
+    map.addControl(new GeocoderControl(), 'top-left');
     map.addControl(new BaseLayerControl(mapLayer, osm), 'top-right');
 
     map.on('moveend', () => {
@@ -179,6 +253,8 @@ export function useMaplibreMap(mapRef: Ref<HTMLElement | null>) {
     });
   });
 
+  onUnmounted(() => map?.remove());
+
   return {
     get map() {
       return map;