Composants de superposition

Ces éléments fonctionnent avec les superpositions du catalogue qu'une carte compose : l'ensemble énergie avec profile="energy" et les traités avec overlays={["treaties"]}. Les superpositions elles-mêmes sont documentées sous Superpositions.

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

npx shadcn-vue@latest add https://registry.unmap.dev/r/vue/energy-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.

Parcourir tous les éléments sur registry.unmap.dev

Élément	Rôle
`energy-layer-control`	L'ensemble des superpositions énergie en préréglage de `layer-legend`, pour une carte qui a déjà `profile="energy"`.
`energy-map`	`<UnmapMap>` déjà composé avec `profile="energy"` (`muted` par défaut). Composition de carte seulement, pas un style.
`well-search`	Boîte de recherche étiquetée pour les UWI. Envoie seulement la requête ; la passerelle détecte UWI vs civique.
`legal-land-search`	Boîte de recherche étiquetée pour le LSD. Même règle : la chaîne de requête seulement.
`energy-popup`	Identifie puits, pipelines et installations au clic. `onLookup(at)` se déclenche quand un clic lance une identification, puis exactement un de `onIdentify(hit, at)`, `onMiss(at)` ou `onError(error, at)` (Vue : `@lookup`, `@identify`, `@miss`, `@error`). Seul le dernier clic obtient une réponse : une identification dépassée par un clic plus récent n'en reçoit aucun des trois.
`treaty-context`	Interrupteurs pour les traités historiques et modernes, une recherche par coordonnées et un panneau de détails qui liste chaque fiche de traité trouvée à un point, en français et en anglais. S'associe à `overlays={["treaties"]}`. `onSelect` (Vue : `@select`) reçoit chaque réponse : le contexte, les identifiants des fiches dessinées sous le point et les catégories masquées. `onError` (Vue : `@error`) reçoit une recherche qui a échoué et le point qu'elle visait.

Énergie

energy-map est une carte déjà composée avec profile="energy" sur la cartographie muted, et les autres éléments énergie fonctionnent à l'intérieur : well-search trouve un puits par son UWI, energy-layer-control affiche ou masque les superpositions, et energy-popup identifie ce qui se trouve sous un clic. Une clé sans le complément energy reçoit quand même le fond de carte ; les tuiles de superposition et la recherche d'UWI répondent 403 addon_required. Chaque recherche et chaque clic qui identifie compte pour une requête. Le contrôle des couches s'affiche comme un simple fieldset : l'exemple le place donc dans votre Card. Voir Profil énergie.

"use client";
 
import { Card, CardContent } from "@/components/ui/card";
import { EnergyMap } from "@/components/ui/energy-map";
import { EnergyLayerControl } from "@/components/ui/energy-layer-control";
import { WellSearch } from "@/components/ui/well-search";
import { EnergyPopup } from "@/components/ui/energy-popup";
 
export function WellsMap() {
  const apiKey = process.env.NEXT_PUBLIC_UNMAP_KEY!;
  return (
    <div className="h-[560px]">
      <EnergyMap apiKey={apiKey} center={[-114.07, 51.05]} zoom={7}>
        <div className="absolute top-3 left-3 z-10 w-72">
          <WellSearch apiKey={apiKey} />
        </div>
        <Card className="absolute right-3 bottom-10 z-10 w-60">
          <CardContent>
            <EnergyLayerControl />
          </CardContent>
        </Card>
        <EnergyPopup apiKey={apiKey} onIdentify={(hit) => console.log(hit.uwi ?? hit.name)} />
      </EnergyMap>
    </div>
  );
}

<script setup lang="ts">
import type { IdentifyResult } from "@unmap/geocoding";
import { Card, CardContent } from "@/components/ui/card";
import { UnmapEnergyMap } from "@/components/ui/energy-map";
import { UnmapEnergyLayerControl } from "@/components/ui/energy-layer-control";
import { UnmapWellSearch } from "@/components/ui/well-search";
import { UnmapEnergyPopup } from "@/components/ui/energy-popup";
 
const apiKey = import.meta.env.VITE_UNMAP_KEY!;
function onIdentify(hit: IdentifyResult) {
  console.log(hit.uwi ?? hit.name);
}
</script>
 
