Blocs

Un bloc est une page plutôt qu'un composant : il assemble les éléments du registre en un écran qui appelle l'API unmap avec votre clé, et, quand il a besoin de données, il arrive avec des données d'exemple ouvertes, créditées sur la page. add installe la page et chaque élément qu'elle utilise. Chaque aperçu ci-dessous fait le même genre d'appel à l'API que son bloc, avec la clé de démonstration du site.

Où va la page

npx @unmap/cli add store-locator, ou les commandes shadcn de chaque carte ci-dessous, place la page dans app/store-locator/page.tsx d'un projet Next.js App Router ou dans app/pages/store-locator.vue d'un projet Nuxt 4, et le composant du bloc dans components/ui/. Chaque bloc existe dans les deux voies. unmap add installe les blocs à partir de @unmap/cli 0.15.0 (la version 0.14.0 répond « unknown item ») ; les commandes shadcn fonctionnent avec n'importe quelle version.

Sous Nuxt, préférez unmap add. La commande shadcn-vue suppose la structure app/ : elle écrit toujours app/pages/<nom>.vue sans brancher la clé, et dans un projet qui garde app.vue à la racine, un nouveau dossier app/ déplace le répertoire source de Nuxt et casse l'application. unmap add place la page là où votre structure la lit et déclare la clé.

Un bloc installe la version actuelle des éléments qu'il utilise. Si vous avez déjà une version plus ancienne de flow-layer ou d'elevation-profile, acceptez la proposition de shadcn de la remplacer, ou passez --overwrite.

