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.

Pour un marqueur à coordonnées fixes et une infobulle composés avec shadcn, ajoutez le bloc modifiable du registre :

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

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

Le bloc utilise le parc de l'Île comme démonstration. Remplacez ses coordonnées et le texte de l'infobulle dans le composant copié. Autorisez l'origine de votre site sur votre clé navigateur. Pour une liste de lieux ou une expérience guidée complète, explorez les modèles de cartes.