La visualizzazione digitale della mappa di VerbaAlpina è implementata utilizzando una tecnologia web ad alte prestazioni.
Il vantaggio di questo è ovvio: Senza installare alcun software aggiuntivo (a parte un browser Web corrente), gli utenti possono utilizzare un'applicazione tecnicamente e funzionalmente complessa che gli consente di interagire con visualizzazioni geografiche estese e definibili individualmente richiamando un URL. Di seguito, verranno prima discussi i requisiti e il concetto risultante.

Concezione

Il requisito principale dello strumento cartografico di VerbaAlpina è, da un lato, la visualizzazione di poligoni e punti di grandi dimensioni in un'applicazione web geografica.
I poligoni disposti spazialmente includono delle unità amministrative come confini comunali e statali o aree linguisticamente definite, mentre i dati linguistici di base devono essere visualizzati principalmente come punti di riferimento geografico (marcatori). Sia i marcatori che i poligoni devono essere visualizzati in modo interattivo per l'acquisizione esplorativa dei dati: Da ciò risulta la richiesta di elementi grafici disegnati in tempo reale, che possono reagire, ad esempio, alla posizione del mouse dell'utente. Anche la libreria e il software utilizzati per l'implementazione dovrebbero essere liberamente disponibili (open source) e quindi poter essere gestiti all'interno del progetto stesso. In termini di tecnologia web, ciò significa che le librerie JavaScript utilizzate esternamente sono messe a disposizione sui server del progetto stesso. Da ciò risultano i vantaggi che, da un lato, è possibile creare una versione stabile e quindi sostenibile, indipendente da influenze esterne e, dall'altro, il suo codice sorgente può essere reso accessibile al pubblico.

Biblioteche cartografiche e visualizzazione grafica sul web

Per soddisfare questi requisiti, è stato deciso di utilizzare la libreria Leaflet, una libreria JavaScript open-source che, analogamente alla nota API di Google Maps, consente di visualizzare interattivamente i contenuti geografici sullo sfondo di un qualsiasi servizio di tile (p. es. OpenStreetMap). in un'applicazione web, ma è disponibile gratuitamente. Oltre alla visualizzazione del contenuto HTML, gli attuali browser Web dispongono di tre diverse tecnologie disponibili per la visualizzazione di contenuti grafici di qualsiasi tipo: SVG, Canvas e WebGL. La prima è un formato per descrivere e visualizzare la grafica vettoriale, mentre la tecnologia canvas descrive uno standard grafico introdotto con HTML-5 che consente di generare display rasterizzati utilizzando Javascript, che possono essere trasformati in modo omogeneo. A differenza della visualizzazione SVG, l'approccio canvas è molto più efficiente, è possibile visualizzare e animare un numero maggiore di elementi contemporaneamente, ma le prestazioni generali dipendono dalla capacità del browser di ottimizzare l'output attraverso l'accelerazione grafica. La capacità dell'elemento canvas di interagire direttamente con la scheda grafica dell'utente è ancora molto più efficiente. Questo viene fatto utilizzando lo standard WebGL, che (nella versione 1.0) è supportato da quasi tutti i dispositivi abilitati per il web. Anche lo standard WebGL 2.0 utilizzato da VerbaAlpina è ora ampiamente supportato. Tuttavia, se questo non è il caso, l'implementazione offre un "fallback" alla versione 1.0. Questa tecnologia consente di sfruttare appieno il potenziale della scheda grafica e quindi di visualizzare potenzialmente milioni di punti (e/o poligoni) nonché le grafiche 3D complesse in un'applicazione web.

VerbaAlpina e WebGL

