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

Toulouse ou distanciel A la demande

Voir la Formation Développement d'applications JavaScript

Formations SIG / Cartographie

Formation Leaflet

Nantes - Toulouse - Paris ou distanciel A la demande

Voir la Formation Leaflet

Actualités en lien

Zones de vigi­lance : mieux infor­mer les usagers sur les condi­tions de pratique avec Geotrek

01/09/2026

Les espaces natu­rels sont des lieux de partage où se côtoient de nombreux usages : randon­née, pasto­ra­lisme, chasse, travaux fores­tiers, événe­ments ponc­tuels ou encore acti­vi­tés artis­tiques.
Voir l'article
Image
Zones de vigilances

De la donnée OpenS­treet­Map aux appli­ca­tions métier : comment Makina Corpus accom­pagne les orga­ni­sa­tions

30/07/2026

OpenS­treet­Map est souvent présenté comme une alter­na­tive libre aux cartes proprié­taires. Pour­tant, sa véri­table richesse ne se limite pas à la carte. C’est un commun numé­rique qui rassemble une commu­nauté mondiale de contri­bu­trices et contri­bu­teurs autour d’une même ambi­tion : produire et main­te­nir une base de données géogra­phiques libre­ment réuti­li­sable. Depuis de nombreuses années, Makina Corpus parti­cipe à cet écosys­tème, convain­cue que les communs numé­riques consti­tuent un levier d’in­no­va­tion, de coopé­ra­tion et de souve­rai­neté.  
Voir l'article
Image

Geotrek 2025–2026 : nouvelles fonc­tion­na­li­tés et grands chan­tiers à venir

27/05/2026

Les années 2025 et 2026 ont été parti­cu­liè­re­ment riches en évolu­tions pour l’éco­sys­tème Geotrek. De nombreuses fonc­tion­na­li­tés ont été déve­lop­pées afin d’amé­lio­rer les perfor­mances, faci­li­ter l’ad­mi­nis­tra­tion des données et enri­chir les usages carto­gra­phiques. Cet article propose un tour d’ho­ri­zon des prin­ci­pales évolu­tions déployées ces deux dernières années sur Geotrek-admin, Geotrek-mobile et Geotrek-widget, avant d’ou­vrir sur plusieurs grands chan­tiers actuel­le­ment en prépa­ra­tion pour les prochaines versions de Geotrek.
Voir l'article
Image
Geotrek-admin

Inscription à la newsletter

Nous vous avons convaincus