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.

Chaque bloc de cette page existe en React et en Vue. Les modèles en React seulement (business-locator-01, local-guide-01, public-notices-01, map-story-01) et les petits exemples sont dans la galerie, à côté de ces blocs.

Où va la page

npx @unmap/cli add store-locator, ou les commandes shadcn sous chaque bloc 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/. unmap add installe chaque bloc ; les commandes shadcn fonctionnent aussi.

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é.

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. Il 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

La ligne React enregistre le registre une fois par projet, ce qui permet ensuite de nommer les éléments @unmap/<item>; shadcn-vue n'a pas de registry add et prend directement l'URL de l'élément. Les fichiers arrivent dans components/ui/ à côté des vôtres; rien n'est remplacé sans confirmation.

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

const unmap = new Unmap({
  key: "um_pk_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 },
  });
});

Voyez le bloc entier en action dans la galerie.

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. Il 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

La ligne React enregistre le registre une fois par projet, ce qui permet ensuite de nommer les éléments @unmap/<item>; shadcn-vue n'a pas de registry add et prend directement l'URL de l'élément. Les fichiers arrivent dans components/ui/ à côté des vôtres; rien n'est remplacé sans confirmation.

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

const unmap = new Unmap({
  key: "um_pk_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 },
  });
});

Voyez le bloc entier en action dans la galerie.

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

La ligne React enregistre le registre une fois par projet, ce qui permet ensuite de nommer les éléments @unmap/<item>; shadcn-vue n'a pas de registry add et prend directement l'URL de l'élément. Les fichiers arrivent dans components/ui/ à côté des vôtres; rien n'est remplacé sans confirmation.

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

const unmap = new Unmap({
  key: "um_pk_live_...",
  container: "map",
  style: "muted",
  mode: "light",
  center: [-88, 52],
  zoom: 2.7,
});

Voyez le bloc entier en action dans la galerie.

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 MNE actif (modèles et datums mixtes depuis la publication mondiale 6). 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

La ligne React enregistre le registre une fois par projet, ce qui permet ensuite de nommer les éléments @unmap/<item>; shadcn-vue n'a pas de registry add et prend directement l'URL de l'élément. Les fichiers arrivent dans components/ui/ à côté des vôtres; rien n'est remplacé sans confirmation.

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

const unmap = new Unmap({
  key: "um_pk_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`);
});

Voyez le bloc entier en action dans la galerie.

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 fiche 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

La ligne React enregistre le registre une fois par projet, ce qui permet ensuite de nommer les éléments @unmap/<item>; shadcn-vue n'a pas de registry add et prend directement l'URL de l'élément. Les fichiers arrivent dans components/ui/ à côté des vôtres; rien n'est remplacé sans confirmation.

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

const unmap = new Unmap({
  key: "um_pk_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 },
  });
});

Voyez le bloc entier en action dans la galerie.

Les provinces et territoires du Recensement de 2021, colorés selon la population, la variation depuis 2016 ou la densité au km², avec une légende qui liste les provinces de chaque classe et le chiffre de l'endroit que pointe le curseur. Les formes sont du GeoJSON joint au tableau du recensement par code de province avec feature-state : changer d'indicateur écrit treize états d'entité plutôt que de nouvelles données ; remplacez les formes et les chiffres par les vôtres, liés par n'importe quelle propriété, et la jointure fonctionne de la même façon. Le bloc inclut les Fichiers des limites du Recensement de 2021 de Statistique Canada pour les provinces et territoires et le tableau 98-10-0001-01 (Licence ouverte de Statistique Canada), crédités sur la page, et n'appelle aucune API au-delà de la carte elle-même. L'aperçu ci-dessous dessine la vue d'ouverture du bloc, la population en cinq classes ; la galerie montre le bloc complet.

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

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

La ligne React enregistre le registre une fois par projet, ce qui permet ensuite de nommer les éléments @unmap/<item>; shadcn-vue n'a pas de registry add et prend directement l'URL de l'élément. Les fichiers arrivent dans components/ui/ à côté des vôtres; rien n'est remplacé sans confirmation.

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

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

Voyez le bloc entier en action dans la galerie.

Cherchez une description légale ou cliquez sur la carte : la cellule d'arpentage à cet endroit est hachurée, chaque unité d'arpentage au point est listée, et les traités à cet endroit sont en pointillé sur la carte, à côté du panneau des traités. Les terres légales nécessitent le module complémentaire Terres légales (Énergie et Agriculture le comprennent). Le bloc vérifie une fois si votre clé le possède et, sinon, explique pourquoi (aucun module, forfait de développement utilisé depuis une origine de production, ou allocation de développement du mois épuisée), renvoie à la page des tarifs et garde le contexte des traités, inclus dans chaque forfait. Le contexte des traités est la représentation publiée par la Couronne des traités historiques et modernes (Relations Couronne-Autochtones et Affaires du Nord Canada, Licence du gouvernement ouvert), et non une carte des nations autochtones ni une détermination des droits. Une vérification du module au chargement, puis /identify et /geocode/reverse pour chaque point, et /geocode/autocomplete pendant que vous tapez une description.

