search

umap-project / umap

uMap lets you create maps with OpenStreetMap layers in a minute and embed them in your site.
https://umap-project.org
Other
1.16k stars 221 forks source link

Caption and browser out of sight at the bottom #2140

Open p-p-s opened 3 weeks ago

p-p-s commented 3 weeks ago

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. image

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:

Smartphone:

Additional context

davidbgk commented 3 weeks ago

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 commented 2 weeks ago

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:

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>: image

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: image

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 commented 2 weeks ago

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

p-p-s commented 2 weeks ago

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 commented 2 weeks ago

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 commented 1 week ago

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 commented 1 week ago

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?