OpenStreetMap e OpenLayers: che coppia!

OpenStreetMap è un progetto collaborativo per la creazione di mappe, OpenLayers è una libreria javascript. Cosa hanno in comune?

Possiamo dire che OpenStreetMap sta a OpenLayers come il carburante sta ad un'auto: singolarmente presi non servono a molto, ma insieme... ne fanno di strada!

Per capire come far interagire questi due strumenti introduciamo prima brevemente OpenStreetMap (se ce ne fosse bisogno...) e poi vediamo come OpenLayers si interfaccia con OpenStreetMap.

Cos'è OpenStreeMap

OpenStreetMap è una comunità il cui scopo è creare mappe.

Brutalmente possiamo dire che OpenStreetMap è un grande database di dati geografici con due caratteristiche:

le mappe sono messe a disposizione di tutti senza vincoli di tipo commerciale, ma con una licenza che ne garantisce la ridistribuibilità
tutti possono contribuire a modificare le mappe correggendole o integrandole

E' possibile interfacciarsi in vari modi a questo database. Il primo che viene in mente è tramite l'impiego di interfacce web. Ed ecco dove interviene OpenLayers.

Cos'è OpenLayers

OpenLayers è una libreria javascript rilasciata con licenza opensource, con cui è possibile visualizzare mappe provenienti da più fonti. OpenLayers quindi non si interfaccia solo con OpenStreetMap, ma anche con altre mappe quali Google Maps o MapQuest.

La versione più recente della libreria è la 3, le cui API sono profondamente diverse da quelle delle versioni precedenti. In rete troverete molti documenti ed esempi della versione 2, comunque disponibile in download dal sito ufficiale. La prima differenza che noterete tra la versione 2 e la 3 è nella classe principale, che nella 2 è OpenLayers, nella 3 è ol. Nel seguito useremo la versione più recente.

OpenLayers si basa sul concetto di livelli (classe ol.layer) sovrapponibili. Ciascun livello contiene informazioni di tipo geografico che è possibile sovrapporre in base alle specifiche esigenze.

Vediamoli all'opera

Vedremo ora un esempio applicativo. Da strutturista incallito ;-) mi sono chiesto quanto poteva essere complesso creare un'applicazione web che permettesse di calcolare in un punto preso su una cartina i parametri che definiscono la pericolosità sismica secondo le NTC08.

Una breve digressione per quelli di voi poco avvezzi alle complicazioni del calcolo strutturale. Il D.M. 14/1/2008 definisce i valori di una serie di parametri su alcuni punti del territorio nazionale disposti lungo una griglia. Se non si lavora su uno dei punti della griglia, è necessario effettuare un interpolazione tra i valori nei quattro estremi del reticolo in cui cade il punto interessato.

Creeremo allora una mappa su cui potremo spostare un segnalibro. Scelta la posizione del segnalibro, cliccando su un bottone otterremo il valore dei tre parametri cercati.

Prima di tutto scarichiamo la libreria OpenLayers al link openlayers.org/download/.

Nello header del file HTML carichiamo i file necessari

Possiamo quindi passare al codice javascript vero e proprio.

Come anticipato, con le librerie OpenLayers i dati geografici vengono rappresentati con layer sovrapponibili. Perciò per prima cosa creeremo un layer su cui caricheremo i dati presi da OpenStreetMap

var osmLayer = new ol.layer.Tile({
     title: 'OpenStreetMap',
     source: new ol.source.OSM()
   });

Creiamo quindi una mappa inserendo il layer appena creato e impostando una vista centrata sulle coordinate di Roma.

var map = new ol.Map({
     target: 'map',
     layers: [ osmLayer ],
     view: new ol.View({
       center: ol.proj.transform([12.416667, 41.9], 'EPSG:4326', 'EPSG:3857'),
       zoom: 6
     })
   });

Aggiungiamo nel body un oggetto div, agganciato all'oggetto mappa creato in precedenza.

Verificando il codice appena visto vedremo una mappa dell'Italia. Rimane da aggiungere il segnalibro. Per farlo usiamo il codice

var iconMarkerFeature=[];
var iconMarker = new ol.Feature({
     geometry: new ol.geom.Point(ol.proj.transform([12.416667, 41.9], 'EPSG:4326','EPSG:3857'))
   });
iconMarkerFeature.push(iconMarker);
var vectorMarkerSource = new ol.source.Vector({
     features: iconMarkerFeature
   });

Per usare l'oggetto appena creato lo inseriamo in un layer dopo aver definito uno stile

var iconMarkerStyle = new ol.style.Style({
     image: new ol.style.Icon( {
       anchor: [0.5, 1.0],
       anchorXUnits: 'fraction',
       anchorYUnits: 'fraction',
       opacity: 0.75,
       src: '<percorso>/marker.png'
     })
   });
var markerLayer = new ol.layer.Vector({
     source: vectorMarkerSource,
     style: iconMarkerStyle
   });

Inseriamo questo codice prima di quello con cui creiamo l'oggetto map. Inoltre modifichiamo quest'ultimo aggiungendo il layer markerLayer appena creato

layers: [ osmLayer, markerLayer ],

Infine dobbiamo fare in modo che il segnalibro possa essere spostato dall'utente, per farlo dobbiamo aggiungere un oggetto ol.interaction.Modify

var dragInteraction = new ol.interaction.Modify({
     features: new ol.Collection([iconMarker]),
     style: iconMarkerStyle,
     pixelTolerance: 25
   });

che andremo ad aggiungere alla mappa con il comando

map.addInteraction( dragInteraction );

Trovate qui il riassunto dei passaggi visti finora. Visualizzando il codice sorgente della pagina potrete analizzare il relativo codice nel dettaglio. Tenendo premuto il puntatore del mouse sul segnalibro potrete spostarlo a piacimento nella mappa.

Il risultato finale

Le peculiarità di utilizzo di OpenLayers sono state già introdotte. Per portare a termine il nostro esempio è necessario un po' di codice HTML per l'inserimento dei dati ed un po' di javascript per la loro elaborazione.

Sorvolando su tali dettagli (che immagino interessino a pochi...), ecco a voi il risultato finale

TR:

ag: F0: TC:

Longitudine: Latitudine:

TL Id: TL Longitudine: TL Latitudine:

TR Id: TR Longitudine: TR Latitudine:

BL Id: BL Longitudine: BL Latitudine:

BR Id: BR Longitudine: BR Latitudine:

Cliccando sull'icona in alto a destra vedrete che ho aggiunto la possibilità di scegliere la cartografia di base da visualizzare scegliendo tra tre opzioni. Per aggiungere questa funzionalità nella versione 2 delle Openlayers era disponibile una classe apposita. Con la versione 3 è necessario caricare codice esterno alla libreria. Nell'esempio ho usato

LayerSwitcher

Risorse

Eccovi alcuni link utili per approfondire l'uso delle librerie OpenLayers:

Post Scriptum

Ai fini del calcolo dello spettro di risposta, l'applicazione di esempio riportata contiene alcune semplificazioni che in alcuni casi determinano delle inesattezze. Essendo l'articolo finalizzato a presentare OpenLayers non mi è sembrato il caso di appesantire inutilmente il codice. Se invece avete bisogno di un calcolo rigoroso dello spettro di risposta, vi rimando a questa pagina in cui troverete un calcolo come si deve ;-).

Tags: javascript, openlayers, openstreetmap

Autore: Michele Mocciola

Data creazione: 2015-11-29

Data ultima modifica: 2016-03-09