Maps

<script setup lang="ts">
import { computed, ref } from "vue";
import * as maplibre from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
import {
  Autocomplete,
  type AutocompleteInputValueChangeDetails,
  type AutocompleteValueChangeDetails,
} from "@dicehub/kappa/components/autocomplete";
import { MapView, type MapViewMarker } from "@dicehub/kappa/components/map-view";
import type { Map as MapLibreMap, MapOptions } from "maplibre-gl";

interface AddressResult extends MapViewMarker {
  id: string;
}

const query = ref("");
const results = ref<AddressResult[]>([]);
const selected = ref<AddressResult>();
const searchOpen = ref(false);
const markers = computed(() => selected.value ? [selected.value] : []);
let debounceTimer: ReturnType<typeof setTimeout> | undefined;
let searchController: AbortController | undefined;
const options = {
  style: "https://tiles.openfreemap.org/styles/liberty",
  center: [12.1, 52.45],
  zoom: 5.6,
} satisfies Omit<MapOptions, "container">;

async function searchAddresses(value: string) {
  searchController?.abort();
  const controller = new AbortController();
  searchController = controller;
  try {
    const url = new URL("https://photon.komoot.io/api/");
    url.searchParams.set("q", value);
    url.searchParams.set("limit", "5");
    const response = await fetch(url, { signal: controller.signal });
    if (!response.ok) throw new Error("Address search returned " + response.status);
    const data = await response.json() as {
      features: Array<{
        geometry: { coordinates: [number, number] };
        properties: { name?: string; city?: string; osm_id?: number };
      }>;
    };
    results.value = data.features.map((feature, index) => ({
      id: String(feature.properties.osm_id ?? index),
      label: feature.properties.name ?? feature.properties.city ?? "Unnamed location",
      coordinates: feature.geometry.coordinates,
    }));
  } catch {
    if (!controller.signal.aborted) results.value = [];
  }
}

function suggestAddresses(details: AutocompleteInputValueChangeDetails) {
  query.value = details.inputValue;
  if (details.reason === "item-select") return;
  searchOpen.value = details.inputValue.trim().length > 0;
  if (debounceTimer) clearTimeout(debounceTimer);
  searchController?.abort();
  results.value = [];
  if (details.inputValue.trim().length < 3) return;
  debounceTimer = setTimeout(() => searchAddresses(details.inputValue), 320);
}

function selectAddress(
  map: MapLibreMap,
  details: AutocompleteValueChangeDetails<AddressResult>,
) {
  selected.value = details.items[0];
  if (selected.value) {
    searchOpen.value = false;
    map.flyTo({ center: selected.value.coordinates, zoom: 13 });
  }
}
</script>

<template>
  <MapView
    :engine="maplibre"
    :options="options"
    :markers="markers"
    aria-label="Address search map"
  >
    <template #overlay="{ map }">
      <Autocomplete
        v-model:input-value="query"
        v-model:open="searchOpen"
        :filter="false"
        :input-attrs="{ 'aria-label': 'Find an address' }"
        :items="results"
        :item-to-string="(item: AddressResult) => item.label"
        :item-to-value="(item: AddressResult) => item.id"
        input-behavior="autohighlight"
        placeholder="Find an address..."
        @input-value-change="suggestAddresses"
        @value-change="selectAddress(map, $event)"
      />
    </template>
  </MapView>
</template>