L'onglet de basculement de données empêche le téléchargement de la carte du dépliant

Cette question se pose lorsqu'une carte de dépliant dans un onglet de basculement de données ne parvient pas à se télécharger correctement. . La carte fonctionnait auparavant lorsqu'elle était affichée en dehors de l'onglet.

Cause

Leaflet initialise la carte lors de la lecture de la taille du conteneur. Lorsque le conteneur est initialement masqué ou que ses dimensions sont modifiées, Leaflet n'est pas au courant des modifications, ce qui entraîne des téléchargements de vignettes incorrects. Ce problème est courant lors de l'utilisation d'onglets ou de panneaux modaux dans des frameworks tels que Bootstrap.

Solution

Déclenchez une mise à jour de la taille du conteneur en appelant map.invalidateSize() lorsque le Le panneau d'onglets s'affiche. Cela peut être fait via un écouteur sur le clic du bouton d'onglet.

Implémentation de l'écouteur de clic de bouton d'onglet

Pour l'implémentation de l'écouteur de clic de bouton d'onglet, reportez-vous à Stack Overflow ou une documentation spécifique au framework.