JS geospaziale

Librerie JavaScript per il web mapping

Oggi è impensabile realizzare un’ applicazione web o  semplicemente una pagina “dinamica” senza usare JavaScript; questo versatile linguaggio di scripting, di tipo client-side, è diffusissimo e le librerie scritte per risolvere le problematiche più disparate non si contano e ne nascono ogni giorno di nuove. Questo vale anche per il trattamento e la rappresentazione sul web dei dati geo-spaziali e in questo articolo faremo una carrellata di alcune delle più importanti librerie JS  utilizzabili per il web mapping.

Per fare chiarezza, specie per chi è poco avvezzo alla programmazione web ed al linguaggio JS, diciamo che esistono librerie specifiche per gestire mappe e dati geografici ed altre per uso generale o per scopi specifici, ma che possono essere utili anche per il web mapping. Si tratta infatti pur sempre di web apps e quindi con quelle funzionalità tipiche di una pagina web dinamica e/o interattiva; in altre parole anche le applicazioni di web mapping sono delle RIA (Rich Internet Application).

Riepilogando diciamo che le librerie JS utilizzabili per il web mapping, possono essere:

  • librerie specifiche per gestire mappe e dati geografici (es. Leaflet, OpenLayers);
  • librerie generali per RIA (es. Bootstrap, ExtJS);
  • librerie per scopi specifici ma utili anche nel campo geospaziale (es. D3)

Dei casi emblematici sono quelli in cui, adoperando insieme delle librerie JS diverse, una per trattare informazioni geografiche e l’altra per usi generali, sono stati realizzati dei framework  per sviluppare più agevolmente applicazioni web geospaziali, come:

  • BootLeaf: combinazione di Bootstrap e Leaflet;
  • GeoExt: combinazione di ExtJS e OpenLayers.

Le API

Le librerie JS di cui stiamo parlando costituiscono delle cosiddette API (Application Program Interface); queste non devono intendersi come linguaggi di programmazione ma come raccolta di classi e funzioni definite e organizzate per rappresentare delle entità e svolgere determinate azioni. Per esempio la figura sotto, mostra l’organizzazione dell’ API di Leaflet:

Leaflet API

Quindi grazie alle API, si può evitare o limitare al minimo la scrittura di codice JS a basso livello (cosa tediosa e mangia-tempo) e si possono usare degli elementi già pronti da assemblare assieme per costruire la propria pagina o applicazione web.

Per usare le API di una libreria in un file HTML, è necessario indicare dove si trovano i suoi moduli sorgenti adoperando il tag <script src=…></script> (in genere si mette dentro il blocco <head> … </head>); quasi sempre si hanno due possibilità:

  • i moduli sono in una cartella locale sul proprio computer/server (scaricati dal sito di origine);
  • i moduli sono disponibili in remoto tramite nodi CDN (Content Delivery Network);

Per esempio questo è il codice per linkare le librerie di OpenLayer 3.17:

Notate che oltre a indicare dove si trovano i sorgenti JS, si specifica anche la posizione del relativo file CSS (col tag <link …>); questo perchè OpenLayers e molte altre librerie JS comprendono anche dei propri fogli di stile CSS appositamente definiti.

Ora vi chiederete, quale delle due soluzioni (cartella locale o CDN) è da preferire? Naturalmente se non esiste una CDN che distribuisce la libreria, non avete scelta; ma comunque questa è una eventualità rara. L’indirizzo delle CDN di molte librerie JS open-source, lo potete trovare in questo sito: cdnjs.com. Sicuramente avere una copia locale della libreria nel vostro sistema è meglio:

  • se non avete collegamento internet (per esempio in fase di test) … ovviamente;
  • se il server CDN che distribuisce la libreria non è affidabile

L’uso delle CDN invece può convenire per i seguenti motivi:

  • nel caso di grosse librerie, per risparmiare spazio sul vostro server;
  • nel caso di web apps con molte richieste HTTP e/o molti utenti, una rete CDN permette una gestione più efficiente e veloce di queste richieste;
  • se la CDN è usata anche da altri siti visualizzati dall’utente, i moduli della librerie sono già presenti nella cache del suo browser e quindi la visualizzazione della web app è più rapida;

Fatte queste premesse, passiamo a vedere quali sono le principali librerie JS iniziando da quelle specificatamente per gestire dati geografici.

OpenLayers

