MapLibre

import { LngLatBounds, Map, Marker, Popup, setWorkerUrl, type GeoJSONSource } from 'maplibre-gl';
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?url';
import 'maplibre-gl/dist/maplibre-gl.css';

// MapLibre 6 runs its worker from a separate module; let Vite emit it.
setWorkerUrl(workerUrl);

const KEY = import.meta.env.VITE_GEOLITH_KEY as string; // gc_pk_…, allowed origin: this site
const API = 'https://api.geolith.app';
const ATTRIBUTION = '© OpenStreetMap contributors (ODbL), Overture Maps Foundation';

interface Place {
  type: 'Feature';
  geometry:
    | { type: 'Point'; coordinates: [number, number] }
    | { type: 'Polygon'; coordinates: [number, number][][] }
    | { type: 'MultiPolygon'; coordinates: [number, number][][][] };
  bbox?: [number, number, number, number];
  properties: { gid: string; label: string; center?: [number, number] };
}

const map = new Map({
  container: 'map',
  style: 'https://demotiles.maplibre.org/style.json',
  center: [78.9629, 20.5937],
  zoom: 4,
  attributionControl: { customAttribution: ATTRIBUTION },
});

map.on('load', () => {
  map.addSource('outline', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } });
  map.addLayer({
    id: 'outline-fill',
    type: 'fill',
    source: 'outline',
    paint: { 'fill-color': '#14b8a6', 'fill-opacity': 0.2 },
  });
  map.addLayer({
    id: 'outline-line',
    type: 'line',
    source: 'outline',
    paint: { 'line-color': '#0d9488', 'line-width': 2 },
  });
});

async function geolith(path: string, params: Record<string, string>): Promise<Place[]> {
  const url = new URL(path, API);
  for (const [key, value] of Object.entries(params)) url.searchParams.set(key, value);
  url.searchParams.set('api_key', KEY);
  const res = await fetch(url);
  if (!res.ok) return [];
  return ((await res.json()) as { features: Place[] }).features;
}

let markers: Marker[] = [];

function showMarkers(places: Place[]) {
  for (const marker of markers) marker.remove();
  markers = places.flatMap((place) => {
    if (place.geometry.type !== 'Point') return [];
    return [
      new Marker()
        .setLngLat(place.geometry.coordinates)
        .setPopup(new Popup().setText(place.properties.label))
        .addTo(map),
    ];
  });
}

async function select(place: Place) {
  showMarkers([place]);
  // geometry=true returns the outline when the place has one; otherwise a point.
  const [full] = await geolith('/v1/place', { ids: place.properties.gid, geometry: 'true' });
  const source = map.getSource<GeoJSONSource>('outline');
  if (full && full.geometry.type !== 'Point') {
    source?.setData({ type: 'FeatureCollection', features: [full] });
    if (full.bbox) map.fitBounds(LngLatBounds.convert(full.bbox), { padding: 40 });
    return;
  }
  source?.setData({ type: 'FeatureCollection', features: [] });
  if (place.geometry.type === 'Point') map.flyTo({ center: place.geometry.coordinates, zoom: 14 });
}

const input = document.querySelector<HTMLInputElement>('#q');
const list = document.querySelector<HTMLUListElement>('#results');
let timer: ReturnType<typeof setTimeout> | undefined;

input?.addEventListener('input', () => {
  clearTimeout(timer);
  const text = input.value.trim();
  if (text.length < 3 || !list) return;
  timer = setTimeout(async () => {
    const center = map.getCenter();
    const places = await geolith('/v1/autocomplete', {
      text,
      size: '5',
      'focus.point.lat': center.lat.toFixed(5),
      'focus.point.lon': center.lng.toFixed(5),
    });
    showMarkers(places);
    list.replaceChildren(
      ...places.map((place) => {
        const item = document.createElement('li');
        const button = document.createElement('button');
        button.type = 'button';
        button.textContent = place.properties.label;
        button.addEventListener('click', () => {
          input.value = place.properties.label;
          list.replaceChildren();
          void select(place);
        });
        item.append(button);
        return item;
      }),
    );
  }, 200);
});