npx shadcn@latest registry add @unmap=https://registry.unmap.dev/r/{name}.json
npx shadcn@latest add @unmap/land-treaty-inspector

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

La ligne React enregistre le registre une fois par projet, ce qui permet ensuite de nommer les éléments @unmap/<item>; shadcn-vue n'a pas de registry add et prend directement l'URL de l'élément. Les fichiers arrivent dans components/ui/ à côté des vôtres; rien n'est remplacé sans confirmation.

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

const unmap = new Unmap({
  key: "um_pk_live_...",
  container: "map",
  style: "muted",
  overlays: ["treaties", "survey.dls"],
  center: [-114.0719, 51.0447],
  zoom: 11,
});

Voyez le bloc entier en action dans la galerie.

La recherche sans carte, en français, en anglais ou en syllabique inuktitut : ᐃᖃᓗᐃᑦ trouve Iqaluit. Un résultat choisi liste chaque nom qu'il porte, marqué de sa langue, avec son type, sa précision, sa correspondance et sa source ; six catégories listent les lieux les plus proches à moins de 2 km. Pour l'instant, peu de communautés ont un nom inuktitut dans les données : c'est une lacune des sources, pas de la recherche. Il appelle /geocode/autocomplete pendant la saisie (et /geocode/reverse quand vous saisissez des coordonnées) et /geocode/nearby pour chaque catégorie.

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

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

La ligne React enregistre le registre une fois par projet, ce qui permet ensuite de nommer les éléments @unmap/<item>; shadcn-vue n'a pas de registry add et prend directement l'URL de l'élément. Les fichiers arrivent dans components/ui/ à côté des vôtres; rien n'est remplacé sans confirmation.

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

const unmap = new Unmap({ key: "um_pk_live_..." });

const results = await unmap.geocoder.autocomplete("iqaluit", { limit: 5, lang: "fr" });

Voyez le bloc entier en action dans la galerie.

Les puits, pipelines et installations de l'Alberta, tirés des données ouvertes de l'Alberta Energy Regulator, avec une légende des couches, la recherche par UWI ou par permis, et l'identification au clic qui montre ce qui est enregistré à un point. La recherche et l'identification répondent à partir de ce que contient l'index énergétique, et le panneau le dit clairement quand un UWI ou un point n'a pas de fiche. Le bloc nécessite le module complémentaire Énergie : sans lui, la carte montre le fond de carte et le panneau explique pourquoi et renvoie à la page des tarifs, au lieu d'afficher une recherche et une identification qui seraient refusées. Une vérification du module au chargement, puis /geocode/autocomplete pour chaque recherche et /identify pour chaque clic.

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

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

La ligne React enregistre le registre une fois par projet, ce qui permet ensuite de nommer les éléments @unmap/<item>; shadcn-vue n'a pas de registry add et prend directement l'URL de l'élément. Les fichiers arrivent dans components/ui/ à côté des vôtres; rien n'est remplacé sans confirmation.

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

const unmap = new Unmap({
  key: "um_pk_live_...",
  container: "map",
  style: "muted",
  profile: "energy",
  center: [-114.98, 53.2],
  zoom: 9,
});

Voyez le bloc entier en action dans la galerie.

Toutes les stations de ski du Canada sur le style winter en relief 3D, tirées d'OpenStreetMap : cherchez par nom, filtrez par province ou territoire, et passez du ski alpin au ski de fond. Choisir une station y mène la caméra et l'incline sur son relief, et le panneau montre son dénivelé, son sommet et sa base, ses pistes (nombre, kilomètres de ski alpin et de fond), ses remontées, son orientation sur huit directions et le temps de route depuis la ville la plus proche. Les données sont © les contributeurs d'OpenStreetMap sous licence ODbL, ce que le panneau indique, et ce sont des informations sur le relief seulement, pas un avis sur les avalanches ni sur la sécurité. Le bloc nécessite le module complémentaire Ski : sans lui, la carte montre quand même le style hiver en 3D et le panneau explique pourquoi et renvoie à la page des tarifs. Appelle /ski/areas au chargement puis à chaque changement de filtre ; choisir une station ne fait aucun appel. Activez lifts3d pour tracer en 3D, sur le relief, les câbles des remontées de la station choisie : c'est désactivé par défaut, @unmap/deck (deck.gl) n'est chargé qu'au choix d'une station, et chaque choix appelle alors /ski/areas/{id}/lifts-3d une fois. Passez area et onAreaChange (v-model:area en Vue) pour garder la station choisie dans l'URL de votre page : le bloc donne un nom lisible tiré du nom de la station, comme nakiska, et area accepte ce nom ou l'identifiant de la station.

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

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