Credo che OpenLayers sia la libreria fondamentale ed una delle prime (è nata nel 2005) per rappresentare e trattare dati geografici sul web. Chi sviluppa web mapping non può non conoscerla, almeno i suoi elementi di base. Comprende e implementa tutti i principali concetti che caratterizzano un sistema geografico: layer, tile, mappe raster, dati vettoriali, proiezioni, protocolli OGC, … etc e la sua API è molto ricca ed articolata (OpenLayers API); anzi proprio per questo, forse anche un pò difficile da imparare.

Dalla versione 3.x (oggi siamo già arrivati alla 4.2) OL ha acquisito la capacità di usare le nuove tecnologie dei moderni browser (webGL, Canvas) e quindi permettere più efficaci modalità di rendering dei layer vettoriali ed integrazione dei dati 3D.

Proprio per la sua completezza e versatilità, OL può essere usata con successo per realizzare delle semplici pagine con una mappa, come pure dei web-client articolati, tant’è vero che la troviamo  (da sola o in combinazione con altre librerie) in molte delle soluzioni per webGIS open-source oggi disponibili.

Leaflet

Nata nel 2011 come libreria per realizzare  delle mappe interattive per  “mobile”, ha il suo punto di forza nella semplicità e nella leggerezza del codice: tutto quanto occupa uno spazio di soli 38 KB! Ha delle API ben documentate ed oltre ad essere abbastanza semplice da usare, sia sul suo sito ufficiale che altrove è possibile trovare tanti tutorials ed esempi utili per imparare.

Include nel suo core tutte le funzionalità di base che servono per rappresentare mappe e geodati ed interagire con essi; quindi per capirci: gestione dei layer, vestizione dei geodati , tiles, WMS, zoom, panning , pop-up e tooltip, barra della scala, conversioni, misura di distanze, … etc.

E’ comunque meno completa rispetto ad OpenLayers (per es. la copertura dei servizi OGC è parziale), però oltre ad essere più leggera, ha il vantaggio di essere più facile da imparare e può andare benissimo quando si devono realizzare applicazioni non troppo complesse.

In ogni caso , se servono delle funzionalità non presenti nella sua API, esistono numerosi plugin (quasi tutti open-source) che servono per estenderne le possibilità. Si tratta di mini-librerie aggiuntive sviluppate da terzi, alcune più affidabili e ben documentate, altre meno; questo è uno dei motivi per cui, in alcuni casi, gli viene preferita OL.

TurfJS

Turf

Si tratta di una potente libreria open-source creata e mantenuta dal gruppo di Mapbox per effettuare analisi geospaziali e statistiche direttamente sul browser. In realtà esiste pure una versione server-side per funzionare con node.js. Il suo sito ufficiale è: turfjs.org.

Tutti noi sappiamo quanto sia importante per un GIS avere la possibilità di effettuare delle analisi spaziali, ovvero quelle operazioni per interpretare, elaborare e trasformare dei dati geografici per ricavarne informazioni utili e analizzare fenomeni. Ecco, Turf ci offre la possibilità di effettuare da una pagina web operazioni come:

  • buffering
  • aggregazione e clustering
  • trasformazione ed interrogazione spaziale
  • filtri per dati
  • interpolazioni
  • join spaziali
  • classificazioni

e quindi di fatto realizzare degli efficienti webGIS.

Lavora con dati in formato geoJSON (sia input che output) espressi in WGS84 e quindi si integra benissimo con tutte le altre librerie JS che lo supportano.

Altra caratteristica utile di Turf è quella di essere modulare, ovvero le sue funzioni sono installate in moduli separati; ciò permette un suo mantenimento ed aggiornamento più efficiente ed anche, adoperando tool come browserify, la possibilità di installare solo il codice che effettivamente serve.

Cesium JS

Cesium

Questa libreria (sito ufficiale: cesiumjs.org) consente di rappresentare tiles e dati geografici su un globo 3D, infatti è molto simile a Google Earth (GE), con la differenza che Cesium è open-source ed è basato sulle funzionalità webGL dei moderni browser. Ricordiamo che GE funzionava con un plugin non più supportato  a partire dal 2014, per cui l’API di GE è stata contestualmente abbandonata (Announcing deprecation of the GE API).

