map tile server

Visualizzare mappe-base di un tile provider con OpenLayers

Per visualizzare dei dati geografici ci si appoggia quasi sempre ad una mappa-base (basemap) che faccia da sfondo, a volte anche a più di una. Possiamo usare una qualunque immagine raster che abbiamo disponibile come file in locale, oppure usare una delle miriadi di mappe oggi disponibili sul web, che vengono fornite da server (di mappe) pubblici. Vediamo allora come possiamo collegarci a questi server con OpenLayers e visualizzare le mappe che essi ci offrono.

Si deve soprattutto alla diffusione di OpenStreetMap (OSM) la disponibilità di servizi di mappe fornite sul web in modo gratuito ma rispettando le condizioni d’uso che i rispettivi enti fornitori (providers) impongono.

Abbiamo innanzitutto le mappe fornite dai server di OSM stesso e poi altre organizzazioni che nel tempo hanno cominciato a fornire gratuitamente delle loro mappe; queste si  possono distinguere in due grosse categorie:

  • quelle che partono dai dati di OSM e poi realizzano delle mappe rappresentate graficamente (tematizzate) con degli stili personalizzati,  in alcuni casi anche aggiungendo altri dati geografici che riguardano degli aspetti particolari (per es. bike, outdoor, trasporti, .. etc); per esempio appartengono a questo gruppo  Stamen e ThunderForest.
  • quelle che creano e pubblicano delle loro mappe indipendentemente da OSM; tra queste ricordiamo per esempio: ESRI (ArcGis online), Bing ed Here.

Stamen maps

Su wiki.openstreetmap c’è questa pagina List of OSM-based services in cui trovate elencati quasi tutti i servizi di mappa basati su OSM con varie informazioni, tra cui se ne è consentito l’uso libero oppure no.

Sempre rimanendo nell’ambito dei provider che forniscono un servizio non a pagamento, si possono distinguere:

  • servizi accessibili in modo “anomino” come per esempio le mappe di OSM e di Stamen;
  • servizi accessibili tramite “credenziali” d’accesso (API key, ID user, token … etc) che si possono acquisire previa registrazione sul sito dei rispettivi provider; per esempio questo è il caso di ThunderForestBing.

Come vedremo la differenza, consiste appunto nel configurare o meno l’accesso alla mappa, immettendo, oltre all’ URL del servizio,  anche queste credenziali; altrimenti la mappa richiesta non viene visualizzata.

In ogni caso, come accennato prima, a prescindere dal fatto che siano servizi accessibili in modo anonimo o no, accertatevi sempre di quali siano le condizioni d’uso (o tipo di licenza) che impongono i rispettivi provider, soprattutto quando le mappe vi servono in  applicazioni per scopi commerciali.

Altra cautela è quella di indicare sempre l’attribution della mappa,  cioè quella dicitura con informazioni sul provider della mappa (ed eventuali altri creatori) ed il tipo di licenza d’uso, visualizzata solitamente in basso a destra nel quadro della vista mappa.

map attribution

Tiled web map

Tutte queste mappe disponibili sul web, sono delle immagini (raster) composte da tiles (letteralmente traducibile in “piastrelle”); si tratta di immagini, quasi sempre in formato PNG, di dimensioni fisse 256×256 pixel che in un grigliato, compongono la mappa complessiva da visualizzare.

Senza scendere in dettagli, queste tiles vengono salvate in cache per velocizzare la visualizzazione della mappa sulla pagina web (ci sono due strategie di caching: pro-actively e on-demand) e ce ne sono diverse a secondo del livello di zoom da rappresentare: ogni livello di zoom è composto da una diversa raccolta di tiles della stessa mappa. Quindi a parità dell’estensione geografica rappresentata, quanto più è alto il livello di zoom, tante di più sono le tiles che compongono la mappa.

tiles livelli zoom

Le tiles di una mappa  possono essere individuate in due modi:

  • con il formato XYZ, nel linguaggio OSM è anche noto come formato slippy map;
  • con il formato TMS (Tile Map Service) che è una specifica dell’ OSGeo;

entrambi  identificano le tiles di una mappa con URL del tipo: http://<nome tile server>/…/z/x/y.png dove:

  • z indica il livello di zoom (da 0 a 19);
  • x e y sono le coordinate delle tiles nel grigliato che compone la mappa;

ma il modo di determinare x e y  è diverso; per il range di coordinate (-180, +85.0511) – (+180, -85.0511) abbiamo che:

  • col formato XYZ, x varia da 0 a 2zoom-1 e y da 0 a 2zoom-1;
  • col formato TMS, x varia da 0 a 2zoom-1 e y da 2zoom-1 a 0;

