Add a marker

Search for a place, then put a MapLibre marker on the first result. The popup is the place name.

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!);

unmap.map is the MapLibre GL map, so the marker API is MapLibre's, not an unmap wrapper. The colour here is the brand magenta (#FF3E9A); use whatever colour your own data needs. Magenta is kept out of the basemap so a pin like this always wins.

The Geocoding API documents the result shape.

For a fixed-coordinate marker and popup composed with shadcn components, add the editable registry block:

npx shadcn@latest add https://registry.unmap.dev/r/map-markers-01.json

import { MapMarkers } from "@/components/unmap-map-markers"
 
<MapMarkers apiKey="um_live_..." />

The block uses Prince's Island Park as sample content. Replace its coordinates and popup text in the copied component. Allow your site's origin on your browser key. For a complete location list or guided experience, explore map templates.