Su un globo Cesium è possibile visualizzare differenti mappe-base (imagery layers) ed elementi vettoriali 2D inclusi etichette ed icone personalizzate; ma è anche possibile rappresentare dei modelli 3D come per esempio edifici, alberi, rilievi, .. etc. In particolare si possono caricare le rappresentazioni tridimensionali del terreno fornite da appositi terrain service provider.

E’ anche prevista, come per Google Earth, la semplice visione bidimensionale (2D) o la 2.5D (anche detta Columbus view) cioè quella di una mappa bidimensionale che viene rappresentata anche nella terza dimensione, senza la curvatura del globo (pseudo 3D).

Ma Cesium è un progetto ambizioso che permette tanto altro, come per esempio rappresentare veicoli ed oggetti animati (automobili, aerei, persone, …) sulla superficie del terreno. Qui trovate un elenco sintetico di tutte le sue caratteristiche: Cesium feature checklist. L’unico problema può essere la sua relativa pesantezza ed acquisire la necessaria padronanza per utilizzarlo al meglio.

StoryMap

La libreria StoryMap.js può considerarsi l’alternativa open-source dell’omonimo prodotto di ESRI; consente di raccontare su una pagina web, una storia, una vicenda, un viaggio, appoggiandosi ad una mappa interattiva che ne mostra i luoghi o i percorsi con la possibilità di collegarvi dei contenuti multimediali.

Ideata dal Knight Lab della Northwestern University sotto licenza MIT, è utilizzata da molte istituzioni (per es. da Yahoo e dal Times) ed è semplice da usare, integrandosi anche con Google Drive. Permette di creare storie utilizzando una mappa come sfondo,  sviluppando percorsi di digital storytelling.
Come mappe si è possono usare quelle di Mapbox (se avete un account Mapbox, anche le vostre) oppure di un qualunque tile service provider.

Per chi non è uno sviluppatore e non vuole scrivere codice JS, esiste anche un comodo StoryMapJS authoring tool che permette a chiunque (previa registrazione) di realizzarsi la propria “storymap”. Ovviamente però l’uso diretto della sua API (StoryMapJS for technical users) offre delle maggiori possibilità.

# # #

Vediamo ora altre librerie, sempre orientate ai dati geografici, ma  che a differenza di quelle viste fin’ora potremmo chiamare “dedicate”, nel senso che servono per interagire con i servizi di mappa cloud di alcuni famosi gestori: Google, Bing, ESRI, Mapbox, … etc. Gli utenti che si abbonano a questi servizi, hanno degli strumenti per costruirsi delle proprie mappe, poi condivisibili tramite un normale URL; ma oltre a ciò, sono previste delle loro API JavaScript, che un programmatore può usare dentro una qualsiasi pagina web per rappresentare ed interagire con tali mappe.

Questi sono a pagamento, ma in genere esistono anche dei profili gratuiti (se pur con delle limitazioni). In un caso o nell’altro vengono rilasciati dei pass-code  (o API key) che abilitano l’uso delle rispettive librerie JS. Alcune di queste librerie sono proprietarie, cioè il loro codice sorgente non è disponibile (sono così quelle di Google Maps, ESRI e HERE), altre sono open-source e disponibili su Github, come quelle di Mapbox e CartoDB.

mapbox.js

Mapbox API

Con la libreria mapbox.js è possibile  richiamare ed usare le mappe di Mapbox dentro una qualunque pagina o sito web. E’ stata realizzata adoperando Leaflet, anzi possiamo dire che è una sua estensione per sfruttare appunto i servizi di Mapbox. Per utilizzare mapbox.js, ci vuole un account Mapbox (a pagamento o gratuito) e quindi una rispettiva API key; in ogni caso la libreria è totalmente open-source  (repo su Github: mapbox/mapbox.js).

Una variante più attuale è mapboxGL.js che fa uso della moderna tecnologia open GL consentendo una rappresentazione delle mappe più fluida e dinamica. Essa realizza il rendering delle mappe direttamente nel browser dell’utente (al volo), combinando i tile vettoriali con le regole di stile, usando Javascript e webGL. Quindi è diversa da mapbox.js che, così come Leaflet, utilizza i tradizionali tile raster (PNG, JPG) ed in cui le definizioni di stile e del livello di zoom sono impostate lato server.

Le due librerie non sono compatibili e non si possono usare assieme; una web app realizzata con mapbox.js, se si vuole passare a MapboxGL, va riscritta completamente. Anche mapboxGL.js richiede di avere una API key di Mapbox e anch’essa è open-source (repo su Github: mapbox/mapbox-gl.js).

