Creare una semplice mappa web geologica con Leaflet

Leaflet è una libreria Javascript che permette di creare e visualizzare mappe interattive, sia su desktop sia in dispositivi mobili. Dal punto di vista dell'utente, un suo aspetto apprezzabile è una buona velocità di caricamento e navigazione. Per gli sviluppatori è importante la sua facilità di sviluppo di mappe.

Leaflet permette di visualizzare dati sulla base cartografica OpenStreetMap. Possiamo utilizzare dati WMS e geoJASON. GeoJSON è un formato vettoriale, testuale, che può essere letto direttamente da Javascript. File GeoJSON possono essere creati a partire per esempio da shapefile con strumenti come OGR, che è disponibile in FWTools.

In questo post consideriamo come esempio la creazione di una mappa web della geologia di una zona in Umbria (Valnerina). In questa mappa è possibile avere informazioni sulle formazioni geologiche e visualizzare due sezioni geologiche associate alle loro tracce in mappa.

Quello che descriverò sono solo alcuni aspetti della creazione della mappa. La documentazione completa e gli esempi di Leaflet sono disponibili nel sito di Leaflet: http://leaflet.cloudmade.com.
Il codice sorgente della mappa può essere visualizzato dalla URL http://www.malg.eu/webmaps/leaflet_test/ll_01.html. La mappa è  stata testata su versioni Win recenti di Chrome, Firefox, Opera, Safari e IE (9). L'immagine sottostante rappresenta un esempio di schermata .

Passi preliminari

Carichiamo la libreria Leaflet sul server nel quale vogliamo creare la nostra mappa. Registriamoci come utente Leaflet presso CloudMade e richiediamo una API key per la nostra mappa web.

Configurazioni della pagina html

La API key viene incorporata nella linea di codice html che definisce la URL di collegamento a CloudMade:

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png'

Colleghiamo la libreria Leaflet all'interno della pagina web che creiamo, nel suo head:

<link href="../../Leaflet/leaflet.css" rel="stylesheet"></link>
<!--[if lte IE 9]><link rel="stylesheet" href="../../Leaflet/leaflet.ie.css" /><![endif]-->

La seconda linea di codice è necessaria per far sì che la mappa web sia visualizzata anche in IE (io ho testato solo con la versione 9).

La struttura della pagina è ispirata a quella di http://kothic.org/js/ nella parte che riguarda la legenda.

Creazione del livello geologico

In questo esempio considereremo dati della geologia di una zona della Valnerina (Umbria). E' una mappa geologica che deriva dai dati di terreno che ho raccolto nel corso della mia tesi di dottorato in geologia strutturale. Questi dati sono in formato shapefile poligonale, in coordinate geografiche (cioè non proiettati in UTM e simili). Vengono convertiti in formato geoJSON con OGR, utilizzando FWTools con il comando ogr2ogr, per esempio:

ogr2ogr -f "GeoJSON" geologia.js geologia_geogr.shp geologia_geogr

Apriamo il file in formato JSON appena creato e aggiungiamo al suo inizio la definizione della variabile (evidenziata in giallo) che conserva i dati geologici:

var geologia = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "AREA": 20906.211000, "PERIMETER": 791.990000, "GEOL_CL_": 4.000000, "GEOL_CL_ID": 0.000000, "FORMATION": "Scaglia Rossa" }, "geometry": { "type": " ....

Questo file geoJSON deve essere collegato alla pagina web che crea la mappa, incorporandone il riferimento nell'head del file html:

<script src="geologia.js" language="javascript"></script>

Dopo questo passo, si può editare la pagina html, inserendo tutte le funzioni in uno script Javascript inserito o collegato nell'head della pagina.

La variabile Javascript che rappresenta i dati geologici viene richiamata nel codice Javascript che definisce la mappa, facendole creare l'oggetto geoJSON (evidenziata in giallo). Lo stile del livello viene definito attraverso la variabile formation_colors (in verde).

var geojson = new L.GeoJSON();
geojson.on('featureparse', function(e) {
// you can style features depending on their properties, etc.
var popupText = 'Formazione: ' + e.properties.FORMATION + <br \>;
if (e.layer instanceof L.Polygon) {
e.layer.setStyle({color: 'gray', weight: 1, fillColor: formation_colors[e.properties.FORMATION]});
}
e.layer.bindPopup(popupText);
});

geojson.addGeoJSON(geologia);
map.addLayer(geojson);

Nel codice sovrastante viene anche definito il contenuto di una finestra di poup che si attiva al click su ogni poligono del livello, oltre allo stile di rappresentazione  delle formazioni geologiche. Quest'ultimo si basa sulla proprietà FORMATION (e.properties.FORMATION) definita nel file geologia.js per ogni poligono, e su una 'colormap' che assegna un colore ad ogni formazione geologica:

var formation_colors = {
'Depositi fluviali':'#cFF',
'Depositi quaternari':'#cCF',
'Bisciaro':'#Fc6',
'Scaglia Cinerea':'#Fcc',
'Scaglia Variegata':'#0cc',
'Scaglia Rossa':'#3c6',
'Scaglia Bianca':'#cc0',
'Marne a Fucoidi':'#c06',
'Maiolica':'#063',
'Calcari Diasprini': '#309'
}

Definizione delle tracce delle sezioni

L'ultimo aspetto che descrivo è la creazione delle due sezioni geologiche. Il codice relativo alla prima delle due sezioni è:

var p1 = new L.LatLng(42.76554, 12.79581);
var p2 = new L.LatLng(42.83028, 12.91872);
var section_a = [p1, p2];
var sezione_a = new L.Polyline(section_a, {weight: 1, color: 'blue', opacity: 0.5});
map.addLayer(sezione_a);
sezione_a.bindPopup("<img style='width: 600px;' src='ims/sezione_a.jpg' alt='sezione A' />", {maxWidth: 650});

Vengono creati due punti con le coordinate geografiche che corrispondono agli estremi della sezione. Questi due punti vanno a creare una lista, la quale serve da base per la creazione di una Polyline, che viene aggiunta alla mappa e alla quale viene collegato un popup, con la funzione bindPopup, che apre una immagine che rappresenta la sezione specifica. E' opportuno definire la maxWidth della finestra di popup in maniera tale che contenga completamente l'immagine collegata.