LeafletJS et les popovers / modales d'Ionic

Une solution rapide et efficace au problème de compatibilité entre les cartes #leafletjs et les popovers / modales #ionic.

Le blog Makina-corpus

Une solution rapide et efficace au problème de compatibilité entre les cartes #leafletjs et les popovers / modales #ionic.

Le contexte

Quoi de mieux qu'une petite carte Leaflet (optimisée mobile) pour accompagner notre nouvelle application hybride réalisée avec le framework Ionic ?

Le problème

SI vous avez eu besoin d'intéractions suplémentaire sur l'une de vos vues, il est probable que vous ayez implémenté un menu  ou une action amenant à l'ouverture d'une popover (ou une modale) Ionic.
Mais si l'on teste l'ouverture du menu après l'instanciation de la carte, cette dernière perd ses marqueurs et ses repères.

L'analyse

La raison derrière cela est le déclenchement par Ionic, pour s'assurer le dimensionnment correct de sa modale, de l'événement resize du navigateur. Les popovers d'Ionic utilisant en partie le système de modale, le même bogue survient dans ce cas.
Or il se trouve que Leaflet écoute cet évènement pour redimentionner automatiquement la zone de rendu de la carte si la taille de la fenêtre change.

La solution

La solution réside donc tout simplement dans la désactivation de cette écoute, à ajouter dans les options à la création de la carte :

trackResize: false

Attention : cela désactivera le changement automatique de taille de Leaflet, pensez-donc à prévoir l'utilisation de invalidateSize dans le cas où le périphérique changerait d'orientation !

Formations associées

Front-end

Développement d'applications JavaScript

A distance (foad) Du 25 au 28 janvier 2022

Voir la formation

SIG/Webmapping

Leaflet

Toulouse 1er trimestre 2022

Voir la formation

Actualités en lien

Image
#30DayMapChallenge 2021
13/01/2022

Retour sur le #30DayMapChallenge 2021

Si vous êtes friands de cartes et utilisateur de Twitter, vous n'avez pas manqué en novembre 2021 de voir passer ce tag sur le réseau social #30DayMapChallenge et l'émulation que cela a suscité dans la communauté des cartographes 🗺️ !

 

Voir l'article
Image
Déformation de la carte selon modèle de terrain et ombrage. Vue avec Mabox GL JS 2, non libre. MapLibre GL supportera bientôt cette même fonctionnalité.
06/01/2022

Optimisation de tuiles de MNT RGB pour ombrage dynamique avec Mapbox GL / MapLibre GL

L’ombrage dynamique et l'élévation du terrain utilisent des tuiles raster dans un encodage spécifique. Ces tuiles ont le défaut d’être assez lourdes. Ici nous étudions une solution qui permet de réduire de 60 % ce volume.

Voir l'article
Image
TerraObs_demo
30/11/2021

Avec TerraObs redynamisez l'activité commerciale de votre centre-ville !

Découvrez TerraObs, une application de visualisation de l’immobilier commercial de votre centre-ville en temps réel.

Voir l'article

Inscription à la newsletter

Nous vous avons convaincus