[MAP] Performance issue

[urien]

Describe the bug
Lorsqu'on utilise la carte le fonctionnement est très ralenti, presque impossible. Ce phénomène perdure si on va sur d'autres parties de l'application Grottocenter. Par contre si on n'utilise pas la carte le fonctionnement de Grottocenter demeure fluide. Cela semble venir à une erreur dans le code qui provoque une fuite de mémoire

Expected behavior
Cela empèche d'utiliser Grottocenter car la carte est un élèment essentiel

Screenshots
Ouverture de firefox et du gestionaire de processus sur Windows

Ouverture de Grottocenter sur Firefox

Ouverture de la carte sur Firefox

En fait je fais le ticket mais cela fonctionne parfaitement pour moi. Il faudrait que ceux qui rencontrent le pb fassent le même test.

[urien]

Message de @Souterweb
Alors là ... c'est surprenant et intéressant !

Si je démarre avec la fenêtre du navigateur réduite à environ 1/10 de mon écran (qui est un grand 23 pouces) et que j'ouvre ensuite le mode carte, alors je peux lui faire subir toutes les tortures possibles et imaginables Grotto ne plante pas.

Quand je suis sur la zone qui m'intéresse, au niveau de zoom qui me plait, avec la carte que je veux, alors j'agrandis la fenêtre et le tour est joué.

Ceci explique pourquoi il n'y a pas de plantage quand je manipule la vignette carte de la fiche cavité : c'est parce qu'elle est petite !

CONCLUSION : les soucis de plantage sont liés à la taille d'affichage de la carte à l'écran.

[Clm-Roig]

Ma config : Manjaro Linux / Firefox 97 / écran de 14 pouces / i7 / 12Go de RAM

je n'ai aucun souci, que ce soit en petit ou en grand. J'ai du mal à voir en quoi la taille de l'écran pourrait jouer à part sur une config vraiment "limite" en RAM / GPU / CPU...

Y a juste un truc qui me paraît "normal" : quand j'affiche les organisations et que je suis très dézoomé, mon ordinateur se met à ramer énormément. C'est "normal" parce que les organisations ne sont pas clusterisées comme le sont les entrées de cavités. Donc l'application essaie de m'afficher plusieurs milliers d'organisations quand je suis au niveau de l'Europe entière par exemple.

Est-ce que ce serait ça le souci ?

[bsoufflet]

Ma config :
PopOS (ubuntu), Firefox, ecran 15 pouces, i9, 32Go de ram

J'ai le problème très vite après quelques zooms rapides, deplacement, dezoom sur la carte..
Mon PC se met à souffler et j'ai le message de firefox indiquant que l'onglet est très lent...
Il est ensuite difficile de quitter la map via le menu de gauche...

[Clm-Roig]

Je viens de lagguer moi aussi finalement sur des zones très chargée et zoomées (comme Benjamin),

Pas de fuite de mémoire signalée par React, l'API répond vite et sans problème. Je pense que c'est dû au recalcul des positions des entrées qui est très coûteux.

[Souterweb]

Le 06/04/2022 à 11:38, Benjamin a écrit :

J'ai le problème très vite après quelques zooms rapides, deplacement, dezoom sur la carte.. Mon PC se met à souffler et j'ai le message de firefox indiquant que l'onglet est très lent... Il est ensuite difficile de quitter la map via le menu de gauche...

Je me sens moins seul... Domi

[bsoufflet]

@Clm-Roig @maximenathan : J'ai fait un peu d'investigation sur ce problème.
Je réussis à le reproduire facilement dès que je passe à un niveau de zoom où l'on affiche les markers des entrées (et plus le clustering) et lorsqu'il y a beaucoup de markers.
Le problème ne semble donc pas venir de la fonction de clustering.

En faisant des recherches je suis tombé sur cela : https://stackoverflow.com/questions/63036505/performance-issues-with-1k-markers-with-popups-in-react-leaflet

Dans ce stack overflow le problème est les popups associés à chaque marker qui sont tous dans le DOM meme si ils ne sont pas affichés.
J'ai donc désactivé les popups sur l'app grottocenter et cela est tout de suite beaucoup plus fluide :)

J'ai également vu qu'il fallait mieux utiliser le mode "canvas" (au lieu du mode SVG par défaut) mais j'ai l'impression que c'est déjà le cas pour nous. A part peut etre preferCanvas={true} qu'il faudrait peut etre mettre sur <map> ?

J'ai également testé de remplacer les markers de type icon par des circles pour voir si cela était plus performant mais ca ne change pas grand chose.

Enfin, je pense qu'il serait bon de ne pas arriver sur la map avec un zoom=3 "monde" car cela provoque immédiatement une requete d'API de plus de 2Mo qui récupère la totalité des coordonnées de grottocenter...

Je propose de changer dans config.js :

export const defaultCoord = { lat: 47.5, lng: 19 }; // Budapest
export const defaultZoom = 6; 

La position Budapest me semble pas mal car c'est centré sur l'Europe donc plusieurs pays de visible sans être une zone avec beaucoup trop de cavités à charger initialement. On pourra plus tard adapter la position par défaut au pays de l'utilisateur ;)

Je propose également de mettre le minZoom à 5 au lieu de 3 :

minZoom={5}

L'objectif était d'empêcher un zoom "monde entier" qui provoquera le chargement de nouveau de 60000 coordonnées GPS...

J'attends donc vos retours :)
@Clm-Roig ou @maximenathan si vous avez un moyen d'implémenter facilement la solution des popups à ne pas préconstruire ;) ...

@urien @Souterweb

[urien]

Cela me semble être une bonne solution pour résoudre le pb relevé rapidement

[Clm-Roig]

Bonne idée, je suis d'accord avec tout. Par contre je ne maîtrise pas du tout le code de la carte... Je viens d'y jeter un coup d'oeil et de prime abord je ne vois pas comment faire pour les popups.