Lasciamo perdere come si calcolano le (x, y) delle tiles nei due casi, ma sappiate che ad oggi il formato più diffuso è l’ XYZ (lo usano tutti i principali provider: OSM, Google, Bing, … etc) mentre il formato TMS è supportato da pochissimi server.
Vi segnalo questo sito molto interessante: Tiles à la Google Maps,  nel quale sono mostrate le coordinate delle tiles in cui è suddiviso l’intero globo, al variare del livello di zoom, sia per il formato XYZ (che viene indicato come Google) che per il formato TMS.

A titolo di esempio, la seguente figura mostra come sono numerate quattro tiles contigue (mappa standard di OSM) per il livello zoom=9:

OSM tiles zoom=9

e questi sono i rispettivi URL:

http://a.tile.openstreetmap.org/9/277/190.png   http://a.tile.openstreetmap.org/9/278/190.png
http://a.tile.openstreetmap.org/9/277/191.png   http://a.tile.openstreetmap.org/9/278/191.png

potete fare la prova a scriverli nel vostro browser e per ognuno vi verrà restituita un immagine PNG (il singolo tile).

URL template

Quando dobbiamo leggere tutti i tiles per una certa estensione geografica di una mappa, ovviamente non usiamo degli URL come quelli di prima (singoli tiles) ma uno generale che li identifichi tutti in modo parametrico. Sarà poi il web client, nel nostro caso OpenLayers, che dato questo URL generale, saprà quali tiles scaricare per comporre la mappa, per la data estensione e per il dato livello di zoom.

Gli URL di questo tipo sono un pò differenti da quelli tradizionali, per la presenza di cosiddetti placeholders: si tratta di parametri indicati tra {..} che di volta in volta verranno sostituiti, a cura del web client, dai valori che identificano la mappa ed i tiles. Questi sono detti URL template e i rispettivi provider li rendono noti per consentire di scaricare le loro mappe. Ecco alcuni esempi:

Notate che il numero e il tipo di placeholders può variare; abbiamo sempre {z}/{x}/{y} che servono per indicare il livello di zoom e la posizione (x, y) delle tiles; alcune volte (vedi il caso della mappa di OpenMapSurfer.NET) questi sono scritti nella forma x={x}&y={y}&z={z}.

Ma ce ne possono essere pure altri. Per esempio spesso compaiono placeholders del tipo {a-c} o {s} che servono per indicare i cosiddetti sub-domains del server; quando è indicato vuol dire che,  per velocizzare il caricamento delle tiles, il browser può interrogare i diversi sub-domains  in contemporanea.

Altri possibili placeholders, sono quelli come {ext} o {format} che servono per indicare il formato immagine (png, jpg, .. etc) delle tiles.

E poi abbiamo tutti quei casi in cui la mappa non può essere acceduta in modo anonimo, ma è richiesto di avere un API key, token, app_id o cose simili; questi vengono indicati nell’URL template con appositi placeholders. Nel precedente elenco, vedi per esempio il caso delle mappe di MapBox e HERE.

Capito come è fatto un URL template,  dobbiamo preoccuparci solamente di reperirlo (dal sito del provider o da alcuni elenchi presenti nel web) e andarlo a scrivere tra i parametri del costruttore ol.source.XYZ(..) che useremo per connetterci al tile server, come vedremo tra un pò.

ol.layer.Tile

La classe  di OL per definire un layer raster composto da tiles è ol.layer.Tileper i vettori esiste una corrispondente classe ol.layer.VectorTile, ma qui non ci interessa. Il parametro fondamentale per definire un tile layer è source, nel quale si indica qual’è la sorgente dei tiles. Altri parametri spesso usati sono:

  • opacity: un valore compreso tra 0 e 1  per impostare il grado di trasparenza del layer; 0 è totalmente trasparente, 1 è totalmente opaco (valore di default),
  • preload: è un numero per indicare che livello di precaricamento dei tiles a bassa risoluzione del layer si vuole impostare; il precaricamento è utile per rendere più veloce la sua visualizzazione quando si zoomma o si sposta la mappa; di default è 0 (nessun precaricamento).
  • visible: indica se il layer è inizialmente visibile nella vista-mappa oppure no; il valore di default è true (visibile);
  • extent: sono le coordinate del bounding-box che delimita la porzione di layer che si vuole visualizzare; se non viene specificato si intende l’intera estensione del layer.
  • minResolution: il valore di risoluzione(*) minimo, al di sotto del quale il layer non è più visibile;
  • maxResolution: il valore di risoluzione(*) massimo, al di sopra del quale il layer non è più visibile;

