Caption and browser out of sight at the bottom

[p-p-s]

Describe the bug
When a map is embedded into a Web page, depending on the space available for the map, the caption as well as the browser pane is unnecessarily displayed at the bottom of the map covering the entire space from the left edge to the right edge. This can be totally out of sight without scrolling down, and when scrolling down it is easily perceived as something not belonging to the map.

You may not view this as a bug, rather as an enhancement request. But definitely it is a serious usability issue, especially for newbie uMap viewers. Even for me, who edited uMap maps before and was familiar with the functionality of the buttons, when I embedded the map in a Web site that grants about 2/3 of the overall width to the map, when checking it in a full-size browser window on a 1920 x 1080 screen, I thought the caption would not be shown and clicking the layers icon to bring up the browser would also not work. It took me time to realize that the caption pane was not missing, but at the bottom of the map, fully out of sight. When I scrolled down and the pane started to become visible, I first thought the text on white background that started appearing was something following the map on the Web page, not part of the map. Many Web site visitors may already have walked away because of the impression "it's not working".

This is especially annoying as uMap gives the pane far more space than needed. The following screenshot demonstrates that the caption pane would have easily fit onto the map close to the upper left corner. In a normal window it is already very generous with white space at the layer names, maybe as it defines the size of the pane to support maximum possible layer name lengths rather than sizing for the currently given layer names.

To Reproduce
See the appearance at https://sesfkhandbari.org/new/tour/shiva-dhara-trek/#map
uMap instance: https://umap.openstreetmap.fr as of 16 Sep 2024
Map used: https://umap.openstreetmap.fr/en/map/makalu-base-camp-trek_1112563 (with this direct link it displays as it shall do)
Integrated in the WordPress scheme Travel Tour by Good Layers using the Sidebar Wrapper design, adding the map with the following tag:
<code><iframe src="//umap.openstreetmap.fr/en/map/makalu-base-camp-trek_1112563?scaleControl=true&amp;miniMap=false&amp;scrollWheelZoom=true&amp;zoomControl=true&amp;editMode=disabled&amp;moreControl=false&amp;searchControl=null&amp;tilelayersControl=null&amp;embedControl=null&amp;datalayersControl=true&amp;onLoadPanel=caption&amp;captionBar=false&amp;captionMenus=true" width="100%" height="1200px" frameborder="0" allowfullscreen="allowfullscreen"></iframe></code>

Expected behavior

1. The caption pane (as well as the browser pane) should in any case be shown close to the upper left corner of the map, right to the menu. Let it cover as much space as it needs, but just keep a tiny stripe of map visible to the right of the caption (browser) pane. That will make instantly clear that it is a pane on top of the map and that it can be closed to make the map fully visible.
2. Ideally, size the caption/browser pane width for the actual current layer names.
3. Should you for any reason don't want to place caption and browser anyway close to the upper left corner, give the uMap editors a checkbox that allows them to force placement of the panes close to the upper left corner, accepting that part of the layer names may be clipped off on tiny screen spaces.

Desktop:

• OS: Windows 10
• Screen resolution: 1920 x 1080
• Edge, 128.0.2739.67 (Official build) (64-bit), fill-size window

Smartphone:

• Device: Xiaomi Mi 8 SE
• OS: Android 9
• MIUI 10.3 by xiaomi.eu 8.12.27 Beta
• Browser: Chrome, 128.0.6613.128

Additional context

• WordPress scheme Travel Tour by Good Layers, updated to the current version
• Page design based on the "Sidebar Wrapper" template, placing the map in the wider column

[davidbgk]

The map located at https://sesfkhandbari.org/new/tour/shiva-dhara-trek/#map doesn't look to have the correct link (https://umap.openstreetmap.fr/en/map/makalu-base-camp-trek_1103423 vs. https://umap.openstreetmap.fr/en/map/makalu-base-camp-trek_1112563 which leads to a 404).

I don't understand why you put the iframe within a <code></code> HTML tag?

[p-p-s]

Hi David, sorry for the link which did not work for you. I should have tested the effective publishing in a different browser. If you try it now, these links should now work:

• https://sesfkhandbari.org/new/tour/shiva-dhara-trek/#map
• https://sesfkhandbari.org/new/tour/makalu-base-camp-trek/#map

Regarding your question about the <code></code> HTML tag: I don't recall anymore whether it was the Good Layers' Travel Tour theme itself that entered already <code></code> in the Text area for the element or I thought, I should click the "code" button there because I want to enter the iframe tag which is HTML code, or whether any Good Layers documentation told to do this. Anyway, I now removed the <code></code> around the iframe tag, which works, but does not make any difference. The second link above is now without <code></code>:

Please, check the situation on a PC and also on a mobile phone. The following screenshot is from a Xiaomi MI 8 SE, Android version 9, MIUI 10.3 in an updated Chrome browser:

I thought already that you, actually yohanboniface, might remove the bug label. But this is a serious usability issue. Compared to this one, the three other tickets which I opened are all peanuts.

To illustrate the usability issue: I am supporting a non-profit Makalu Arun Social Trek organization in Nepal. The links above point into their test website. As you can see they are able to maintain a large website based on a WordPress theme. But the guy I am coaching was not able to reach the opened caption pane to activate another layer. He did not understand that he would need to take the cursor out of the map in order to scroll down to the caption pane. I was with him in a Google Meet session and tried to make him understand that he needs to move the cursor out of the map in order to be able to scroll down. He did not understand. Instead he was panning and panning and zooming in and out. This was the case for 15 minutes while I was trying to instruct him verbally, seriously. But this person is able to maintain a rather complex WordPress site, i.e. he is somewhat IT-savvy. For me this means that average users will also not get to the Caption pane at the bottom out of sight. They will never activate any other layer and will judge that the respective icons in the left menu just do not work - and leave the website.

[yohanboniface]

Can you summarize the issue in one sentence, without bold, please ?

[p-p-s]

On mobile phones and on PCs in spaces smaller than a full webpage, caption as well as browser pane appear at the bottom, out of sight and many people will not understand how to navigate to it and that there are more layers to activate. Even people who know how to scroll down will often think the caption or browser does not anymore belong to the map as it appears as text following the map.

[yohanboniface]

Thanks, this is clearer and more actionnable. Though I'm not totally convinced it's a pure uMap issue. For example, in your site, the page background and the map panels are of same color. Maybe distinguish them would help (or adding a border to the iframe) ? Maybe decreasing the iframe height also (so the left controls remain visible) ?

@Aurelie-Jallut thoughts ?

[Aurelie-Jallut]

If the problem is that the panel seems to be separate from the map, could we reduce its width a little to allow the map to be seen on the left and right?

(Visually losing the left-hand buttons seems more problematic to me).

[p-p-s]

I would prefer reducing the width by the width of the left menu "bar" and a tiny bit on the right hand side, for instances 10 px, just enough to see that it is a popup on top of the map. With that it could take its standard position close to the upper left corner. Map editors would be responsible to design the layer titles short enough so that they are visible (or still understandable with some of the title text clipped) on a normal mobile phone, even with some space surrounding the map to allow for scrolling.

Should this not be generally acceptable, how about a new switch somewhere in "Map advanced properties" that allows enforcing the caption and browser panes into the standard position close to the upper left corner?