GeoJSON, una guida all’uso

Un esempio della provincia di Crotone
Un esempio della provincia di Crotone

Ormai non posso più nascondere la mia passione per mappe e cartine. Più mi avventuro in questo mondo, più scopro un’infinità di strumenti e progetti che mi permettono di creare mappe tematiche e gestire i dati (anche grandi quantità) in maniera decisamente semplice.

A tal proposito, c’è da parlare di un tipo di file che ci aiuta nelle nostre composizioni e creazioni, ossia i GeoJSON. E’ grazie a questa tecnologia infatti che, da qualche anno a questa parte, vedete tutta una serie di mappe tematiche colorate (come quella nell’immagine affianco) che ci informano di questo o quel dato in modo molto più semplice e intuitivo rispetto alle classiche tabelle.

In sostanza, tramite GeoJSON siamo in grado di sovrapporre dei vettori su una mappa. Che siano punti, linee o poligoni, saremo letteralmente in grado di disegnare quello che vogliamo. Come riferimento, useremo solo le coordinate GPS, univoche ed universali.

Vediamo qualche esempio.

Innanzitutto, partiamo col dire che, se non l’avessimo ancora capito, parliamo di javascript. Il GeoJSON nasce nel 2007 con l’intento di permettere, con un formato open, di condividere informazioni cartografiche. Che siano punti (come nomi di città, ma anche punti d’interesse e così via), linee (strade, ferrovie, confini ecc.) o poligoni (edifici, aree ecc.), tramite GeoJSON siamo in grado di renderli graficamente al di sopra di una mappa. Che si tratti di una mappa aerea (come Google Maps) o di una mappa di dati (come OpenStreetMap) poco importa, dato che il sistema utilizza come riferimento i punti GPS, e ci permette dunque una rappresentazione uguale ed univoca in ogni mappa in cui andremo a sovrapporre il file. Un grande punto di forza.

Un’altro vantaggio deriva dal margine di utilizzo. I poligoni, infatti, non sono vincolati a dover rappresentare qualcosa di fisico. Questo ci permette di creare, ad esempio, mappe come quella di OpenSignal, che mostrano la copertura di servizio delle reti telefoniche. O ancora, mappe come quelle di alcuni servizi basati su più nodi (si pensi a Ninux ad esempio), per mostrare i collegamenti virtuali tra più macchine. O mappe che indicano solo determinati punti e/o avvenimenti (come quella che ci informa degli ultimi terremoti). O, più semplicemente, mappe che mostrano le rotte delle navi o degli aerei, che non sono definiti da strade in cemento ma da punti inindividuabili se non tramite GPS. Insomma, numerosi utilizzi, dato che possiamo semplicemente disegnare quello che vogliamo su una mappa.

La sintassi di un file GeoJSON è anche molto semplice:

{
    "type": "Point", 
    "coordinates": [17.118072509765625, 39.08210619353512]
}

In questo caso stiamo definendo un punto su una mappa, grossomodo nell’area di Crotone. Sono diversi gli attributi che possiamo assegnare al campo type, come ad esempio una linea:

{
    "type": "LineString", 
    "coordinates": [
        [17.118072509765625, 39.08210619353512],
        [16.5838623046875, 38.90385833966776] ] 
}

Che in questo caso collega vettorialmente Crotone e Catanzaro. O ancora, per completare l’esempio iniziale, un poligono:

{
    "type": "Polygon", 
    "coordinates": [
        [[17.118072509765625, 39.08210619353512], 
         [16.5838623046875, 38.90385833966776], 
         [16.2432861328125, 39.31198794598777]] 
] 

}

Ossia, un triangolo che comprende Crotone, Catanzaro e Cosenza. Sono tuttavia possibili ulteriori rappresentazioni, come ad esempio i multipunti, tramite l’attributo MultiPoint,  o le MultiLineString, che ci permettono di creare più linee non parallele, utili ad esempio per indicare la direzione reale e quella ottimale di un segnale/traliccio/strada in un unica definizione.

Quelli mostrati sopra sono le definizioni grezze. Ovviamente, possiamo aggiungere molti più tag al nostro punto/vettore/poligono. Nel dettaglio:

{
  "type": "FeatureCollection",
  "name": "Piazze",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [17.127079367637634, 39.08067789492716]
      },
      "properties": {
        "name": "Piazza Pitagora"
      }
    }

Così si presenta un file GeoJSON scritto in maniera corretta, sebbene ci siano ancora ulteriori tag utilizzabili. Il gruppo FeatureCollection indica un gruppo di elementi, un’insieme. Nel mio caso ho pensato alle piazze, ma magari può essere usato per le fontane, i punti panoramici, le pompe di sollevamento o le cabine elettriche. Anche in questo caso, svariati utilizzi.

Inoltre, è possibile utilizzare questo formato assieme al CSS. Infatti, è possibile sia definire uno stile all’interno della feature sia agganciarsi ad una classe CSS definita in un altro file. Riprendendo il triangolo tra KR-CZ-CS, ci basterebbe aggiungere questo alla fine del file:

"style":{
      "fill":"red",
      "stroke-width":"3",
      "fill-opacity":0.6
  }

In questo modo, oltre a creare il poligono, gli definiremo un colore (rosso), uno spessore dei bordi ed un’opacità. Se pensiamo di usare una mappa come quella dell’immagine iniziale, possiamo pensare a degli stili predefiniti.

Una volta scritto il nostro file, ci basta salvarlo con estensione .json o .geojson, e quindi caricarlo sul nostro host/server per fare tutte le prove che vogliamo. Si possono creare un sacco di cose interessanti, come il file con i confini comunali della propria provincia. Come fare? Oltre alle numerose opzioni di export tramite OSM, possiamo usare il comodissimo GeoJSON.io, un sito che ci permette di creare un file da zero, oppure di modicare il nostro codice affinché risulti più accurato (e vedere nel mentre le modifiche). Per creare grandi poligoni, se non si sa come esportare i dati, si può quindi ricorrere al sito, che ci permette di disegnare liberamente sulla mappa.

Insomma, alla fine dei conti l’approcio è facile e l’utilizzo pure. Pensate a quante mappe personalizzate potete creare in questo modo, totalmente indipendenti da altri servizi. Semplicemente bello. Ovviamente, ve ne consiglio l’utilizzo sopratutto se accoppiato ad OpenStreetMap. In questo modo, contribuirete anche ad una mappatura reale di un territorio, cosa non da poco 😉