Makina Blog

Le blog Makina-corpus

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 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

Formations Front end

Formation Développement d'applications JavaScript

Paris Du 8 au 10 octobre 2025

Voir la Formation Développement d'applications JavaScript

Formations SIG / Cartographie

Formation Leaflet

Toulouse Du 4 au 5 décembre 2025

Voir la Formation Leaflet

Actualités en lien

Geotrek et OpenS­treet­Map : Mise en place d’une passe­relle pour une connais­sance du terri­toire enri­chie

08/09/2025

Dans l’uni­vers des logi­ciels open-source, les plus belles inno­va­tions naissent souvent de la rencontre entre des commu­nau­tés qui partagent les mêmes valeurs. Aujour­d’hui, nous célé­brons une avan­cée majeure pour Geotrek : la créa­tion d’une passe­relle avec OpenS­treet­Map (OSM), la plus grande base de données carto­gra­phique colla­bo­ra­tive au monde. Plus qu’une simple fonc­tion­na­lité, ce projet est le fruit d’un travail d’in­gé­nie­rie et de recherche appro­fondi.
Voir l'article
Image
Logo d'illustration pour la passerelle entre OSM et Geotrek

Instal­ler Geotrek : avec ou sans segmen­ta­tion dyna­mique ?

08/09/2025

Geotrek-admin propose deux modes de fonc­tion­ne­ment pour gérer les objets liés aux tronçons : avec ou sans segmen­ta­tion dyna­mique. Ce choix a un impact impor­tant sur la manière dont sont stockées et gérées les données, et sur les possi­bi­li­tés d’édi­tion, de cohé­rence topo­lo­gique et d’in­ter­opé­ra­bi­lité avec d’autres systèmes. Dans cet article, on vous explique ce qu’est la segmen­ta­tion dyna­mique ainsi que le réfé­ren­ce­ment linéaire, ses avan­tages, ses limites, et dans quels cas il est perti­nent (ou non) de les utili­ser.
Voir l'article
Image
Réseau de tronçons dans Geotrek

Makina Corpus spon­so­rise State of the Map 2025

05/06/2025

Du 13 au 15 juin 2025 à Tours, Makina Corpus a le plai­sir d’an­non­cer sa parti­ci­pa­tion à State of the Map 2025 et d’ap­por­ter son soutien à l’évé­ne­ment de la commu­nauté OpenS­treet­Map en le spon­so­ri­sant.
Voir l'article
Image
State of the Map Tours

Inscription à la newsletter

Nous vous avons convaincus