Une carte Web est un affichage interactif d’informations géographiques, que vous pouvez utiliser pour visualiser des données qui pourront répondre à des questions telles que « quelle est le chemin le plus court entre deux points à vol d’oiseau? ». Par le passé, la plupart des informations géographiques numériques étaient stockées sur des ordinateurs de bureau rendant leurs partages difficiles. Avec l’avancée de la cartographie Web et de l’internet, elles peuvent désormais être partagées, visualisées et modifiées dans des navigateurs ou sur les téléphones portables. C’est d’autant plus vrai depuis l’apparition de librairies comme Leaflet qui facilitent leur création et leur personnalisation.

Dans cet article je vais vous présenter cette librairie [1], ses usages et les raisons pour lesquelles la choisir dans le cas d’un besoin cartographique. Je vous montrerai ensuite un exemple d’utilisation dans le cadre d’une simple application Angular.

Lien du projet dans GitHub : https://github.com/KAIBEE/leaflet-tour-angular

Qu’est ce que Leaflet ?

Leaflet est une bibliothèque JavaScript open source légère, simple et flexible pour faire des cartes Web interactives. C’est la bibliothèque de cartographie open source la plus populaire du moment. Elle est développée par Vladimir Agafonkin et, selon ses propres termes, elle est «simple, performante et conviviale». La première release de Leaflet date de mai 2011.

Ci-dessous un exemple de carte faite à l’aide de Leaflet.

Qu’est-il possible de faire avec Leaflet ?

Leaflet vous permet de faire une carte avec un fond que vous pouvez choisir parmi une liste déjà fournie. Vous pouvez zoomer/dézoomer, ajouter des “markers”, dessiner des polygones et interagir avec beaucoup d’autres composants graphiques disponibles. Ainsi, si vous avez besoin de créer et de personnaliser vos propres contrôles, il suffit d’étendre les classes fournies. Tout ceci fonctionne bien pour une large sélection de navigateurs desktop :

• Chrome
• Firefox
• Safari 5+
• Opera 12+
• IE 7–11
• Edge

Un autre avantage de Leaflet, qui découle de son caractère léger, est sa capacité à bien s’intégrer dans le mobile car les composants sont responsives et réagissent parfaitement aux interactions des utilisateurs comme le drag, le pinch, le spread ou le tap [2]. Voici une liste des navigateurs mobiles compatibles avec Leaflet :

• Safari for iOS 7+
• Android browser 2.2+, 3.1+, 4+
• Chrome for mobile
• Firefox for mobile
• IE10+ for Win8 devices

Les limites ?

L’une des limites de Leaflet que vous pourrez rencontrer est la dégradation des performances quand beaucoup d’éléments sont affichés simultanément sur la carte. Par exemple, la présence de nombreux « mile markers » sur un seul écran peut rendre le drag lent et dégrader l’expérience utilisateur. Mais pas d’inquiétude, il existe une extension, Leaflet Leaflet.PixiOverlay, qui permet de gérer ce genre de souci de performance avec l’utilisation des canvas de HTML5 au lieu de SVG. Pour rappel, SVG et canvas sont deux technologies pour dessiner dans les navigateurs, les canvas gérant mieux les grandes quantités d’éléments. Mais avant d’utiliser cette extension, il faut se poser la question d’un point de vue UX : est ce qu’on a vraiment besoin d’afficher autant d’éléments sur l’écran ? Est ce qu’il y a un moyen d’organiser la vue en respectant à la fois les exigences fonctionnelles et de performance ?

Peut-on faire confiance à Leaflet ?

Leaflet peut être utilisé et exploité sans aucun problème parce qu’il est soutenu et maintenu par une grande communauté hyper active à la fois sur le GitHub officiel ou sur StackOverflow. D’autre part, les plugins de Leaflet sont également bien entretenus après chaque montée de version. Au moment d’écrire cet article, il y a 668 contributeurs, 209 pull requests en cours, 461 issues ouverts, ce qui prouve que la communauté est bien active et au service de la technologie. Un autre atout de Leaflet est la documentation qui est bien organisée et mise à jour régulièrement, ce qui évite que l’on s’y perde.

