
Map Detail with Bottom Sheet
Design a mobile map screen centered on a single location, with the map staying visible as the base layer. The pin or selected place should feel active before the detail panel appears.
When the location is tapped, a bottom sheet slides up and becomes the main information surface. It should show the place name, address, and a small set of actions tied to that location.
The sheet needs to feel anchored to the map, not detached from it. The user should still understand where the place sits in context while reading the details.
Make the transition between map and sheet part of the experience. The map, pin, and sheet should work together so the selected place is obvious at a glance.
This is a good screen for balancing spatial context with quick decision-making: scan the map, inspect the place, then act from the sheet.
Keep the selected pin visible above the sheet edge so the place stays connected to the map while details are open.
Better at UI design with every challenge
Select complexity and generate challenge.
Pick a platform.
Get design challenge updates in your inbox
New prompts and challenge updates. It’s free.