Can I influence the position or sizing of uMap caption or browser? It's out of sight at the bottom :-(

[Pypes]

I help renovating a Web site of a non-profit organization in Nepal. They need maps and I am suggesting uMap maps embedded as iframes into their Web site. Unfortunately, I need to assume that 90% of their Web site visitors come across a uMap map for the first time. They will be confused as I am unable to manage that caption or browser appear in the upper left as a popup.

The Web site bases on the widely used WordPress scheme Travel Tour by Good Layers. The pages with maps have a 2/3 - 1/3 column layout on a PC, i.e. the map is getting about 2/3 of the width of the page. On a mobile device the map is getting all width of the device screen but a narrow frame around it which is needed to allow users to scroll the page and not only pan the map. In both cases the caption box or the browser box appear at the bottom of the map and cover the entire space from the left edge to the right edge. This means that even if users scroll down a bit so that caption or browser box start becoming visible, they are perceived as something else following the map, not as a control on the map. For illustration, see the PC screenshot below. As a result, clicking the layers or the info control in the uMap menu in the upper left does not seem to make any difference for them. But I need users to see and understand caption or browser popup right from the beginning, as I am initially showing only the core information on one layer, and people shall activate more layers for more details.

As the screenshot shows, the caption box displays a lot of white space. Less than half of the width of the box would be needed to display the control icons and the layer names without clipping.

Do I miss out any configuration in the uMap map to force caption/browser to appear in the upper left clearly visible as a popup?

Do I need to make a change to the iframe specification to achieve the wanted result? The iframe tag is this one (without the space after “<”):

< iframe width=“100%” height=“1200px” frameborder=“0” allowfullscreen allow=“geolocation” src=“//umap.openstreetmap.fr/en/map/makalu-base-camp-trek_1103423?scaleControl=true&miniMap=false&scrollWheelZoom=true&zoomControl=true&editMode=disabled&moreControl=false&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=datalayers&captionBar=false&captionMenus=true”>< /iframe>

[mmm269]

maybe the iframe is not the more practical solution. with wordpress, you can use this plugin :

OSM – OpenStreetMap

this plugin manage maps directly in pages and then you can add more informations on the map with your own plugin.

[Pypes]

@mmm269 : Thanks for your hint! uMap is much richer in functionality compared to this “OSM – OpenStreetMap” plugin. For instance, I use layers extensively.

I opened a change request with the uMap project which is now called Better support for panels in portrait mode. Decision making is not fast, but I still hope for the best.

With uMap, a workaround is lowering the height of the space for the map in the iframe definition. At least with the WordPress scheme that we use, the height is the same across all device types and whether held in portrait or landscape mode. About 1200 px height would be ideal for an average mobile phone held in portrait mode.

But uMap seems to compare the available width and height. When this results in a portrait side ratio rather than a landscape side ratio, uMap seems to place caption and browser panes at the bottom using the entire space from left to right, otherwise to the right of the left hand icons. The available width largely depends on the device type and whether it is held in portrait or landscape mode. But the iframe height definition is a fixed value across all client devices and modes of holding them. I would need to reduce it to 350px for the space on my mobile phone to become landscape. With this height definition, the map would appear in an excessive panoramic format on an average laptop.

As a workaround, I am now using 600px as a compromise height value. On normal devices caption and browser panes will not be completely out of sight at 600px. Panoramic formats will also not be experienced on typical desktop/laptop devices. On small devices held in portrait mode only about half of the available height will be made use of at 600px.