La pratique

Dans cette section nous allons voir un exemple pratique de création de carte dans laquelle nous allons mettre des éléments simples comme des markers, cercles et popup, ou encore des éléments plus complexes sous forme de geojson que je présenterai par la suite, Ceci a pour objectif de donner un aperçu de la prise en main de Leaflet. Les étapes sont versionnées au niveau GitHub que vous pourrez trouver ici, ce qui nous permettra de nous focaliser sur les grandes lignes et laisser les détails d’implémentation au niveau du repository. À noter que j’ai choisi Angular comme base pour développer l’exemple avec notamment le package ngx-leaflet [3].

Première carte
Afin de construire sa première carte il faut utiliser la directive leaflet

En lui passant des options depuis le fichier TypeScript.

Et hop ! Notre première carte s’affiche avec un joli fond openstreetmap.

Markers, cercles et popups

Afin d’ajouter des composants Leaflet comme les markers, les cercles, les popups ou autres, il faut écouter l’événement leafletMapReady pour avoir la référence sur l’objet map dans lequel on pourra mettre ce que l’on veut.

Ensuite, dans la méthode il suffit d’instancier, personnaliser et ajouter les composants. À noter que Leaflet nous permet aussi d’ajouter des styles de façon déclarative avec des classes CSS.

Geojson

Geojson est un format d’encodage d’ensemble de données géospatiales simples utilisant la norme JSON. Il pourra par exemple être utile pour pouvoir distinguer visuellement les communes, les départements ou les régions. Ce qui nous permet par la suite d’ajouter des indicateurs tels que le nombre d’habitants, le niveau de pollution ou le nombre de cas de COVID par région. Alors ce n’est pas à nous de coder ces objets, parce qu’ils sont compliqués à réaliser, mais il est possible de télécharger des modèles open source qui sont déjà fournis.

Après avoir téléchargé le fichier GeoJson, il suffit de le mettre dans le répertoire assets/ pour pouvoir l’utiliser comme suit.

Et hop ! Comme on peut le voir sur l’image ci-dessous, on peut facilement distinguer la limite des départements de la région Auvergne Rhône Alpes.

Fond de carte

Jusqu’à maintenant nous avons utilisé openstreetmap comme fond de carte, mais rien ne nous empêche d’en utiliser d’autres. Vous en trouverez beaucoup sur le site suivant : https://leaflet-extras.github.io/leaflet-providers/preview
Nous pouvons trouver une multitude d’alternatives prêtes à l’emploi. Mais faites attention quand même car il peut arriver que les serveurs ne répondent pas, vous risquez alors d’avoir un fond vide qui pourra rendre votre client mécontent. Et oui ! Cela m’est déjà arrivé d’être trahi par l’open source. La solution idéale est de dépendre plutôt des serveurs de haute disponibilité du genre Mapbox ou encore MapTiler. Bien évidemment ces services sont payants, mais j’ai développé une directive Angular qui permet d’avoir plusieurs fonds de carte de substitution si le fond principal n’est pas disponible. La directive est disponible ici.

Perspectives

Comme vous l’avez constaté, nous sommes passés d’une carte vide à une carte plus interactive très rapidement. Il faut savoir qu’avec Leaflet on peut faire beaucoup plus. Pour plus de détails il suffit de consulter la documentation de l’API. Dans un prochain article nous allons voir des concepts plus avancés de Leaflet notamment :

• Les clusters
• Routage OSRM
• La visualisation des données

Oualid QANNOUF

Webographie

[1] Leaflet API: https://leafletjs.com

[2] Common Android Gestures for Your Phone or Tablet: https://www.lifewire.com/android-gestures-phone-or-tablet-1616916

[3] Ngx-leaflet: https://github.com/Asymmetrik/ngx-leaflet

[4] github leaflet: https://github.com/Leaflet/Leaflet