<template>
  <div class="h-[560px]">
    <UnmapEnergyMap :api-key="apiKey" :center="[-114.07, 51.05]" :zoom="7">
      <div class="absolute top-3 left-3 z-10 w-72">
        <UnmapWellSearch :api-key="apiKey" />
      </div>
      <Card class="absolute right-3 bottom-10 z-10 w-60">
        <CardContent>
          <UnmapEnergyLayerControl />
        </CardContent>
      </Card>
      <UnmapEnergyPopup :api-key="apiKey" @identify="onIdentify" />
    </UnmapEnergyMap>
  </div>
</template>

legal-land-search est le jumeau LSD de well-search : la même boîte de recherche, libellée pour les descriptions de terres légales comme NW-25-24-1-W5, qui n'envoie que la chaîne de requête. Elle fonctionne sur n'importe quelle carte ; la recherche exige un complément qui comprend les terres légales (Terres légales, Énergie ou Agriculture). Voir Terres légales.

"use client";
 
import { Map } from "@/components/ui/map";
import { LegalLandSearch } from "@/components/ui/legal-land-search";
 
export function LandFinder() {
  const apiKey = process.env.NEXT_PUBLIC_UNMAP_KEY!;
  return (
    <div className="h-[480px]">
      <Map apiKey={apiKey} style="muted" center={[-113.49, 53.55]} zoom={8}>
        <div className="absolute top-3 left-3 z-10 w-72">
          <LegalLandSearch apiKey={apiKey} onSelect={(result) => console.log(result.name)} />
        </div>
      </Map>
    </div>
  );
}

<script setup lang="ts">
import type { GeocodeResult } from "@unmap/geocoding";
import { UnmapMap } from "@/components/ui/map";
import { UnmapLegalLandSearch } from "@/components/ui/legal-land-search";
 
const apiKey = import.meta.env.VITE_UNMAP_KEY!;
function onSelect(result: GeocodeResult) {
  console.log(result.name);
}
</script>
 
<template>
  <div class="h-[480px]">
    <UnmapMap :api-key="apiKey" map-style="muted" :center="[-113.49, 53.55]" :zoom="8">
      <div class="absolute top-3 left-3 z-10 w-72">
        <UnmapLegalLandSearch :api-key="apiKey" @select="onSelect" />
      </div>
    </UnmapMap>
  </div>
</template>

Traités

treaty-context s'associe à overlays={["treaties"]} : des interrupteurs pour les traités historiques et modernes, une recherche par coordonnées et un panneau qui liste chaque fiche de traité à un point, en français et en anglais. Chaque recherche, qu'elle vienne d'un clic sur la carte, de coordonnées saisies ou de la propriété point, compte pour une requête. La couche des traités fait partie du service de base, sans complément. Voir Couche des traités.

"use client";
 
import { Card, CardContent } from "@/components/ui/card";
import { Map } from "@/components/ui/map";
import { TreatyContext } from "@/components/ui/treaty-context";
 
export function TreatyMap() {
  const apiKey = process.env.NEXT_PUBLIC_UNMAP_KEY!;
  return (
    <div className="h-[560px]">
      <Map apiKey={apiKey} style="muted" center={[-106.67, 52.13]} zoom={5} overlays={["treaties"]}>
        <Card className="absolute top-3 left-3 z-10 max-h-[calc(100%-1.5rem)] w-80 overflow-y-auto">
          <CardContent>
            <TreatyContext apiKey={apiKey} onSelect={({ context }) => console.log(context.matches.map((match) => match.name))} />
          </CardContent>
        </Card>
      </Map>
    </div>
  );
}

<script setup lang="ts">
import type { TreatySelection } from "@unmap/geocoding";
import { Card, CardContent } from "@/components/ui/card";
import { UnmapMap } from "@/components/ui/map";
import { UnmapTreatyContext } from "@/components/ui/treaty-context";
 
const apiKey = import.meta.env.VITE_UNMAP_KEY!;
function onSelect({ context }: TreatySelection) {
  console.log(context.matches.map((match) => match.name));
}
</script>
 
<template>
  <div class="h-[560px]">
    <UnmapMap :api-key="apiKey" map-style="muted" :center="[-106.67, 52.13]" :zoom="5" :overlays="['treaties']">
      <Card class="absolute top-3 left-3 z-10 max-h-[calc(100%-1.5rem)] w-80 overflow-y-auto">
        <CardContent>
          <UnmapTreatyContext :api-key="apiKey" @select="onSelect" />
        </CardContent>
      </Card>
    </UnmapMap>
  </div>
</template>