Accueil / Blog / Métier / 2015 / LeafletJS et les popovers / modales d'Ionic

LeafletJS et les popovers / modales d'Ionic

Par Simon Bats publié 26/06/2015, édité le 27/01/2016
Une solution rapide et efficace au problème de compatibilité entre les cartes #leafletjs et les popovers / modales #ionic.
LeafletJS et les popovers / modales d'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.

Leaflet and Ionic modale issue

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

Leaflet and Ionic modale issue solved

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 !

ABONNEZ-VOUS À LA NEWSLETTER !
Voir aussi
Comment mettre en place Angular Universal Comment mettre en place Angular Universal 29/06/2017

Toutes les étapes détaillées et expliquées. Les pièges à éviter.

Les nouveautés de Typescript 3.0 Les nouveautés de Typescript 3.0 13/08/2018

Typescript 3.0 vient de sortir, voici quelques nouveautés... et des exemples !

Mise en pratique de RxJS dans Angular Mise en pratique de RxJS dans Angular 13/08/2018

Les quelques bases suffisantes pour bien utiliser RxJS dans Angular. Cet article a été écrit ...

Ionic 2 : les nouveautés (retours de l'AngularConnect) Ionic 2 : les nouveautés (retours de l'AngularConnect) 23/10/2015

Des changements radicaux et bienvenus par rapport à la version 1 d'Ionic.

React 16.3 : Introduction de la context API React 16.3 : Introduction de la context API 06/04/2018

React 16.3 apporte son lot de nouveautés, mais surtout la version stable de la context API.