Discussion :

[GuttV]

Bonjour,
Je vais encore avoir besoin de conseils.

Voilà, j'utilise React et Leaflet pour gérer une carte. Sur celle-ci, un bouton permet de la fermer.
Voilà sur quoi je pars :
Mon composant parent comprend ce ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
          {Info.show &&
            <Map
              setInfo={setInfo}
              Info={Info}
            />
            }

où Info.show est un Hook qui vaut true ou false.
Dans le composant de ma carte, je charge ma carte comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
    useEffect(() => {
        const map_instance = display_map();        // clean up
        return () => {
            if (map_instance._loaded) {
                map_instance.remove();
            }
        };
    });
    return (
        <div id="map_container" ref={map_container_ref} className='Map'></div>
    );

Pour mon bouton, je modifie mon Info.show et le passe a "false".

Mon soucis, est que la carte disparaît bien, mais quand je veut a nouveau la faire réapparaître, le container s'affiche vide, le chargement de la carte ne se fait pas.

A noter que j'ai essayé de mettre un [props.Info.show] en dépendance de mon useEffect, mais sans effets (sans jeu de mots)

Je butte sur quelque chose, mais quoi ...
Vous n'auriez pas une idée ?

Merci par avance !

[NoSmoking]

Bonjour,

Mon soucis, est que la carte disparaît bien, mais quand je veut a nouveau la faire réapparaître, le container s'affiche vide, le chargement de la carte ne se fait pas.

Bizarre sauf si tu détruis la map lorsque tu passes ton conteneur en display:none !

Tu peux essayer un map.invalidateSize() au ré-affichage du conteneur.

[GuttV]

Merci pour la réponse,

C'étais une belle voie, mais ça ne change rien ma carte se ré-affiche toujours vide...

[NoSmoking]

J'en conclu que l'instance de la map est supprimée ce qui paraît plausible à la lecture de map_instance.remove() dans ton code !
Dans ce cas tu devrais avoir des messages d'erreur dans la console, touche F12.

Le masquage/affichage d'une map ce fait de façon très triviale, la plupart du temps.
Un bouton :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button onClick={showHideMap}>Show/Hide</button>

et une simple fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
const showHideMap = useCallback(() => {
  const conteneur = map.getContainer();
  const visible = conteneur.offsetHeight;
  conteneur.style.height = visible ? 0 : "400px"; // on peut également jouer avec une classe CSS
}, [map])

... on ne supprime pas la map.