La ligne React enregistre le registre une fois par projet, ce qui permet ensuite de nommer les éléments @unmap/<item>; shadcn-vue n'a pas de registry add et prend directement l'URL de l'élément. Les fichiers arrivent dans components/ui/ à côté des vôtres; rien n'est remplacé sans confirmation.

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

const unmap = new Unmap({
  key: "um_pk_live_...",
  container: "map",
  style: "winter",
  overlays: ["ski"],
  center: [-122.92, 50.09],
  zoom: 12,
});

Voyez le bloc entier en action dans la galerie.

Voit-on les Rocheuses depuis ce logement? Calgary en 3D, face à l'ouest. Cliquez sur n'importe quel bâtiment, ou sur l'un des quatre endroits d'exemple (Patterson, Signal Hill, Crescent Heights, Inglewood), et la vue depuis sa fenêtre s'ouvre vers l'ouest en une seule surface translucide dans votre couleur principale : elle part de la fenêtre à sa hauteur et s'étend jusqu'à rencontrer le sol. Son bord éloigné est vif là où il touche les montagnes et gris là où une colline plus proche la coupe. Le panneau note la vue (« Vue sur les montagnes : 69 % de l'horizon ouest »), dessine l'horizon que vous verriez depuis cette fenêtre et marque 15 sommets nommés, visibles ou cachés. Les noms des sommets viennent de la Base de données toponymiques du Canada (Licence du gouvernement ouvert – Canada). Le bouton Centre-ville pose la même question pour les tours du centre-ville, avec une ligne de visée de la fenêtre jusqu'à leur sommet, et dessine le terrain entre les deux en coupe. La surface est dessinée par deck.gl au moyen de @unmap/deck, chargé au premier choix : la carte seule ne le charge jamais.

Chaque altitude vient des tuiles /terrain de la carte elle-même, lues dans le navigateur : des tuiles fines près du logement, où la hauteur d'un voisin décide de la vue, et plus grossières dans les montagnes. Le premier logement lit environ 25 tuiles, dont la plupart sont déjà chargées par la carte ; un logement voisin en lit quelques-unes de plus, et un logement déjà vu n'en lit aucune. Les lignes de visée tiennent compte de la courbure de la Terre avec la réfraction standard, qui cache environ 600 m de montagne à 100 km. L'altitude vient du MNE actif ; les crédits des fournisseurs sont sur unmap.dev/attribution. Aucun module complémentaire n'est nécessaire.

Le bloc n'utilise que le relief : le sol nu, donc les maisons et les arbres ne sont pas comptés, ce que le panneau indique.

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

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

La ligne React enregistre le registre une fois par projet, ce qui permet ensuite de nommer les éléments @unmap/<item>; shadcn-vue n'a pas de registry add et prend directement l'URL de l'élément. Les fichiers arrivent dans components/ui/ à côté des vôtres; rien n'est remplacé sans confirmation.

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

const unmap = new Unmap({
  key: "um_pk_live_...",
  container: "map",
  style: "outdoor",
  center: [-114.62, 51],
  zoom: 9.6,
});

Voyez le bloc entier en action dans la galerie.

Quel est le niveau de bruit ici, le jour et la nuit? Le bruit modélisé de la route, du train, des avions et des commerces à Calgary, Edmonton, Vancouver, Toronto, Montréal et Québec, dessiné par la couche urban-noise sur le style muted, avec une légende. Le sélecteur Jour / Nuit recolore toute la carte, du niveau jour-soir-nuit (Lden, par paliers de 45, 53, 60 et 65 dB) au niveau de nuit (Lnight, de 23 h à 7 h, par paliers de 40, 45, 50 et 55 dB). Dans les deux cas, le deuxième palier est la ligne directrice de l'OMS de 2018 pour la circulation routière, 53 dB Lden et 45 dB Lnight : chaque couleur chaude est au-dessus, et la légende trace cette ligne. Le sélecteur ne fait aucun appel : les deux niveaux sont dans les tuiles.

Cliquez sur la carte ou cherchez une adresse, et la carte de réponse répond pour ce point : le niveau de la période affichée en grand, le jour et la nuit chacun sur une barre face à la ligne de l'OMS avec « au-dessus » ou « sous » en toutes lettres, le score ancré sur l'OMS (100 est calme) avec son libellé, la source principale et une barre par source. Une adresse cherchée s'affiche au zoom de la rue ; un clic laisse la caméra où vous l'avez mise. Un point sans source modélisée à portée le dit, jamais 0 dB ni calme, et un lieu hors des six villes est indiqué comme non couvert, avec les villes où aller.

Les niveaux sont modélisés, pas mesurés : une estimation de dépistage, pas une évaluation de conformité, ce que le panneau indique. Ils sont calculés à partir d'OpenStreetMap : les données sont © les contributeurs d'OpenStreetMap sous licence ODbL, créditées avec le modèle de bruit PickYourPlace sur le panneau et dans l'attribution de la carte. Le bloc nécessite le module complémentaire Bruit urbain : sans lui, la carte s'affiche quand même et le panneau explique pourquoi et renvoie à la page des tarifs. Appelle /noise/point une fois par point cliqué ou cherché et /geocode/autocomplete pendant la saisie, après une vérification du module. Passez period et onPeriodChange (v-model:period en Vue) pour garder Jour ou Nuit dans votre page.

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

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

La ligne React enregistre le registre une fois par projet, ce qui permet ensuite de nommer les éléments @unmap/<item>; shadcn-vue n'a pas de registry add et prend directement l'URL de l'élément. Les fichiers arrivent dans components/ui/ à côté des vôtres; rien n'est remplacé sans confirmation.

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

const unmap = new Unmap({
  key: "um_pk_live_...",
  container: "map",
  style: "muted",
  center: [-114.07, 51.045],
  zoom: 12,
});

Voyez le bloc entier en action dans la galerie.

Un itinéraire à pied qui échange une minute contre une plus belle marche. Choisissez un départ et une arrivée, ou l'un des trois exemples à Calgary, et obtenez l'itinéraire : le bloc trouve la marche la plus rapide, puis des détours par les parcs, la rivière, les rues loin de la circulation, les cafés et commerces et l'art public, et note chaque marche sur ces cinq signaux. Les parcs, l'eau et les rues viennent des tuiles de la carte, lues dans le navigateur; les cafés, commerces et repères viennent de POST /places/along. Cinq curseurs disent ce qui compte et un temps de plus dit combien de temps vous acceptez de marcher en plus; les bouger reclasse les marches aussitôt, sans aucun appel. La marche choisie est tracée dans votre --primary et la plus rapide en tirets dans votre --muted-foreground, chacune avec une bulle de temps, et des cartes illustrées pointent vers le premier parc, la rue la plus animée et le premier repère que la marche choisie croise. Une carte « Pourquoi cet itinéraire » montre les cinq notes à côté de celles de la marche la plus rapide.

Une recherche coûte au plus 40 appels : un /route pour la marche la plus rapide, jusqu'à 24 tuiles de la carte lues pour la notation (les tuiles d'affichage de la carte sont à part), deux POST /places/along, puis des paires de /route pour les détours et /match pour les chemins que le bloc trouve sur un graphe piéton dans votre navigateur. La réponse est gardée pour chaque départ et arrivée, donc redemander ne coûte rien, sauf si une source était indisponible; les champs de recherche appellent /geocode/autocomplete pendant la saisie. Quand /places/along est indisponible, le classement n'utilise que les parcs, l'eau et les rues loin de la circulation, et quand les tuiles de la carte ne peuvent pas être lues, il laisse ces trois signaux de côté; dans les deux cas, leurs curseurs se désactivent, la carte « Pourquoi cet itinéraire » indique « Indisponible », et le panneau le dit. Le départ et l'arrivée passent à onEndsChange (React) ou à l'événement ends-change (Vue) chaque fois que le lecteur les change, pour qu'une page puisse les garder dans son adresse. Le bloc dessine ses propres illustrations; passez pictures (des adresses d'images par type de point fort, comme park, ou par catégorie de lieu, comme food.cafe, chacune une liste de variantes) pour afficher les vôtres, marquées « Illustration » avec un texte de remplacement qui précise qu'elles sont générées par IA. title et badge fixent le titre du panneau et une courte étiquette à côté. Il lit les tuiles de la carte avec @unmap/maps/tiles, qui paraît dans @unmap/maps 0.30.0 : l'élément demande donc @unmap/maps@^0.30.0, et une installation avant cette version échoue à l'installation plutôt qu'à l'exécution.

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

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

La ligne React enregistre le registre une fois par projet, ce qui permet ensuite de nommer les éléments @unmap/<item>; shadcn-vue n'a pas de registry add et prend directement l'URL de l'élément. Les fichiers arrivent dans components/ui/ à côté des vôtres; rien n'est remplacé sans confirmation.

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

const unmap = new Unmap({
  key: "um_pk_live_...",
  container: "map",
  style: "tropic",
  center: [-114.0495, 51.05],
  zoom: 14,
});

Voyez le bloc entier en action dans la galerie.