Gallery
See what others have created
boiling_ox
@boiling_ox
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.
What to deliver
- Design the default map view with a selected location.
- Design the bottom sheet in its expanded state with name, address, and actions.
- Show the sheet handle and how the map remains partially visible behind it.
- Include the primary location actions as clear tappable controls.
- Design one secondary state for a different sheet height or partial drag position.
Keep the selected pin visible above the sheet edge so the place stays connected to the map while details are open.