La page lit votre clé dans NEXT_PUBLIC_UNMAP_KEY du fichier .env.local sous Next.js, et dans NUXT_PUBLIC_UNMAP_KEY par runtimeConfig.public.unmapKey sous Nuxt. Sous Nuxt, unmap add écrit la ligne NUXT_PUBLIC_UNMAP_KEY vide dans .env (ou la laisse là où vous l'avez déjà définie) et ajoute runtimeConfig.public.unmapKey à nuxt.config ; avec la structure de Nuxt 3, il déplace la page dans pages/. Collez votre clé après l'installation. Dans tout autre projet (Vite, Vue seul), les CLI shadcn ignorent la page : affichez alors le composant vous-même, <StoreLocator apiKey={key} /> ou <UnmapStoreLocator :api-key="key" />. Sans clé, un bloc indique où en obtenir une et quelle variable définir, et ne charge rien. unmap create --only refuse les blocs ; ajoutez-en un à un projet avec unmap add.

La facturation se fait à la requête. Les requêtes de style et de tuiles de la carte comptent comme sur toute carte unmap, et chaque bloc n'ajoute que les requêtes énumérées dans sa section ci-dessous, une par réponse, faites quand la personne agit. Si votre clé n'accepte que certaines origines, ajoutez http://localhost:3000 pendant le développement.

Cherchez un lieu : la carte se resserre sur lui et sur les succursales les plus proches, regroupées à mesure que vous zoomez, avec une liste qui suit la vue et répond à la carte quand vous survolez l'une ou l'autre. Choisissez une succursale pour ses heures d'ouverture, la zone à moins de 10 minutes en voiture autour d'elle (driveMinutes la change) et l'itinéraire. Appelle /geocode/autocomplete (et /geocode/reverse quand vous saisissez des coordonnées), /isochrone et /route. Il arrive avec les 33 succursales de la Bibliothèque publique d'Ottawa, tirées des données ouvertes de la Ville d'Ottawa, créditées sous l'Open Government Licence – City of Ottawa ; passez stores pour vos propres points. Les itinéraires et les zones en voiture portent le crédit aux contributeurs d'OpenStreetMap (ODbL).

npx shadcn@latest registry add @unmap=https://registry.unmap.dev/r/{name}.json
npx shadcn@latest add @unmap/store-locator

npx shadcn-vue@latest add https://registry.unmap.dev/r/vue/store-locator.json

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

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

const bands = await unmap.router.isochrone([-75.69, 45.42], { minutes: [10], mode: "auto" });

unmap.map!.on("load", () => {
  unmap.map!.addSource("bands", { type: "geojson", data: bands });
  unmap.map!.addLayer({
    id: "bands-fill",
    type: "fill",
    source: "bands",
    paint: { "fill-color": "#FF3E9A", "fill-opacity": 0.18 },
  });
});

Deux champs de recherche, puis l'itinéraire avec son temps de parcours en titre. Le sélecteur de mode (voiture, vélo, marche) est l'essentiel : il redessine l'itinéraire pour le mode choisi, garde le temps de chaque mode sur le sélecteur pour les comparer d'un coup d'œil, et la zone accessible suit le mode et n'a besoin que d'un départ. Appelle /geocode/autocomplete (et /geocode/reverse quand vous saisissez des coordonnées), /route une fois par mode et /isochrone une fois par départ et par mode ; chaque réponse est demandée une seule fois puis conservée pour le départ et la destination en cours. L'API d'itinéraires renvoie un itinéraire par requête : le bloc ne montre donc pas d'itinéraires de rechange. Il n'embarque aucune donnée ; les itinéraires portent le crédit aux contributeurs d'OpenStreetMap (ODbL).

npx shadcn@latest registry add @unmap=https://registry.unmap.dev/r/{name}.json
npx shadcn@latest add @unmap/directions

npx shadcn-vue@latest add https://registry.unmap.dev/r/vue/directions.json

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

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

const bands = await unmap.router.isochrone([-114.0719, 51.0447], { minutes: [10, 20, 30], mode: "auto" });

unmap.map!.on("load", () => {
  unmap.map!.addSource("bands", { type: "geojson", data: bands });
  unmap.map!.addLayer({
    id: "bands-fill",
    type: "fill",
    source: "bands",
    paint: { "fill-color": "#FF3E9A", "fill-opacity": 0.18 },
  });
});

La migration interprovinciale de Statistique Canada (tableau 17-10-0022-01, 2021/2022 à 2025/2026, Licence ouverte de Statistique Canada) tracée avec flow-layer entre les capitales provinciales et territoriales, avec un curseur d'année tiré de time-slider. L'épaisseur des lignes suit une seule échelle d'une année à l'autre : une année qui compte plus de déménagements trace des lignes plus larges, et chaque province affiche son solde des arrivées et des départs. Les estimations de 2025/2026 sont provisoires et le bloc le signale. Il n'appelle aucune API au-delà de la carte elle-même.

npx shadcn@latest registry add @unmap=https://registry.unmap.dev/r/{name}.json
npx shadcn@latest add @unmap/flow-map

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

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

const unmap = new Unmap({
  key: "um_live_...",
  container: "map",
  style: "muted",
  mode: "light",
  center: [-96, 58],
  zoom: 3,
});

Choisissez l'un des trois trajets types en montagne, calculez le vôtre à partir de deux recherches ou tracez une ligne, et lisez son profil tiré de /elevation, échantillonné le long de la ligne à partir du modèle MRDEM-30 de RNCan (Licence du gouvernement ouvert – Canada). La ligne prend la couleur de sa pente à partir des mêmes échantillons : les descentes dans votre couleur principale, les tronçons plats en sourdine et les montées dans votre couleur destructive, le tout depuis vos jetons. Le graphique et la ligne se répondent au survol. Un profil est une requête pour 500 échantillons au plus, et une ligne à laquelle vous revenez vient du cache du bloc : elle ne coûte rien ; un trajet type ou un itinéraire ajoute une requête /route, et les champs de recherche appellent /geocode/autocomplete (et /geocode/reverse pour des coordonnées saisies).

npx shadcn@latest registry add @unmap=https://registry.unmap.dev/r/{name}.json
npx shadcn@latest add @unmap/elevation-explorer

npx shadcn-vue@latest add https://registry.unmap.dev/r/vue/elevation-explorer.json

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

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

const [metres] = await unmap.elevation.get([-116.18, 51.43]);

unmap.map!.on("click", async (e) => {
  const [here] = await unmap.elevation.get([e.lngLat.lng, e.lngLat.lat]);
  console.log(here === null ? "no data here" : `${here} m`);
});

Un itinéraire tiré de /route tracé avec route-line, d'un entrepôt au point de livraison choisi, dont la partie parcourue se remplit à mesure qu'un marqueur de livreur avance, avec une carte qui compte à rebours jusqu'à l'heure d'arrivée. Le livreur est rejoué le long de la géométrie même de l'itinéraire, à 30 fois le temps réel : une livraison est donc une seule requête, et Recommencer n'en fait aucune autre ; remplacez la relecture par les positions de votre flotte pour suivre de vrais livreurs. L'entrepôt et les points de livraison sont des succursales de la Bibliothèque publique d'Ottawa (données ouvertes de la Ville d'Ottawa, Open Government Licence – City of Ottawa) ; les itinéraires portent le crédit aux contributeurs d'OpenStreetMap (ODbL).

npx shadcn@latest registry add @unmap=https://registry.unmap.dev/r/{name}.json
npx shadcn@latest add @unmap/delivery-tracker

npx shadcn-vue@latest add https://registry.unmap.dev/r/vue/delivery-tracker.json

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

const unmap = new Unmap({
  key: "um_live_...",
  container: "map",
  center: [-75.689, 45.425],
  zoom: 14,
});

const route = await unmap.router.route([-75.695396, 45.4203], [-75.683098, 45.430099], { mode: "auto" });

unmap.map!.on("load", () => {
  unmap.map!.addSource("route", {
    type: "geojson",
    data: { type: "Feature", properties: {}, geometry: route.geometry },
  });
  unmap.map!.addLayer({
    id: "route-line",
    type: "line",
    source: "route",
    layout: { "line-cap": "round", "line-join": "round" },
    paint: { "line-color": "#FF3E9A", "line-width": 3 },
  });
});