Die digitale Kartendarstellung von VerbaAlpina wird mittels leistungsfähiger Webtechnologie umgesetzt. Der Vorteil dessen liegt auf der Hand: Nutzer können, ohne (abgesehen von einem aktuellen Web-Browser) zusätzliche Software zu installieren, lediglich über Aufrufen einer URL eine technisch und funktional komplexe Anwendung nutzen, die es erlaubt, mit umfangreichen und individuell definierbaren geografischen Visualisierungen zu interagieren. Im Folgenden wird zunächst auf die Anforderungen bzw. das sich daraus ergebende Konzept eingegangen.

Konzeption

Die Hauptanforderung an das Karten-Tool von VerbaAlpina besteht darin, einerseits große Polygon- und Punktdaten in einer geografischen Webapplikation darzustellen. Zu den räumlich angeordneten Polygonen zählen administrative Einheiten wie Gemeinde- und Ländergrenzen oder sprachlich definierte Gebiete, während in erster Linie die sprachlichen Kerndaten als geografisch referenzierte Punkte (Marker) angezeigt werden müssen. Sowohl Marker als auch Polygone müssen zur explorativen Datenerfassung interaktiv dargestellt werden – daraus resultiert die Anforderung von in Echtzeit gezeichneten grafischen Elementen, die beispielsweise auf die Mausposition des Nutzers reagieren können. Ebenfalls soll die zur Umsetzung verwendete Bibliothek und Software frei verfügbar (Open Source) und somit im Rahmen des Projekts selbst verwaltet werden können. Im Sinne von Web-Technologie bedeutet dies, dass extern genutzte JavaScript-Bibliotheken auf den Servern des Projekts selbst bereitgestellt werden. Hieraus ergeben sich die Vorteile, dass einerseits eine von Fremdeinflüssen unabhängige, stabile und somit nachhaltige Version erstellt werden kann und andererseits deren Quellcode öffentlich zugänglich gemacht werden kann.

Karten-Bibliotheken und Grafikdarstellung im Web

Um diese Anforderungen zu erfüllen, fiel die Wahl auf die Nutzung der Leaflet-Bibliothek , einer Open-Source JavaScript-Bibliothek, die ähnlich wie die bekannte Google-Maps-API gestattet, geografische Inhalte vor dem Hintergrund eines beliebigen Tile-Services (z.B. OpenStreetMap) in einer Webapplikation interaktiv darzustellen, jedoch frei verfügbar ist. Zur Anzeige von grafischen Inhalten jeglicher Art stehen gegenwärtigen Web-Browsern abgesehen vom Rendern des HTML-Inhaltes drei verschiedene Technologien zur Verfügung: SVG, Canvas sowie WebGL. Bei ersterer handelt es sich um ein Format zur Beschreibung und Darstellung von Vektorgrafiken, während die Canvastechnologie einen mit HTML-5 eingeführten Grafikstandard beschreibt, der ermöglicht, mittels Javascript gerasterte Darstellungen zu erzeugen, die sich homogen transformieren lassen. Im Gegensatz zur SVG-Darstellung ist der Canvas-Ansatz um einiges leistungsfähiger, es können größere Anzahlen von Elementen gleichzeitig dargestellt und animiert werden, jedoch ist die generelle Leistungsfähigkeit von der Fähigkeit des Browsers abhängig, die Ausgabe durch Grafikbeschleunigung zu optimieren. Um ein Vielfaches performanter ist die Möglichkeit des Canvas-Elements, direkt mit der Grafikkarte des Nutzers zu interagieren. Dies geschieht mittels des Standards WebGL, der (in der Version 1.0) von fast allen web-fähigen Geräten unterstützt wird. Auch der von VerbaAlpina genutzte Standard WebGL 2.0 wird mittlerweile großflächig unterstützt. Sollte dies jedoch nicht der Fall sein, bietet die Implementierung einen "Fallback" auf die Version 1.0 an. Diese Technologie ermöglicht es, das volle Potenzial der Grafikkarte auszunutzen und gestattet es somit, potenziell Millionen von Punkten (und oder Polygonen) sowie aufwendige 3D-Grafiken in einer Webapplikation darzustellen.

VerbaAlpina und WebGL

Aufgrund der beschriebenen Vorteile von WebGL wird diese Technologie zur Darstellung aller interaktiven Inhalte der Kartenanwendung genutzt. Zwar wird WebGL derzeitig von den meisten Karten-APIs (und auch Leaflet) nicht nativ unterstützt, jedoch besteht die Möglichkeit, einen WebGL-gerenderten Canvas über die HTML-basierte Kartendarstellung zu legen, um auf diesem größere Datenmengen geografisch referenziert zu visualisieren. Zur grundsätzlichen Visualisierung von zweidimensionalen Inhalten mittels WebGL wird auf die Bibliothek Pixi.js zurückgegriffen, deren Fähigkeit Texturen (Bilder) mittels WebGL zu zeichnen bzw. die Möglichkeit größere Polygone darzustellen, die oben beschriebenen Anforderungen an Marker und administrative Einheiten erfüllt. Eine Umrechnung der Pixi.js-Darstellungen auf die aktuelle Position und Zoomstufe der Karte realisiert die Verknüpfung von WebGL und Leaflet. Zusätzlich bietet Pixi.js den Vorteil, dass bei Nichtunterstützung von WebGL automatisch auf die normale Canvas-Darstellung zurückgegriffen werden kann, was wiederum eine vollständige Kompatibilität der Kartenanwendung mit dem HTML-5-Standard zur Folge hat – auch auf Endnutzergeräten, die den WebGL-Standard nicht unterstützen. Dieser sogenannte "Fallback" stellt zwar sicherlich einen Ausnahmefall dar, jedoch erlaubt er es den entsprechenden Nutzern trotzdem noch, mit angemessener Performanz die Kartenapplikation zu nutzen. Da die Kartenimplementierung von VA jedoch die Aktualisierungen von Pixi.js während der Entwicklungszeit konsequent implantiert, wurden mit späteren Versionen aufgrund der breiten Unterstützung von WebGL dieser "Canvas-Fallback" abgeschafft. Einer der größten Vorteile der WebGL-Technologie ergibt sich aus der stetigen Weiterentwicklung der Grafikhardware. Da immer das volle Potenzial der Grafikkarte zur Darstellung der Daten (nicht des Kartenhintergrundes) genutzt werden kann, skaliert die Leistungsfähigkeit dieser mit der Entwicklung der Hardware. Die Tatsache, dass mittlerweile auch handelsübliche Mobilgeräte über leistungsfähige Grafikchips verfügen und somit umfangreiche Datenmengen visualisieren können, illustriert diesen Vorteil nochmals deutlich.

Details der WebGL-Implementierung

Neben der eben erwähnten parallelen Translation der dargestellten Daten und des Kartenhintergrundes muss die Implementierung zwei Herausforderungen bewältigen. Erstens: Interaktive Polygone mit der Vielzahl an Punkten müssen mit einer Farbe gefüllt sowie einer variablen Linienstärke gezeichnet werden können. Zweitens: Eine potenziell große Anzahl an Markern muss dargestellt werden, die zusätzlich auf die Mausinteraktion (Hovern) reagieren können. Um das erste Problem performant zu lösen, werden alle dargestellten Polygone durch Pixi.js in ein zusammenhängendes, übergreifendes Polygon gezeichnet. Dies hat intern zur Folge, dass die Polygondaten der angezeigten Grundpolygone in der Grafikkarte in einem Puffer abgelegt und somit wesentlich schneller transformiert werden können. Ebenfalls wird beim Hovern eines Polygons die Deckkraft des Polygons im "Shader", also im auf der Grafikkarte ausgeführten Code, verändert, was ebenfalls in einer deutlichen Performanzsteigerung dieser traditionell aufwendigen Interaktionsform (Punkt-in-Polygon-Test) resultiert. Weiterhin muss bei den Polygongrenzen und Markern eine konstante Größe gewahrt werden. Das heißt, sobald die Karte skaliert (gezoomt) wird, müssen diese Elemente invers skaliert werden. Im Falle der Marker wird eine gegenläufige Animation berechnet, die aus Gründen der Optimierung genauso, wie eine Neuberechnung der Linienstärke der Grenzen, unmittelbar nach Beendigung eines Zoom-Schrittes (ebenfalls performant im Shader) durchgeführt wird. Zuletzt musste die Interaktionsfähigkeit der Marker gewährleistet werden. Hier ergibt sich ein ähnliches Problem wie bei den Polygonen: es wäre performanter beim Hovern nicht die komplette WebGL-Darstellung neu zu berechnen, sondern nur den jeweiligen (bei Berührung mit dem Mauszeiger animierten) Marker. Da dies durch die Pixi.js-Bibliothek nicht ohne weiteres möglich ist, wird während dieser Interaktion ein Duplikat des Markers erzeugt, das jedoch nicht auf dem Canvas gerendert, sondern als HTML-Element durch die Leaflet-API angezeigt wird. Dies stellt insgesamt eine hochperformante Lösung dar, da nun nur noch das einzelne HTML-Element (mittels CSS) animiert werden muss. Sobald der Marker mit dem Mauszeiger wieder verlassen wird, wird er nach Ausführen einer gegenläufigen Animation (Skalierung) wieder entfernt und der ursprüngliche darunterliegende, optisch identische WebGL-Marker wird wieder sichtbar. Grundsätzlich greifen die übrigen Komponenten der VerbaAlpina-Implementierung mittels eines Interfaces auf die WebGL-Implementierung zu, sodass diese theoretisch auch an andere Anwendungen angebunden bzw. auch ausgetauscht werden könnte. Mittlerweile ist die Implementierung um einen Polygoneditor erweitert, der es erlaubt, beliebige WebGL-Polygone zu editieren oder neu zu zeichnen.

Zusammenfassung

Die Umsetzung der digitalen Kartendarstellung von VerbaAlpina erfüllt mittels aktuellster Webtechnologien die anspruchsvollen Anforderungen an Performanz und Interaktivität. Durch die Nutzung von WebGL und das Open-Source-Konzept stellt das Projekt eine nachhaltige Lösung dar, die auch zukünftig mit der technologischen Entwicklung Schritt halten kann. Zudem ermöglicht die Kombination aus Leaflet und WebGL das Visualisieren umfangreicher und komplexer Daten auf einer Webkarte, was die Nutzung und Analyse der sprachlichen Daten erheblich erleichtert. Damit bietet VerbaAlpina nicht nur eine wertvolle Ressource für die Forschung, sondern stellt auch ein Beispiel für die effiziente Nutzung moderner Webtechnologien in der Wissenschaft dar.