Louis PocheronConcepteur & développeur d’applicationsBesançon, France
-- NORMAL -- ~/projets/ma_parcelle.md projet 06 / 06

ma_parcelle

Cliquez une parcelle : la carte la carotte à travers six couches de données publiques, sans compte ni serveur.

Stack
React 19 · Vite · MapLibre
Année
2026
Dépôt
github.com/Popoch39/ma_parcelle ↗
A

Anatomie

7 pièces · une seule les compte
Fig. 1 Carotte d’une parcelle
  1. 01useLayerClickL9–45 ↗

    Choisir une parcelle

    Un clic lit l’identifiant de la parcelle dans la carte déjà affichée, sans réseau.

    PciLayer()

    10export function PciLayer() {

    11 const { line } = OVERLAY_COLORS[useColorScheme()]

    12 const select = useSelectionStore((state) => state.select)

  2. 02zustandL3–20 ↗

    Retenir une seule parcelle

    Une seule parcelle ouverte à la fois, repérée par son code cadastral de 14 caractères.

    SelectionState

    3interface SelectionState {

    5 idu: string | null

    10 reframe: boolean

  3. 03API CartoL63–74 ↗

    Charger la parcelle

    Demande au cadastre de l’IGN la forme et la surface de la parcelle, en une requête.

    loadParcel()

    67export async function loadParcel(fetch: Fetch, idu: string, { signal }: LoadOptions = {}): Promise<Parcel> {

    68 const parts = parseIdu(idu)

    69 if (!parts) throw new ParcelError('invalid-idu', idu)

  4. 04fetchQueryL6–15 ↗

    Partir de la parcelle

    Chaque bloc part de la parcelle déjà en cache ; si elle manque, tous échouent ensemble.

    parcelBlockQuery()

    11export const parcelBlockQuery = <Model>(queryClient: QueryClient, block: BlockId, idu: string, load: BlockLoader<Model>) =>

    12 queryOptions({

    13 queryKey: [block, idu],

  5. 05fetchL61–91 ↗

    Interroger chaque source

    Le navigateur appelle les API publiques sans serveur, 15 s au plus par réponse.

    fetchBody()

    61async function fetchBody<T>(

    62 fetch: Fetch,

    63 url: string,

  6. 06<Block>SectionL14–25 ↗

    Empiler les six blocs

    Cadastre, urbanisme, risques, ventes, bâtiment et DPE : chacun charge et échoue seul.

    BLOCKS

    18export const BLOCKS = [

    19 { id: 'cadastre', Section: CadastreSection },

    20 { id: 'planning', Section: PlanningSection },

  7. 07statusL59–68 ↗

    Composer la synthèse

    Résume les blocs reçus, écarte ceux en panne et signale ceux qui chargent encore.

    assembleSummary()

    63export function assembleSummary(blocks: readonly BlockState[]): Summary {

    64 return {

    65 facts: blocks.flatMap((block) => (block.status === 'success' ? block.data : [])),

33063 KJ 33 · prêt · 0/6
Lecture des notes

Maintenez le clic sur la colonne pour forer les strates · cliquez le plateau pour relancer le sondageGardez le doigt sur la colonne pour forer les strates · touchez le plateau pour relancer le sondage

Fig. 1 — Le carottier part de la parcelle choisie sur le plan cadastral et traverse six strates, une par bloc de la fiche, dans leur ordre d’affichage. Chaque strate est aussi épaisse que le nombre de requêtes que son bloc envoie pour la parcelle 33063 KJ 33 : 32 en tout, du navigateur aux API publiques, sans serveur. Seule la croûte du cadastre conditionne les autres, qui sont interrogées ensemble ; une strate perdue manque au log sans arrêter le sondage.

Nomen­clature

  1. 01 Plateau parcellaire Le plan cadastral gravé. On choisit la parcelle en la touchant : l’IDU est lu dans la tuile déjà affichée, sans appel réseau. Code : src/map/layers/PciLayer.tsx, lignes 9–45 ↗
  2. 02 Tubage de tête Un seul tubage pour un seul trou : la sélection retient une parcelle à la fois. Code : src/stores/selection-store.ts, lignes 3–20 ↗
  3. 03 Croûte cadastrale La première couche à percer : la parcelle désignée par son IDU, d’où partent toutes les autres. Code : src/api/cadastre.ts, lignes 63–74 ↗
  4. 04 Carottier Il emporte la parcelle sortie du cache du Cadastre jusque dans chaque strate. Si la croûte casse, il ne remonte rien. Code : src/queries/block.ts, lignes 6–15 ↗
  5. 05 Couronne diamantée Elle mord chaque source : un GET avec un délai de 15 s et une erreur typée (HTTP, délai, réseau, JSON invalide). Code : src/api/fetch-json.ts, lignes 61–91 ↗
  6. 06 Viroles des strates Six viroles boulonnées, une par bloc, dans l’ordre de la fiche. Chacune charge et échoue seule. Code : src/components/report/blocks.ts, lignes 14–25 ↗
  7. 07 Log de sondage La synthèse : elle s’écrit avec ce qui est remonté. Une strate perdue ou encore en cours laisse sa ligne vierge, et le témoin reste allumé tant qu’une strate charge. Code : src/lib/summary/summary.ts, lignes 59–68 ↗