GreenerSoft

Room-Leaflet, un composant pour afficher des cartes interactives

Le dessous des cartes.

Room-Leaflet est un composant basé sur Room permettant d’afficher des cartes interactives en utilisant la librairie JavaScript open source Leaflet.

Room-Leaflet est disponible sous la forme d’un module ECMAScript 6 (une version non ECMAScript est également disponible) qui comme Room, ne nécessite pas de système de construction (build tools). Room-Leaflet est donc utilisable directement dans un navigateur Web.

Room-Leaflet est dépendant de notre module Room et de l’excellente librairie Leaftlet créée à l’origine par l’ingénieur logiciel ukrainien Volodymyr Agafonkin.

Room-Leaflet est disponible sur :

Pour plus d’informations techniques, consultez le fichier README du dépôt Github.

Présentation

Le module Room-Leaftlet est minimaliste en exportant uniquement 7 fonctions dont la principale est la fonction MapContainer() qui retourne le composant. L’idée n’était pas de développer un « wrapper » complet de la libraire Leaflet qui aurait nécessité une courbe d’apprentissage supplémentaire, mais de permettre aisément d’utiliser Leaflet avec Room. Donc si vous connaissez déjà les différentes fonctions décrites dans la très bonne documentation de Leaftlet, vous pourrez très rapidement utiliser Room-Leaflet pour afficher des cartes interactives sur vos pages Web.

La signature de la fonction MapContainer() est la suivante :

async function MapContainer({id, className, provider, mount, unmount})

Sans entrer dans les détails, le paramètre attendu est un objet pouvant contenir des propriétés toutes optionnelles comme un objet provider décrivant le fournisseur de fond cartes à utiliser (une fonction OpenStreetMapProvider() est disponible pour utiliser les cartes d’OpenStreetMap), des fonctions mount() et unmount() appelées au montage et au démontage du composant dans le DOM (un élément <div>) et qui permettent de compléter la carte (ajout de couches, de marqueurs, etc.). Le paramètre peut aussi contenir en tant que propriétés, toutes les options de la classe Map de Leaflet décrite dans la documentation.

La librairie Leaflet doit être importée pour que Room-Leaftet fonctionne. En version non ECMAScript, vous devez donc avoir un élément <script> dans votre page HTML avant ceux pour Room et Room-Leaflet. En version ECMAScript 6 vous pouvez faire de même, mais vous avez en plus la possibilité de laisser Room-Leaflet importer dynamiquement la librairie Leaflet en tant que module ECMAScript à la condition d’ajouter dans votre carte d’importation une entrée nommée Leaflet (en plus des entrées Room et RomLeaflet).

Vous trouverez plus d’informations sur cette technique dans un article précédent, la librairie Leaflet n’existant pas encore sous forme d’un module ECMAScript.

Pour rappel, la librairie Leaflet utilise un fichier CSS qui doit impérativement être chargé avant la librairie et il est indispensable de donner une dimension par CSS à l’élément <div> qui contient la carte (classe leaflet-container par défaut mais qui peut être changée via la propriété className du composant).

Exemples

Deux exemples d’utilisation de Room-Leaftlet sont présentés ci-après et mettent en oeuvre la réactivité et la possibilité d’animer des cartes.

Réactivité

Room est pleinement utilisable pour rendre réactifs des éléments contenus dans une carte comme la position d’un marqueur sur une carte ou le texte du contenu d’une popup associée.

Pour exemple, l’interface et la carte ci-dessous :

Le marqueur est affiché systématiquement au centre de la carte avec une popup contenant les coordonnées et le niveau de zoom. Si vous déplacez la carte ou changez le zoom, le contenu de la popup est automatiquement mis à jour. Il en va de même pour les 3 champs de saisie au dessus de la carte. Et si vous modifiez un des champs de saisie, la carte et le contenu de la popup sont modifiés.

Ceci est très simplement réalisé en utilisant 2 données observables créées avec la fonction createData() de Room, un effet créé avec la fonction createEffect() et une composition réactive du contenu de la popup.

Animation

Il est assez simple d’animer le contenu des cartes, notamment des couches supplémentaires.

L’interface et la carte ci-dessous affichent les précipitations (pluie, neige, grêle) détectées par les radars météorologiques du monde entier :

Légende :
De plus ou moins vert : des nuages à de la pluie légère.
De jaune à rouge : de la pluie modérée à de la grêle.
De plus ou moins bleu : d’un peu à beaucoup de neige.

Les informations proviennent du site RainViewer en utilisant l’API documentée à cette adresse : https://www.rainviewer.com/api.html

Trois données observables et trois effets sont utilisés pour gérer cette interface.

En utilisant le menu déroulant de la période, il est possible de charger jusqu’à 12 heures d’historique de précipitations avec un pas de 10 minutes, par défaut 2 heures sont chargées (attention cela consomme beaucoup de données et peut ralentir votre appareil). L’utilisation du menu déroulant change une première donnée observable qui contient la liste des dates et heures des différentes couches. Un premier effet réagit à la modification de cette donnée en ajoutant les nouvelles couches dans la carte.

L’animation des couches est obtenue avec un deuxième effet qui, sur le changement d’une deuxième donnée observable gérant la vitesse de l’animation (modifiée par le curseur de l’animation), démarre un timer ou l’arrête. Le timer se charge de modifier la troisième donnée observable qui gère l’index de la couche à afficher. Le troisième effet, réagit à la modification de cet index en cachant la couche en cours et en montrant la nouvelle, il réagit aussi quand le curseur de la période est utilisé car celui-ci change aussi la valeur de l’index.

Conclusion

Room-Leaflet est le premier composant utilitaire basé sur Room que nous publions, nous espérons que d’autres suivront pour constituer un éco-système autour de Room.

Vous trouverez également sur notre Github, un dépôt nommé Room-Test qui contient une page HTML avec des exemples de codes JavaScript utilisant Room et Room-Leaflet en version ECMAScript 6 (6 exemples de cartes, dont les 2 présentés ci-dessus). Une autre page HTML du dépôt permet de tester les versions non ECMAScript.