Ajouter un repère

Recherchez un lieu, puis posez un marqueur MapLibre sur le premier résultat. L'infobulle est le nom du lieu.

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 est la carte MapLibre GL, donc l'API des marqueurs est celle de MapLibre, pas une enveloppe unmap. La couleur ici est le magenta de la marque (#FF3E9A) ; utilisez la couleur dont vos propres données ont besoin. Le magenta est tenu hors du fond de carte pour qu'une épingle comme celle-ci l'emporte toujours.

L'API de géocodage documente la forme du résultat.