A causa dei vantaggi descritti di WebGL, questa tecnologia viene utilizzata per visualizzare tutti i contenuti interattivi dell'applicazione cartografica. Sebbene WebGL al momento non sia supportato in modo nativo dalla maggior parte delle API delle mappe (e anche da Leaflet), c'è la possibilità di posizionare un canvas con rendering WebGL sulla visualizzazione della mappa basata su HTML per visualizzare quantità maggiori di dati geograficamente referenziati su di essa. Per la visualizzazione di base di contenuti bidimensionali tramite WebGL, viene utilizzata la libreria Pixi.js, la cui capacità di disegnare o visualizzare texture (immagini ) utilizzando WebGL. la capacità di visualizzare poligoni più grandi soddisfa i requisiti per i marcatori e le unità amministrative sopra descritti. Una conversione delle rappresentazioni Pixi.js alla posizione corrente e al livello di zoom della mappa implementa il collegamento di WebGL e Leaflet. Inoltre, Pixi.js offre il vantaggio che se WebGL non è supportato, la visualizzazione canvas può essere utilizzata automaticamente, che di nuovo significa che l'applicazione della mappa è completamente compatibile con lo standard HTML 5, anche sui dispositivi degli utenti finali che non supportano lo standard WebGL. Questo cosiddetto "fallback" rappresenta certamente un caso eccezionale, ma consente comunque agli utenti interessati di utilizzare l'applicazione cartografica con prestazioni adeguate.
Tuttavia, poiché l'implementazione della mappa di VA impianta costantemente gli aggiornamenti di Pixi.js durante il tempo di sviluppo, con le versioni successive è stato eliminato questo "canvas fallback" grazie all'ampio supporto di WebGL. Uno dei maggiori vantaggi della tecnologia WebGL deriva dalla costante evoluzione dell'hardware grafico. Poiché il pieno potenziale della scheda grafica può sempre essere utilizzato per visualizzare i dati (non lo sfondo della scheda), le sue prestazioni aumentano man mano che l'hardware si sviluppa. Il fatto che ora anche i dispositivi mobili standard dispongano di chip grafici ad alte prestazioni, e possano quindi visualizzare grandi quantità di dati, illustra di nuovo chiaramente questo vantaggio.

Dettagli sull'implementazione di WebGL

Oltre alla traduzione parallela dei dati visualizzati e dello sfondo della mappa, l'implementazione deve superare due sfide. Primo: i poligoni interattivi con un gran numero di punti devono poter essere riempiti con un colore e disegnati con una larghezza della linea variabile. Secondo: un potenzialmente grande numero di marcatori, che possono anche reagire all'interazione del mouse (hovering), deve essere visualizzato. Per risolvere il primo problema con prestazioni elevate, Pixi.js disegna tutti i poligoni visualizzati in un poligono coerente e completo.
Internamente, ciò significa che i dati poligonali dei poligoni di base visualizzati sono memorizzati in un tampone nella scheda grafica e possono quindi essere trasformati molto più rapidamente.
Al passaggio del mouse su un poligono, viene modificata anche l'opacità del poligono nello "shader", ovvero nel codice eseguito sulla scheda grafica, il che si traduce anche in un aumento significativo delle prestazioni di questa forma di interazione tradizionalmente complessa (cosidetto "test-punto-nel-poligono"). Inoltre, è ancora necessario mantenere una dimensione costante per i confini e gli indicatori die poligoni. Vale a dire: appena la mappa viene ridimensionata (zumata), questi elementi devono essere ridimensionati inversamente. Nel caso dei marker viene calcolata un'animazione contraria che per motivi di ottimizzazione viene effettuata allo stesso modo di un ricalcolo dello spessore di linea dei bordi subito dopo la fine di un passo di zoom (peraltro performante nel ombreggiatore). Infine, doveva essere garantita la capacità di interazione dei marcatori. Qui si presenta un problema simile a quello con i poligoni: sarebbe più efficiente non ricalcolare l'intera visualizzazione WebGL durante il passaggio del mouse, ma solo il rispettivo marker (animato quando lo si tocca con il puntatore del mouse). Poiché ciò non è senz'altro possibile con la libreria Pixi.js, durante questa interazione viene creato un duplicato del marcatore, ma questo non viene visualizzato sul canvas, bensì come elemento HTML dall'API Leaflet. Nel complesso, questo rappresenta una soluzione molto efficace, poiché ora solo il singolo elemento HTML deve essere animato (tramite CSS). Appena il marcatore viene lasciato con il puntatore del mouse, viene nuovamente rimosso dopo aver eseguito un'animazione opposta (ridimensionamento) e il marcatore WebGL originale sottostante, visivamente identico, diventa nuovamente visibile. In linea di principio, gli altri componenti dell'implementazione VerbaAlpina accedono all'implementazione WebGL tramite un'interfaccia, in modo che teoricamente possa anche essere collegata ad altre applicazioni o scambiata. Nel frattempo, l'implementazione è stata ampliata per includere un editor di poligoni che consente di modificare o ridisegnare qualsiasi poligono WebGL.

Riassunto

L'implementazione della visualizzazione digitale della mappa di VerbaAlpina soddisfa i severi requisiti di prestazioni e interattività utilizzando le più recenti tecnologie web. Utilizzando WebGL e il concetto di open source, il progetto rappresenta una soluzione sostenibile in grado di tenere il passo anche con gli sviluppi tecnologici futuri. Inoltre, la combinazione di Leaflet e WebGL consente la visualizzazione di dati grandi e complessi su una mappa web, che semplifica notevolmente l'utilizzo e l'analisi dei dati linguistici. Così, VerbaAlpina non solo offre una risorsa preziosa per la ricerca, ma rappresenta anche un esempio dell'uso efficiente delle moderne tecnologie web nella scienza.