(*) risoluzione: è il numero di unità di mappa per pixel, quindi, per capirci, è tanto più grande quanto più i piccolo il livello di zoom; la massima risoluzione di una mappa è quella in corrispondenza del livello 0 dello zoom.

ol.source.XYZ

Questa è la classe principale per definire una sorgente-dati fornita da un tile server in formato XYZ; il suo parametro fondamentale è url che appunto serve per specificare l’ URL template della mappa; ecco un semplice esempio in cui si definisce un layer usando come source con una mappa del provider ThunderForest:

notare anche la presenza del parametro attributions che, pur non essendo obbligatorio, è auspicabile sia sempre indicato per dichiarare chi è il fornitore della mappa, altri eventuali contributors e le condizioni d’uso (per es. licenze Creative Commons).

Nel caso in cui il tile server lavora con più sub-domains, una variante consiste nell’indicare singolarmente in un array, tutti gli URL che forniscono i tiles della mappa; in questo caso invece di url, si usa il parametro urls:

Qui potete vedere un esempio completo con i due tipi di indicazione degli URL.

Altri parametri del costruttore ol.source.XYZ usati comunemente sono:

  • maxZoom: il massimo livello di zoom per il quale sono state predisposte delle tiles; il valore di default è 18;
  • minZoom: il minimo livello di zoom per il quale sono state predisposte delle tiles; il valore di default è 0;
  • projection: per indicare qual’è il sistema di proiezione della mappa; comunque è un parametro usato molto raramente, perché quasi tutte le mappe in formato XYZ sono distribuite col SR di default, cioè il WGS 84/Spherical Mercator (EPSG: 3857).

Una precisazione sull’uso dei parametri maxZoom e minZoom; essi vanno usati quando delle mappe non prevedono delle tiles oltre un certo livello di zoom (minimo o massimo) per consentire lo stesso il rendering grafico della mappa ingrandendo/riducendo l’ultimo tileset disponibile. Mi spiego meglio con un esempio: se una certa mappa prevede tiles fino al livello di zoom 12, vuol dire che incrementando oltre lo zoom:

  • se non imposto nulla,  la mappa scompare;
  • se imposto maxZoom: 12, la mappa viene ugualmente renderizzata ingrandendo i tiles del livello 12;

ovviamente un discorso analogo vale anche per il minZoom.

Per la documentazione completa di ol.source.XYZ compresi i suoi metodi, potete guardare la relativa pagina delle API.

Nonostante ol.source.XYZ  possa essere usato per tutti i servizi di mappa che usano il formato XYZ, sono state previste tre sotto-classi dedicate esplicitamente per le mappe di OSM, Stamen e CartoDB; vediamole.

ol.source.OSM e ol.source.Stamen

Il costruttore ol.source.OSM si connette direttamente alla mappa standard (o realizzazione Mapnik) di OSM, senza bisogno di specificare nessun URL; ovvero viene usato di default l’URL https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png

non c’è neanche bisogno di specificare le attributions perchè vengono automaticamente indicate quelle di OSM. Nulla vieta di leggere le mappe di OSM,  usando ancora la classe generale ol.source.XYZ; cioè il codice precedente equivale a:

Comunque per consentire di visualizzare altre mappe di OSM oltre a quella standard, anche la classe ol.source.OSM prevede i parametri url ed attributions. Per esempio per usare la mappa di OSM in stile HOT (Humanitarian OpenStreetMap Team), il codice è il seguente:

OSM tileset

Stamen è un studio grafico di San Francisco che partendo dai dati di OSM realizza delle mappe tematizzate; quelle pubbliche sono state raggruppate in tre tileset: toner, terrain e watercolor; in realtà l’ultimo gruppo ha un solo tipo (stile) di mappa, mentre gli altri due prevedono i seguenti:

Stamen toner e terrain

Con ol.source.Stamen è possibile identificare queste mappe col parametro layer che quindi  può assumere i seguenti valori:

  • toner, toner-background, toner-hybrid, toner-labels, toner-lines, toner-lite;
  • terrain, terrain-background, terrain-labels, terrain-lines;
  • watercolor

Il parametro attributions non è previsto e automaticamente vengono caricate quelle di Stamen. Anche se le mappe si identificano con “layer”,  tuttavia è ancora presente il parametro url per indicare altri eventuali varianti di stile.

Stamen tilesets

ol.source.CartoDB

