Afficher une carte

Initialisez une carte dans un élément HTML. C'est tout le Hello World : une clé, un conteneur et un centre.

résultat en direct

le code qui l’a produit

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

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

center est [longitude, latitude], dans cet ordre. Laissez style, mode et lang de côté et vous obtenez base en mode clair, avec les étiquettes dans la langue du lecteur. Le conteneur a besoin d'une hauteur ; sans elle, la carte fait zéro pixel de haut et MapLibre ne signale aucune erreur.

La carte est une carte MapLibre GL sur unmap.map, donc tout ce que l'API MapLibre peut faire, vous pouvez le faire à celle-ci. Pour déplacer la caméra après le chargement, appelez flyTo :

unmap.map!.on("load", () => {
  unmap.map!.flyTo({ center: [-73.5673, 45.5017], zoom: 12 });
});

Voir le Guide de démarrage pour l'installation, et l'API de cartes pour chaque style.