Place a marker from search

The usual "search box plus pin" pattern: geocode the query, then drop a marker on the first result. This is the same live call as Add a marker, written here as a geocoding example.

import { Unmap, maplibregl } from "@unmap/sdk";

const unmap = new Unmap({
  key: "um_live_...",
  container: "map",
  center: [-114.0719, 51.0447],
  zoom: 11,
});

const [place] = await unmap.geocoder.search("Calgary Tower");

new maplibregl.Marker({ color: "#FF3E9A" })
  .setLngLat([place.lng, place.lat])
  .setPopup(new maplibregl.Popup().setText(place.name))
  .addTo(unmap.map!);

Take the first element of the array, or let the user pick from the rest. place.lng and place.lat are the numbers to hand to MapLibre. If you only need the coordinate and not a map, @unmap/geocoding is the standalone client.

See Search for a place for the lookup without a pin, and the Geocoding API for the result shape.