GeoMapFish 2.7, a smooth transition to Web Components
Tags: webcomponents, geospatial, geomapfish
Published: 2022-07-22 13:01:00

(➡️ [Version française](https://dev.to/camptocamp-geo/geomapfish-27-a-smooth-transition-to-web-components-2pj0#geomapfish-27-une-transition-fluide-vers-les-web-components))

This article presents the new features of the recently released version 2.7 of GeoMapFish. With this version, we're upgrading some components of the portal to a new set of front-end technologies based on the latest standards. Our new architecture must evolve from the AngularJS framework, which is at the end of its life and maintenance, to a more maintainable, standardized and, when possible, simpler implementation.

The main brick is based on the Web Components technology, a concept that has now become common to many frameworks. This implementation will be possible thanks to the Lit library. Other technologies are also added for various bricks of the project: i18next for the translations, RxJS for the asynchronous code and the event management (gathered under the concept called "store"), Storybook for the examples and Cypress for the tests.

Version 2.7 is transitional in that it introduces multiple technological and architectural changes to the application, but does not include any major functional additions. The strategy adopted, on the other hand, ensures a smooth migration, without breakage, to a no AngularJS release in what should be version 3.0 of GeoMapFish.

## Migration to Web Components

The migration work was carried out in an incremental way, with the idea of validating at each step that the chosen strategy was the right one. The first Proof-of-Concept (POC) allowed the implementation of the basic bricks of the new architecture, an "internal" component (authentication) and an "external" component (a feedback form) that validated the concept of component extension. The latter, which allows to add specific code to the core of GeoMapFish, is widely used in projects.

![GeoMapFish feedback form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60pw6u90025e692crpos.png)

All these first works resulted in directly reusable code. 

In a second step, we migrated a first component according to the previously validated principles: the LIDAR profile, a component already present in some projects as specific code. By adapting it for the Web Components architecture, we integrated it into the core of GeoMapFish. Note that this component must be activated and that it requires an external data supply service.

![GeoMapFish LIDAR profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pudl12qku5r8pkrulma.png)

## Vector tiles, a first implementation

Services offering geographic data in the form of vector tiles are multiplying. This modern format brings several advantages and is for example already available for many Swisstopo layers. The GeoMapFish solution has adapted and provides with its version 2.7 a first implementation of the visualization of vector tiles.

![GeoMapFish vector tiles background](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adze3t8frubjcjgoaa0q.png)

The following work has been done:

- Creation of a new layer type for vector tiles, configurable in the administration interface;
- Addition of a server side view to expose a PostGIS table as vector tiles;
- Modification of the background layer selection component to allow the display of a vector layer (OpenLayers layer).

![GeoMapFish vector tiles administration form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k29tcqlfehk6knym0nfw.png)

## Administration interface
 
### Documentation

We've added documentation for each page of the administration interface. It describes the functionality and configuration of the different attributes.

![GeoMapFish administration documentation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6va51nz1d14wrzldrxu.png)

### Metadata and features filtering 

In the administration interface, the lists of metadata and features are now filtered according to the object they apply to.

## QGIS

### Published URL

In a QGIS server project, we no longer need to provide the published URL. It is determined automatically via a header sent by GeoMapFish.

### Configuration access controls

The accesscontrol_config.yaml file is no longer needed. It was useful to make the link between the MAP parameter of the server request and the OGC server of the GeoMapFish database.

### WFS 3 support

WFS 3 support has been added in the QGIS Server Docker container offered with GeoMapFish and in the supplied QGIS security proxy.

## More

### Merge of ngeo/GMF code

Historically, the source code of the front-end library is composed of a common part (called ngeo) and of elements composing the user interface (called GeoMapFish). Some very specific projects use only the ngeo code. These two parts have been merged in order to guarantee a better maintainability in the future. This is a reorganization of the source code and no functionality has been impacted by this change.

### Performance

The speed of the second theme loading for a logged-in user is much faster, especially with a large number of layers. It can go from 15 seconds in version 2.6 to 2 seconds in version 2.7.

## About GeoMapFish

GeoMapFish is a web-based, extensible and flexible GIS application with many features. It offers several interfaces: desktop, mobile, administration, and others, mainly for specific use cases. An API for integrating maps into third-party applications is also available. Based on OGC standards, a GeoMapFish application makes it possible to share spatial data in the form of services (WMS-T, WFS-T, WMTS) for desktop clients (QGIS or ArcGIS for example) or for other web clients. Cartographic business applications can be built using GeoMapFish as a basis.

GeoMapFish combines the best technological tools into one application:

- OpenLayers and Ngeo on the client side;
- Pyramid-based Papyrus for the server framework;
- MapServer, QGIS Server or GeoServer for map services;
- PostgreSQL and PostGIS for data storage;
- MapFish Print for printing cartographic documents in PDF or PNG format.

### Some projects

Here is a non-exhaustive list of projects migrated or being migrated 2.7:

- https://geo.saintpierre.re
- https://map.cartoriviera.ch
- https://sitn.ne.ch

You can also find our demo in version 2.7 : https://geomapfish-demo-2-7.camptocamp.com/

### Funding for this version

The following organizations contributed to the funding of this version. We would like to thank them for their support:

- ARCAM
- Bureau Technique Intercommunal
- République et Canton de Neuchâtel
- Camptocamp SA
- City of Lausanne
- City of Nyon
- City of Pully
- City of Vevey
- City of Yverdon
- Federal Office of Topography swisstopo
- Fürstentum Liechtenstein
- HKD Géomatique Vaud SA
- Kanton Schwyz
- KT Basel-Stadt
- La Tour-de-Peilz
- Repubblica e Cantone Ticino
- République et Canton du Jura
- Service intercommunal de gestion
- techplus GmbH

---
# GeoMapFish 2.7 : une transition fluide vers les Web Components

Cet article présente les nouveautés apportées par la version 2.7 de GeoMapFish, sortie il y a peu. Avec cette version, nous procédons à une mise à jour de certains composants du portail vers un nouvel ensemble de technologies front-end en se basant sur les standards les plus récents. Notre nouvelle architecture doit évoluer du framework AngularJS, en fin de vie et de maintenance, vers une implémentation plus maintenable, standardisée et, quand cela est possible, plus simple.

La brique principale se base sur la technologie des Web Components, un concept aujourd'hui devenu commun à de nombreux frameworks. Cette implémentation sera possible grâce à la librairie Lit. D'autres technologies sont également ajoutées pour diverses briques du projet : i18next pour la gestion des traductions, RxJS pour le code asynchrone et la gestion d'événements (réuni sous le concept nommé "store"), Storybook pour les exemples et Cypress pour les tests.

La version 2.7 est transitoire dans la mesure où elle introduit de multiples changements technologiques et architecturaux dans l'application, mais ne comporte pas d'ajouts fonctionnels majeurs. La stratégie adoptée permet par contre d'assurer une migration fluide, sans cassure, vers une sortie complète d'AngularJS dans ce qui devrait être la version 3.0 de GeoMapFish.

## Une migration vers les Web Components

Le travail de migration a été réalisé de manière incrémentale, dans l'idée de valider à chaque étape que la stratégie choisie était la bonne. Le premier Proof-of-Concept (POC) a permis l'implémentation des briques de base de la nouvelle architecture, d'un composant "interne" (l'authentification) et d'un composant "externe" (un formulaire de feedback) qui validait le concept d'extension de composant. Ce dernier, qui permet d'ajouter du code spécifique au coeur de GeoMapFish, est largement utilisé dans les projets.

![GeoMapFish feedback form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60pw6u90025e692crpos.png)

Tous ces premiers travaux ont débouché sur du code directement réutilisable. 

Dans un second temps, nous avons migré un premier composant selon les principes validés précédemment : le profil LIDAR, un composant déjà présent dans certains projets en tant que code spécifique. En l'adaptant pour l'architecture Web Components, nous l'avons intégré au coeur de GeoMapFish. A noter que ce composant doit être activé et qu'il nécessite un service externe de fourniture de données.

![GeoMapFish LIDAR profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pudl12qku5r8pkrulma.png)

## Vector tiles, une première implémentation

Les services proposant des données géographiques sous forme de tuiles vectorielles se multiplient. Ce format moderne apporte plusieurs avantages et est par exemple déjà disponible pour de nombreuses couches Swisstopo. La solution GeoMapFish s’est adaptée et fournit avec sa version 2.7 une première implémentation de la visualisation de tuiles vectorielles.

![GeoMapFish vector tiles background](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adze3t8frubjcjgoaa0q.png)

Les travaux suivants ont été réalisés :

- Création d’un nouveau type de couches pour les tuiles vectorielles, configurable dans l’interface d’administration ;
- Ajout d'une vue côté serveur pour exposer une table PostGIS en tant que tuiles vectorielles ;
- Modification du composant de sélection de la couche de fond pour permettre l’affichage d’une couche vectorielle (couche OpenLayers).

![GeoMapFish vector tiles administration form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k29tcqlfehk6knym0nfw.png)

## Interface d'administration

### Documentation

Nous avons ajouté de la documentation pour chaque page de l'interface d'administration. Elle décrit les fonctionnalités et la configuration des différents attributs.

![GeoMapFish administration documentation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6va51nz1d14wrzldrxu.png)

### Filtre des métadonnées et fonctionnalités

Dans l'interface d'administration, les listes de métadonnées et de fonctionnalités sont désormais filtrées selon l'objet sur lequel elles s'appliquent.

## QGIS

### URL publiée

Dans un projet QGIS server, nous n'avons plus besoin de fournir l'URL publiée. Elle est déterminée automatiquement via un header transmis par GeoMapFish.

### Contrôles d'accès de la configuration

Le fichier accesscontrol_config.yaml n'est plus nécessaire. Il était utile à faire le lien entre le paramètre MAP de la requête au serveur et le serveur OGC de la base de données de GeoMapFish.

### Support WFS 3

Le support WFS 3 a été ajouté dans le container Docker QGIS Server proposé avec GeoMapFish et dans le proxy de sécurité QGIS fourni.

## Autres

### Merge du code ngeo/GMF

Historiquement, le code source de la librairie front-end est composé d'une partie commune (dite ngeo) et d'éléments composant l'interface utilisateur (dite GeoMapFish). Certains projets très spécifiques n'utilisent que le code de ngeo. Ces deux parties ont été fusionnées afin de garantir une meilleure maintenabilité à l'avenir. Il s'agit d'une réorganisation du code source et aucune fonctionnalité n'a été impactée par ce changement.

### Performances

La vitesse du deuxième chargement du thème pour un utilisateur connecté est beaucoup plus rapide, surtout avec un grand nombre de couches. Il peut passer de 15 secondes en version 2.6 à 2 secondes en version 2.7.

## A propos de GeoMapFish

GeoMapFish est une application SIG web, extensible et flexible, incluant de nombreuses fonctionnalités. Elle propose plusieurs interfaces : desktop, mobile, administration, ou d'autres plus spécifiques, ainsi qu'une API pour intégrer des cartes dans des applications tierces. Basé sur les standards OGC, un portail GeoMapFish permet de diffuser des données spatiales sous forme de services (WMS-T, WFS-T, WMTS) à destination d'autres clients lourds (QGIS ou ArcGIS par exemple) ou légers. Sur ce socle, des applications métiers cartographiques peuvent être construites.

GeoMapFish combine les meilleurs outils technologiques en une application :

- OpenLayers et Ngeo côté client ;
- Papyrus basé sur Pyramid pour le framework serveur ;
- MapServer, QGIS Server ou GeoServer pour les services cartographiques ;
- PostgreSQL et PostGIS pour le stockage des données ;
- MapFish Print pour l'impression de documents cartographiques au format PDF ou PNG.

### Quelques projets

Voici une liste non exhaustive de projets migrés ou en cours de migration 2.7 :

- https://geo.saintpierre.re
- https://map.cartoriviera.ch
- https://sitn.ne.ch

Retrouvez également notre démo en version 2.7 : https://geomapfish-demo-2-7.camptocamp.com/

### Financement de cette version

Les organismes suivants ont participé au financement de cette version. Qu'ils en soient remerciés :

- ARCAM
- Bureau Technique Intercommunal
- République et Canton de Neuchâtel
- Camptocamp SA
- Fürstentum Liechtenstein
- HKD Géomatique Vaud SA
- Kanton Schwyz
- KT Basel-Stadt
- La Tour-de-Peilz
- Office fédéral de topographie swisstopo
- Repubblica e Cantone Ticino
- République et Canton du Jura
- Service intercommunal de gestion
- techplus GmbH
- Ville de Lausanne
- Ville de Nyon
- Ville de Pully
- Ville de Vevey
- Ville d'Yverdon