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

À distance (FOAD) Du 2 au 4 avril 2025

Voir la Formation Développement d'applications JavaScript

Formations SIG / Cartographie

Formation Leaflet

Toulouse Du 1 au 2 juillet 2025

Voir la Formation Leaflet

Actualités en lien

Makina Corpus parti­cipe et spon­so­rise State of the Map du 13 au 15 juin 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
Encart State of the Map 2025

Mini-guide à l’usage des collec­ti­vi­tés : l’Open Data, entre néces­sité et oppor­tu­nité

15/11/2024

Tout ce que vous avez toujours voulu savoir sur l’Open Data. Petit guide à desti­na­tion des collec­ti­vi­tés pour l’ap­pré­hen­der et se l’ap­pro­prier.
Voir l'article
Image
Guide ODbL

Makina Corpus Terri­toires : rentrée riche autour de la donnée et des rencontres

05/11/2024

Chaque rentrée apporte son lot d’op­por­tu­ni­tés pour faire avan­cer les projets autour de la données au service des terri­toires. Le calen­drier de Makina Corpus en la matière a été parti­cu­liè­re­ment dense en événe­ments.
Voir l'article
Image
Rentrée 2024

Inscription à la newsletter

Nous vous avons convaincus