[UI/UX] Map icons

[balagurova]

Description

Let's align map icons with the material icons we use for other UI and discuss their placement / functionality if needed.

Screenshots

No response

Mockup URL/file

https://www.figma.com/design/xPemdxTmvPi2homUZ2dyw0/UNDP-GeoHub-UI?node-id=3851-5899

[balagurova]

I’ve added a draft mockup, but there are details to discuss—let’s go over them on our next call

[JinIgarashi]

@balagurova Thank you for suggesting redesigning map icons.

I like placing tour button at top-right of map.

I would keep original maplibre attribute control at bottom right of map. We don't need to change this behaviour. Also, most of map application has attribution info at bottom right.

It looks good generally, but I am not sure which functionality for each icon you are suggesting. Could you explain more?

Navigation Control, Terrain control and Geolocate control are currently using from maplibre default control. state of control buttons can be different depending on what users interact with the map.
For example, when users tilted map, or rotated map, third button of navigation control will be changed. Geolocate control is more complex. when GPS is not available, when GPS is turned off or turned on. there are several patterns of button state.

Could you design those buttons for each state clearly?