Put a searched address on a map with MapLibre

npm install maplibre-gl

<label for="address">Address</label>
<input id="address" type="search" autocomplete="off" placeholder="145 sydney road">
<ul id="suggestions" hidden></ul>

<!-- A fixed height, set here rather than by the map, so the page does not
     jump when the tiles arrive. -->
<div id="map" style="height: 360px; border-radius: 8px; overflow: hidden"></div>

<script type="module" src="/map-search.js"></script>

// map-search.js
// MapLibre 6 is ESM only and exports its classes by name.
import * as maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
// Its worker, bundled by Vite. MapLibre starts the worker from a file beside
// its own, and a bundler moves its own file, so without this the map is an
// empty box and the console says the worker came back as text/html.
import workerUrl from "maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url";

maplibregl.setWorkerUrl(workerUrl);

const KEY = "lc_pub_...";                  // a public key, with this site under its allowed sites
const API = "https://api.locio.com.au";

// Australia, zoomed out, until there is somewhere to look.
const map = new maplibregl.Map({
  container: "map",
  style: "https://tiles.openfreemap.org/styles/bright",   // no key, no account, no cap
  center: [134.5, -27.5],
  zoom: 3.4,
  attributionControl: { compact: true },
});
map.addControl(new maplibregl.NavigationControl({ showCompass: false }), "top-right");

// One pin, moved rather than replaced, so a second pick does not leave the
// first one behind.
const pin = new maplibregl.Marker({ color: "#18181b" });

const input = document.querySelector("#address");
const list = document.querySelector("#suggestions");
let timer;
let inflight;

input.addEventListener("input", () => {
  clearTimeout(timer);
  const q = input.value.trim();
  if (q.length < 3) {
    list.hidden = true;
    return;
  }
  timer = setTimeout(() => search(q), 200);   // one request per pause, not per keystroke
});

async function search(q) {
  inflight?.abort();
  inflight = new AbortController();
  const url = new URL(`${API}/v1/addresses`);
  url.searchParams.set("q", q);
  url.searchParams.set("limit", "8");
  try {
    const res = await fetch(url, {
      headers: { Authorization: `Bearer ${KEY}` },
      signal: inflight.signal,
    });
    if (!res.ok) return;
    const { data } = await res.json();
    list.replaceChildren(
      ...data.map((address) => {
        const item = document.createElement("li");
        const button = document.createElement("button");
        button.type = "button";
        button.textContent = address.formatted;
        button.addEventListener("click", () => show(address));
        item.append(button);
        return item;
      }),
    );
    list.hidden = data.length === 0;
  } catch (err) {
    if (err.name !== "AbortError") console.error(err);
  }
}

function show(address) {
  input.value = address.formatted;
  list.hidden = true;

  // Every result is already resolved, so the coordinates are on it: no
  // geocoding call, no second request.
  const at = [address.lng, address.lat];
  pin.setLngLat(at).setPopup(new maplibregl.Popup({ offset: 24 }).setText(address.formatted)).addTo(map);
  map.flyTo({ center: at, zoom: 17, speed: 1.6 });
}

/* Dark mode. OpenFreeMap has no dark style, so invert the canvas and turn
   the hue back, which keeps parks green and water blue. The pin and the
   popup are DOM, not canvas, so they are untouched. */
@media (prefers-color-scheme: dark) {
  #map .maplibregl-canvas {
    filter: invert(1) hue-rotate(180deg);
  }
  #map .maplibregl-popup-content {
    color: #27272a;            /* the popup is white either way */
  }
}

// Several addresses at once: a GeoJSON source and a circle layer, which
// the map draws itself, rather than a marker element per address.
map.on("load", () => {
  map.addSource("addresses", {
    type: "geojson",
    data: {
      type: "FeatureCollection",
      features: addresses.map((a) => ({
        type: "Feature",
        geometry: { type: "Point", coordinates: [a.lng, a.lat] },
        properties: { label: a.formatted, id: a.id },
      })),
    },
  });
  map.addLayer({
    id: "addresses",
    type: "circle",
    source: "addresses",
    paint: { "circle-radius": 6, "circle-color": "#18181b", "circle-stroke-width": 2, "circle-stroke-color": "#fff" },
  });
});