Naturalmente una web app realizzata con mapboxGL.js funziona correttamente solo sui browser che supportano webGL; inoltre essendo una tecnologia più recente ed ancora in fase di sviluppo, è possibile incappare in qualche bug in più rispetto alla matura mapbox.js.

cartodb.js

CartoDB API

Una volta si chiamava CartoDB oggi Carto e si tratta di un altro noto servizio cloud che permette ai propri utenti di creare e pubblicare con una certa facilità sul web delle mappe geografiche. Analogamente a Mapbox, Carto possiede la propria API Javascript open-source, che si chiama cartodb.js, che consente di interagire con i suoi servizi da una qualsiasi pagina web. I suoi sorgenti si trovano nella repo di Github: CartoDB/cartodb.js.

Con la libreria cartodb.js è possibile visualizzare le viste mappe già realizzate con il servizio Carto, oppure crearne dinamicamente di nuove direttamente nella pagina; è anche possibile aggiungere dei layer di Carto (cioè memorizzati nel proprio spazio) in un’altra mappa.

Cartodb.js si integra facilmente con eventuali altre librerie javascript che vengono adoperate insieme ad essa per realizzare la web app (per es. Leaflet, GeoJSON.js, jQuery); senza bisogno di richiamarle esplicitamente, cartodb.js include automaticamente le dipendenze necessarie, in base ai metodi adoperati nel codice. Queste altre librerie sono quelle elencate qui: cartodb.js/vendor.

HERE maps API

Questa libreria, a differenza delle precedenti non è open-source, ma la segnaliamo ugualmente essendo molto utile per realizzare delle mappe web con informazioni su centri abitati, servizi e percorsi stradali. HERE è infatti un gruppo gestito da alcune aziende automobilistiche tedesche, che fornisce servizi di dati geografici e di mappatura per il settore automobilistico, consumer e aziendale.

Agli sviluppatori viene resa disponibile un’ API Javascript che consente di realizzare delle applicazioni, sia desktop che mobile, in cui è possibile richiamare i servizi  tipici di HERE maps: percorsi stradali, ricerca di luoghi e punti di interesse,  tile basemaps, immagini street-level, geocoding, informazioni sul traffico, .. etc.

Oltre ad una API ben documentata, sono pure disponibili tantissimi esempi (il codice completo) che illustrano diverse soluzioni realizzabili con HERE maps. Per usarla bisogna acquistare un abbonamento; ci sono diversi profili in base alle proprie esigenze ed anche uno gratuito di prova (per 90 giorni). Solo gli utenti abbonati/registrati hanno diritto ai codici di accesso che sbloccano le funzioni della sue API.

# # #

Come abbiamo già detto agli inizi, per realizzare un’applicazione di web mapping oltre a librerie JS apposite per dati geografici, spesso se ne usano anche altre utili per realizzare l’interfaccia utente (aspetto grafico e interazioni) o per altri scopi specifici. Ce ne sono tante; qui di seguito vediamo alcune delle più importanti.

bootstrap

Bootstrap

Bootstrap è un noto framework, cioè un insieme di elementi grafici, stilistici, di impaginazione e JavaScript pronti all’uso, per realizzare siti web e applicazioni web responsive (layout ottimizzato per lo schermo in cui vengono visualizzate: desktop, tablet, smartphone). Esso mette a disposizione gli elementi di stile che permettono alla pagina di adattarsi al dispositivo, usando nel contempo quegli elementi di interfaccia che ormai sono uno standard in tutti i siti web moderni.

E’ molto diffuso ed ha preso piede per la sua facilità d’uso e l’impatto visivo gradevole. Originariamente è stato sviluppato da Twitter e infatti alcuni dei suoi elementi ricordano quelli del noto social network; ormai è totalmente open-source, sviluppato, mantenuto e hostato su Github. Esiste una vasta documentazione, scritta e migliorata grazie agli sforzi della comunità. Inoltre la disponibilità di diversi template di base, è di grande aiuto specie per i meno esperti.

ExtJS

ExtJS