Questo costruttore è diverso dai precedenti, perchè non serve esattamente per ricevere le mappe-base pubbliche prodotte dal progetto CartoDB; queste infatti si accedono sempre usando la classe generale ol.source.XYZ con i seguenti indirizzi:

  • https://cartodb-basemaps-{s}.global.ssl.fastly.net/{style}/{z}/{x}/{y}.png
  • http://{s}.api.cartocdn.com/{basemap_id}/{z}/{x}/{y}.png

dove i placeholders e {style}{basemap_id} permettono di scegliere il particolare tipo (stile grafico) di mappa; i valori possibili sono i seguenti:

CartoDB basemaps

per esempio:

E allora a cosa serve  ol.source.CartoDB?
CartoDB, oggi diventata Carto (www.carto.com), è una nota piattaforma di cloud computing che offre vari servizi tra cui la realizzazione di mappe web e funzioni di analisi spaziale ; un utente può registrarsi (esiste un profilo gratuito ed altri a pagamento), creare le sue mappe e poi utilizzarle come vuole.

Tramite le API di CartoDB  si possono realizzare delle mappe adoperando i geodati memorizzati nel proprio account CartoDB; in particolare si usano delle query SQL per recuperare e manipolare i dati e il linguaggio CartoCSS per definirne l’aspetto grafico.

CartoDB non fornisce pero l’applicazione client per visualizzare tali mappe sul web ed uno dei modi per farlo è proprio con OpenLayers  tramite ol.source.CartoDB.
Tra i suoi parametri fondamentali ci sono: “account” per identificare i dati dell’utente su CartoDB, “config” per impostare la configurazione d’uso nel caso di mappe anonime, “map” per identificare la mappa nel caso di mappe con nome.
Ma visto che in questo articolo ci stiamo occupando delle basemaps pubbliche, qui non approfondiamo oltre.

ol.source.BingMaps

Microsoft Bing è un altro importante provider di tileset per mappe di base; il loro uso richiede però di essere degli utenti registrati a cui viene rilasciata un API key (dovete andare sul sito www.bingmapsportal.com). Naturalmente potete usare queste mappe alle condizioni imposte da Microsoft (Bing maps licensing options) che prevede anche una possibilità di uso gratuito (cercare: free term of use).

Essendo personalmente un sostenitore dell’ open source, evito di usare mappe come queste e non voglio incoraggiarne l’uso; però OL ha previsto una classe apposita per riceverle e poi ognuno è libero di scegliere in autonomia cosa fare, pertanto ne parlo.

Con la classe ol.source.BingMaps potete visualizzare nella vostra applicazione le mappe di Bing senza bisogno di usare un URL; queste infatti sono individuate dal parametro imagerySet che può assumere i seguenti valori:

  • Aerial: vista satellitare;
  • AerialwithLabels: vista satellitare con etichette;
  • Road: cartina con rete stradale;

l’altro parametro obbligatorio per poter visualizzare queste mappe è appunto la vostra key. Non è previsto il parametro attributions perchè vengono automaticamente visualizzate quelle di Bing. Ecco qui un esempio di codice:

Provider e URLs

Come abbiamo visto, caricare delle mappe fornite da un qualunque provider è molto semplice; se si tratta di tiles nel formato XYZ (che è quello più diffuso) potete sempre usare il costruttore ol.source.XYZ; la sola condizione necessaria per poterlo fare è conoscere l’ URL template della mappa.

E qui scatta quasi sempre la domanda di rito: “esiste un elenco con gli URL di tutte le mappe pubbliche disponibili?” …. la risposta è ovviamente NO! O meglio esistono dei siti che hanno creato degli elenchi, ma sono tutti non esaustivi e a volte non aggiornati, perchè ovviamente tanti servizi di mappa nel tempo cambiano: alcuni scompaiono ed altri nuovi compaiono. Qui di seguito ve ne indico qualcuno:

Insomma già ve ne ho indicati abbastanza e credo che ci siano stili di mappe per tutti i gusti, a meno che non vi vogliate creare le vostre personali, usando servizi come MapBox e CartoDB.

In ogni caso per agevolarvi, ho realizzato anch’io una semplice applicazione OL, in cui ho raccolto tutte le principali basemaps pubbliche oggi disponibili, tra cui tutte quelle che sono state menzionate in questo articolo, raggruppate per provider.

basemaps preview

Attenzione che alcune richiedono un account ed io ho usato il mio, quindi per usarle dovete prima registrarvi sul sito del rispettivo provider. Oltre alla preview delle mappe, viene mostrato anche il loro URL (… così potete copiarvelo) e quale costruttore ol.source. viene usato per accederle. Buona visione!

 

condividi: