La représentation cartographique numérique de VerbaAlpina est mise en œuvre grâce à une technologie Web puissante. Son avantage est évident : les utilisateurs peuvent, sans avoir à installer de logiciel supplémentaire (à part un navigateur Web actuel), simplement en visitant une URL, utiliser une application techniquement et fonctionnellement complexe qui leur permet d'interagir avec des visualisations géographiques étendues et personnalisables. Dans ce qui suit, nous aborderons d'abord les exigences et le concept qui en découle.

Conception

La principale exigence de l'outil cartographique de VerbaAlpina consiste d'une part à afficher de grandes quantités de données polygonales et ponctuelles dans une application Web géographique. Parmi les polygones spatialement disposés figurent des entités administratives telles que les frontières des communes et des pays, ou encore des zones définies linguistiquement, tandis que les données linguistiques centrales doivent être affichées principalement sous forme de points géographiquement référencés (marqueurs). Les marqueurs et les polygones doivent tous deux être représentés de manière interactive pour la collecte de données exploratoire, d'où la nécessité d'éléments graphiques dessinés en temps réel pouvant réagir, par exemple, à la position de la souris de l'utilisateur. De plus, la bibliothèque et le logiciel utilisés pour la mise en œuvre doivent être librement accessibles (open source), ce qui permet de les gérer dans le cadre du projet lui-même. En termes de technologie Web, cela signifie que les bibliothèques JavaScript utilisées à l'extérieur sont fournies par les serveurs du projet lui-même. Cela présente l'avantage qu'une version stable et durable indépendante des influences extérieures peut être créée d'une part, et d'autre part, que son code source peut être rendu accessible au public.

Bibliothèques cartographiques et représentation graphique sur le Web

Pour répondre à ces exigences, le choix s'est porté sur l'utilisation de la bibliothèque Leaflet , une bibliothèque JavaScript open source qui, tout comme la célèbre API Google Maps, permet de représenter des contenus géographiques de manière interactive dans une application Web, en utilisant n'importe quel service de type Tiles (par exemple, OpenStreetMap) en arrière-plan, mais qui est également librement accessible. Pour afficher tout type de contenu graphique dans les navigateurs Web actuels, en plus du rendu du contenu HTML, trois technologies différentes sont disponibles : SVG, Canvas et WebGL. Le premier est un format de description et de représentation des graphiques vectoriels, tandis que la technologie Canvas décrit une norme graphique introduite avec HTML5, qui permet de générer des représentations matricielles à l'aide de JavaScript, pouvant être transformées de manière homogène. Contrairement à la représentation SVG, l'approche Canvas est beaucoup plus performante, permettant de représenter et d'animer simultanément un plus grand nombre d'éléments, mais sa performance générale dépend de la capacité du navigateur à optimiser la sortie via l'accélération graphique. La possibilité offerte par l'élément Canvas d'interagir directement avec la carte graphique de l'utilisateur est nettement plus performante. Cela se fait à l'aide de la norme WebGL, qui est prise en charge par presque tous les appareils compatibles avec le Web (version 1.0). Le standard WebGL 2.0 utilisé par VerbaAlpina est désormais largement pris en charge. Cependant, si ce n'est pas le cas, l'implémentation offre un "fallback" vers la version 1.0. Cette technologie permet d'exploiter pleinement le potentiel de la carte graphique, permettant ainsi de représenter potentiellement des millions de points (et/ou de polygones) ainsi que des graphiques 3D complexes dans une application Web.

VerbaAlpina et WebGL

En raison des avantages mentionnés de WebGL, cette technologie est utilisée pour représenter tout le contenu interactif de l'application cartographique. Bien que la plupart des API cartographiques (y compris Leaflet) ne prennent pas actuellement en charge nativement WebGL, il est possible de superposer un Canvas rendu en WebGL sur la représentation cartographique HTML pour visualiser des quantités plus importantes de données géoréférencées. Pour la visualisation générale de contenus bidimensionnels avec WebGL, la bibliothèque Pixi.js est utilisée, qui a la capacité de dessiner des textures (images) à l'aide de WebGL, ainsi que la capacité de représenter de plus grands polygones, répondant aux exigences décrites ci-dessus pour les marqueurs et les entités administratives. La liaison entre WebGL et Leaflet est réalisée en convertissant les représentations Pixi.js à la position actuelle et le niveau de zoom de la carte. De plus, Pixi.js présente l'avantage que si WebGL n'est pas pris en charge, il peut automatiquement revenir à la représentation Canvas normale, assurant ainsi une compatibilité complète de l'application cartographique avec la norme HTML5, même sur les appareils des utilisateurs qui ne prennent pas en charge la norme WebGL. Ce "fallback" est certes une exception, mais il permet néanmoins aux utilisateurs concernés d'utiliser l'application cartographique avec une performance adéquate. Cependant, étant donné que la mise en œuvre cartographique de VA intègre de manière cohérente les mises à jour de Pixi.js pendant le développement, ce "fallback" a été abandonné avec les versions ultérieures en raison du large soutien apporté à WebGL. L'un des plus grands avantages de la technologie WebGL réside dans le développement continu du matériel graphique. Comme il est possible d'utiliser en permanence le plein potentiel de la carte graphique pour afficher les données (et non l'arrière-plan de la carte), les performances évoluent en parallèle avec le développement du matériel. Le fait que même les appareils mobiles courants disposent maintenant de puces graphiques performantes et peuvent ainsi visualiser d'importantes quantités de données illustre clairement cet avantage.

Détails de l'implémentation WebGL

En plus de la translation parallèle mentionnée précédemment des données affichées et de l'arrière-plan de la carte, l'implémentation doit relever deux défis. Premièrement, les polygones interactifs avec de nombreux points doivent pouvoir être remplis d'une couleur et tracés avec une épaisseur de ligne variable. Deuxièmement, un grand nombre de marqueurs potentiels doivent être affichés, qui peuvent également réagir à l'interaction de la souris (survol). Pour résoudre le premier problème de manière performante, tous les polygones affichés sont dessinés en un polygone continu et global par Pixi.js. Cela a pour conséquence interne que les données des polygones des polygones de base affichés sont stockées dans une mémoire tampon de la carte graphique et peuvent donc être transformées beaucoup plus rapidement. De plus, lors du survol d'un polygone, l'opacité du polygone dans le "shader", c'est-à-dire dans le code exécuté sur la carte graphique, est modifiée, ce qui entraîne également une amélioration significative des performances de cette forme d'interaction traditionnellement coûteuse (test de point dans le polygone). De plus, une taille constante doit être maintenue pour les limites des polygones et les marqueurs. Cela signifie que dès que la carte est mise à l'échelle (zoomée), ces éléments doivent être mis à l'échelle de manière inverse. En ce qui concerne les marqueurs, une animation opposée est calculée, qui, pour des raisons d'optimisation, est exécutée immédiatement après la fin d'une étape de zoom (également de manière performante dans le shader), tout comme le recalcul de l'épaisseur de ligne des limites. Enfin, il était nécessaire de garantir l'interactivité des marqueurs. Ici, un problème similaire se pose à celui des polygones : il serait plus performant, lors du survol, de ne pas recalculer entièrement la représentation WebGL, mais seulement le marqueur respectif (animé au contact du curseur de la souris). Comme cela n'est pas directement possible avec la bibliothèque Pixi.js, un duplicata du marqueur est généré pendant cette interaction, mais il n'est pas rendu sur le canevas, mais est affiché comme élément HTML par l'API Leaflet. Cela représente dans l'ensemble une solution très performante, car seul l'élément HTML individuel (à l'aide de CSS) doit maintenant être animé. Dès que le curseur de la souris quitte le marqueur, il est supprimé après l'exécution d'une animation opposée (mise à l'échelle) et le marqueur WebGL original identique visuellement redevient visible. Fondamentalement, les autres composants de l'implémentation VerbaAlpina accèdent à l'implémentation WebGL via une interface, de sorte qu'elle pourrait théoriquement également être intégrée à d'autres applications ou remplacée. Entre-temps, l'implémentation a été étendue par un éditeur de polygones qui permet de modifier ou de redessiner n'importe quel polygone WebGL.

Résumé

La mise en œuvre de la représentation cartographique numérique de VerbaAlpina répond aux exigences de performance et d'interactivité élevées grâce aux technologies Web les plus récentes. En utilisant WebGL et le concept open source, le projet offre une solution durable qui peut suivre le développement technologique à l'avenir. De plus, la combinaison de Leaflet et de WebGL permet de visualiser des données linguistiques vastes et complexes sur une carte Web, facilitant considérablement l'utilisation et l'analyse de ces données. Ainsi, VerbaAlpina constitue non seulement une ressource précieuse pour la recherche, mais elle représente également un exemple d'utilisation efficace des technologies Web modernes dans le domaine de la science.