Il requisito che riceviamo più spesso dalle software house è: una mappa con le particelle catastali cliccabili dentro la nostra app React, senza dover montare un GIS. La risposta standard è MapLibre GL JS con un layer GeoJSON: open source, leggero, senza costi di licenza. In un giorno si ha un prototipo funzionante, in tre un componente di produzione.
Questo tutorial riassume il percorso completo, con i dati catastali di Zornade come fonte (gratuiti, in GeoJSON, licenza aperta).
I pezzi del sistema
- Dati: GeoJSON delle particelle con proprietà catastali (foglio, particella, subalterno, categoria). I dataset GIS di Zornade sono scaricabili senza registrazione in GeoJSON e GeoPackage, in EPSG:4326.
- Motore di rendering: MapLibre GL JS, il fork open source di Mapbox GL, usato in produzione da operatori GIS e provider di mappe.
- Stile base: una basemap chiara (Carto, OpenFreeMap o una basemap commerciale) sopra la quale il layer catastale si sovrappone con riempimenti trasparenti.
- Interazione: click su una particella per leggere le proprietà e mostrare una scheda laterale.
I passaggi del tutorial
1. Preparare il GeoJSON. Un file comunale pesa pochi MB se già ottimizzato per il web. Se avete un GeoPackage, convertitelo in GeoJSON con ogr2ogr o con il plugin QGIS di Zornade. Verificate sempre la proiezione: il layer deve essere in EPSG:4326 per allinearsi alla basemap.
2. Montare MapLibre in React. Installate il pacchetto maplibre-gl e create un componente Mappa che inizializza la mappa in un contenitore con altezza fissa. L'inizializzazione va fatta una sola volta, in un effetto, e la mappa va distrutta allo smontaggio del componente.
3. Caricare il layer. Due strade: caricare il GeoJSON come file statico accanto all'applicazione, oppure servirlo da un endpoint. Per comuni grandi conviene la seconda, con cache e compressione. Il layer si aggiunge con una sorgente di tipo geojson e un layer fill con colore di contorno leggero.
4. Gestire il click. All'evento click si leggono le proprietà della feature colpita e si aggiorna lo stato React. Da qui parte la scheda laterale con foglio, particella, subalterno e i dati arricchiti.
5. Performance. Per centinaia di migliaia di particelle, il GeoJSON grezzo inizia a pesare: si passa alle tile vettoriali (protobuf) o al servizio di layer già ottimizzato. I nostri dataset per città sono pensati per il rendering web diretto, con geometrie già semplificate dove serve.
Le trappole classiche
- Dimenticare la proiezione e ritrovarsi il comune in mezzo all'oceano
- Caricare il GeoJSON a ogni render del componente React, rifacendo la richiesta di rete a ogni stato
- Non gestire il cleanup della mappa, con leak di listener e doppie istanze
- Layer fill con opacità piena che nasconde la basemap: le particelle vanno riempite al 20-30%
FAQ
MapLibre è gratuito?
Sì, è open source con licenza BSD. È il sostituto diretto di Mapbox GL JS v2, di cui è il fork di riferimento.
Dove trovo le particelle in GeoJSON?
Nei dataset gratuiti di Zornade: particelle per comune in GeoJSON e GeoPackage, con licenza aperta e download senza registrazione.
Serve un backend GIS?
Per un layer statico no: basta un file GeoJSON servito con cache. Serve un backend quando servono query spaziali, aggiornamenti frequenti o volumi nazionali.
Come si gestiscono i dati nazionali?
Con tile vettoriali o un'API: caricare 85 milioni di particelle come unico GeoJSON non è un'opzione.
Devi costruire un prodotto con layer catastali? Parliamo di architettura e dati: prima valutazione tecnica gratuita.