popup – How to handle map section navigation in mobile

Given a section which takes full height of the device’s viewport and have the following controls at disposal of the user:

  • Can pan through the map within a certain boundary (a country);
  • Can select an state to view it’s information;
  • Can input or select a city’s name to view it’s information;
  • Can see only one of the informations simultaneously (accordion).

How does one accommodate these functionalities in a handheld device (i.e. mobile phones)? Without annoying the user with:

  • Mistakenly get his touch input while scrolling down the page to pan the map (“scroll hijack”?);
  • Visual pollution with too much screen elements (e.g.: Map + Information panel);
  • Very small font size.

Here’s what the designer came up with:

Map mobile version

Disclaimer: he/she doesn’t have much experience with UX/UI nor have I.

I came up with this prototype*:

Initial state State selection state City selection state
Map initial state Map state selection Map city selection

*Made in figma

But I don’t think it is the “best” solution, for the following reasons:

  • The user don’t see the selection on the map, it would just popup above it, giving the animation of the selection in a window of 200 milliseconds (maybe delay it to ~750 milliseconds);
  • The user’s pan interaction is removed, because the panel is now above it.

But it have its pros:

  • The user is given space top and bottom to scroll the rest of the page, the section itself is about 75% of the device’s total viewport height;
  • No extra information noise/pollution on the initial state (inert, i.e.: no first interaction);
  • The user is given an option to exit the information panel (top right corner).

My initial question remains, as I’m not too confident with this “solution” that I’ve provided. I hope it isn’t too subjective and there are better solution for this.

Here is a preview on desktop:

Initial state State selection state City selection state
Map initial state Map state selection Map city selection

The most important elements of the map section are:

  • The map itself;
  • The information panel.

English is not my first language so any edit/suggestion is appreciated.