Zones de service

Trois zones de service illustratives sur Calgary, en GeoJSON. Survolez une zone pour la mettre en évidence et cliquez dessus pour lire son nom et ses heures.

Carte + couche GeoJSON · Calgary

Exemple

Données de démonstration sur de vrais lieux canadiens. L'aperçu utilise la clé de démonstration d'unmap.

Ajoutez-le avec la CLI unmap

Installe le composant, ses éventuelles données de démonstration et les composants shadcn qu'il utilise. Projets React seulement ; dans un projet Vue, la commande s'arrête avant de modifier quoi que ce soit.

npx @unmap/cli add map-geojson-01

Ajouter à votre application React

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

Pour les applications React où shadcn et Base UI sont déjà configurés. La CLI ajoute les composants et paquets nécessaires.

Afficher le composant

import { MapGeojson } from "@/components/unmap-map-geojson"

<MapGeojson apiKey="um_live_..." lang="fr" />

Ce qu'il comprend

Construit avec geojson-layer
Zones illustratives incluses

Exemple

Un élément du registre, sur un vrai lieu canadien, prêt à copier dans une application React.

Lire le guide du composant Élément du registre (JSON)