Popup carte pas responsive

[johanricher]

Comportement attendu

Quand je clique sur une restriction sur la carte, je souhaite, autant que possible, que le popup qui s'affiche ne dépasse les limites de mon écran.

Comportement réel

Le comportement semble aléatoire comme on peut le voir sur la capture ci-dessous

• Parfois le popup ne bouge pas quand on déplace la carte
• Parfois le popup se déplace pour rester dans les limites de l'écran (comportement attendu)
• Parfois le popup a une hauteur telle (volume de texte important), qu'il est impossible qu'il soit affiché dans les limites de l'écran

Pour reproduire

• Visiter la page carte https://dialog.beta.gouv.fr/carte
• Cliquer sur différentes restrictions
• Déplacer (ou pas) la carte

Traces et captures d'écran

Screencast.from.2024-10-15.18-23-35.webm

Pistes de résolution

Etant donné les contraintes du design web (les personnes utilisent DiaLog dans des conditions différentes et avec des écrans de tailles et de résolutions différentes), il n'est pas possible à mon avis de garantir l'affichage du popup dans les limites de l'écran pour tout le monde et dans tous les cas.

Cependant, il me semblerait que limiter la hauteur du popup serait une première amélioration simple, en limitant également l'affichage du texte à une certaine longueur pour les différentes propriétés affichées dans le popup.

Par ailleurs il semble y avoir un bug dans le comportement responsive du popup, qui parfois ne fonctionne pas. Le comportement attendu étant que le popup se déplace pour rester dans les limites de l'écran.

Le popup a vocation à synthétiser les informations, le bouton "Voir plus" permet explicitement d'accéder à l'ensemble des informations (non tronquées) sur la page de l'arrêté.

En résumé mes propositions seraient :

• auteur du popup limitée (nombre de pixels ou pourcentage de hauteur de la carte ?)
• résoudre le bug de comportement responsive

Entre autres pistes à explorer avant de décider ce qu'on fait.

[florimondmanca]

A priori le comportement observé est contrôlé par l'option anchor de Maplibre https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/PopupOptions/#anchor

Par défaut "the anchor will be dynamically set to ensure the popup falls within the map container with a preference for 'bottom'."

On a donc l'option de mettre un ancrage "fixe", par exemple on peut essayer bottom pour toujours afficher la popup au-dessus du point cliqué (sans replacement dynamique)

Pour la question de la hauteur, on peut aussi envisager d'appliquer une hauteur max avec apparition d'un scroll sur le contenu, en s'assurant que le bouton "Afficher les détails" reste affiché...

[johanricher]

Par défaut "the anchor will be dynamically set to ensure the popup falls within the map container with a preference for 'bottom'."

On a donc l'option de mettre un ancrage "fixe", par exemple on peut essayer bottom pour toujours afficher la popup au-dessus du point cliqué (sans replacement dynamique)

Si je comprends bien le paramétrage par défaut (anchor = bottom) est déjà le comportement actuel. Qu'est-ce qui fait que le comportement actuel (problèmes que je décris dans la description du ticket) ne correspond pas toujours à celui attendu ?

Pour la question de la hauteur, on peut aussi envisager d'appliquer une hauteur max avec apparition d'un scroll sur le contenu, en s'assurant que le bouton "Afficher les détails" reste affiché...

Pas favorable au scroll sur un pop up. Le but c'est que ce soit synthétique, on a les infos principales dans le pop up, et on ouvre la page de l'arrêté ("Voir les détails") pour avoir toutes les infos.