FR
Skip to content
All examplesMaps

Add a marker

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

live result
the code that produced it
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.