Questo altro framework JS (Sencha ExtJS) è diventato famoso perchè consente di costruire facilmente delle GUI (Graphical User interface) complesse per web app e per abilitare la tecnologia Ajax nelle applicazioni in Java o PHP. Si integra perfettamente con altri framework JavaScript quali JQuery, Mootols e tanti altri, permettendo di realizzare applicativi web con interfacce molto complesse.

Le varietà di GUI che si possono realizzare è ampissima; possiamo comporre tra loro tutti gli elementi tipici delle applicazioni desktop, nessuno escluso, e forse anche di più. Abbiamo: menu, tab, accordion, pannelli, finestre, form, griglie, barre di splitting, toolbar, slider, status bar, progress bar, message window, tree e molto altro.

La programmazione con ExtJS è fondamentalmente JS object-oriented e fa largo uso di tecniche AJAX, di lettura gestione DOM e di oggetti JSON. Le conoscenze di DHTML e CSS sono utili, ma non indispensabili, dato che ExtJS provvede da sola a posizionare e gestire in maniera ordinata i diversi layer che compongono la nostra pagina.

Un codice pulito, la ricchezza di interfacce proposte, la completa compatibilità con tutti i browser e con gran parte degli altri framework JavaScript, hanno reso ExtJS, uno degli strumenti preferiti per realizzare delle RIA.

D3.,js

D3

D3  consente di rappresentare facilmente dei dati in modo dinamico usando gli stantard CSS, HTML5 e SVG; il suo nome infatti sta per Data-Driven Documents. Le funzioni presenti nella sua API permettono, partendo da dei dati organizzati, di manipolare gli elementi del DOM (Document Object Model) realizzando senza problemi delle interfacce web animate che presentano dei dati e consentono l’interazione con l’utente.

E’ evidente che D3 è molto utile anche nel caso dei dati geografici. Consente di leggere dati in formato JSON-compatibile (preferibilmente geoJSON e topoJSON) oppure come CSV e visualizzarli su una mappa con un aspetto grafico (stile) definito direttamente o tramite classi in CSS.

Altrettanto semplice diventa fare delle loro rappresentazioni dinamiche oppure disegnare dei grafici ad essi correlati.
D3 risolve egregiamente anche il problema della generalizzazione della mappa, ovvero la sua rappresentazione più o meno dettagliata in base alla scala. Oltre a ciò D3 ha delle funzioni specifiche per il trattamento dei dati geografici (vd. API geographies-d3-geo).

Quanto detto fin’ora riguarda dati geografici sottinteso “vettoriali”; D3 non supporta invece dati raster. Una soluzione consiste nell’ usare D3 in combinazione con una libreria come per esempio Leaflet (cosa che avviene spesso); oppure si può usare un suo plugin che permette di lavorare con le tiles: d3.geo.tile.

three.js

Three

E’ una libreria nata nel 2010 per creare oggetti e scene 3D interattive direttamente all’interno del browser, mediante l’utilizzo di Canvas, SVG, CSS-3D e WebGL; è usata moltissimo per realizzare video giochi on-line. Può essere utilizzata con successo anche in altri campi , tra cui quello geospaziale per rappresentare in 3D sia modelli del terreno che elementi vettoriali con la terza dimensione.

Attorno a Three.js sono stati sviluppati altri moduli per agevolarne l’uso applicato ai dati geografici (molti di essi fanno uso anche di D3), come per esempio il plugin ThreeGeoJSON che serve per trattare i geodati in formato geoJSON. Altro esempio è il framework GIScene che estende Three.js implementando quei concetti tipici dei sistemi geografici (layer, coordinate, proiezioni, … etc) ed ha un approccio molto simile a OpenLayers.

Concludendo: per chi è agli inizi

Sapere che esistono tutte queste librerie è senz’altro utile, ma il loro uso richiede comunque un minimo di padronanza nella programmazione web, quindi: HTML, CSS ed ovviamente JavaScript. L’alternativa per l’utente comune (non programmatore) è usare dei web client già pronti o delle piattaforme (tipo Mapbox o uMap) che consentono di realizzare e pubblicare delle mappe senza scrivere il codice delle pagine HTML.

Per chi invece deve o vuole mettere mano al codice di una pagina/applicazione web, ma è ancora agli inizi, è meglio procedere per gradi e cominciare dalle soluzioni più semplici. In questo caso, personalmente consiglio sempre di iniziare con Leaflet e magari, oltre al normale linguaggio JavaScript, imparare anche jQuery. Buon lavoro!

 

condividi: