Gallery
See what others have created
elfreda
@elfreda
Map
Design a map screen for finding places and starting a route. The map is the main surface, with search and filters above it and results shown in a list or bottom sheet below. Keep the layout focused on one job: discover a place, inspect it, and act on it.
Show a clear pin state for selected locations. When a place is tapped, reveal a compact detail card with name, category, rating, hours, distance, and one primary action such as Directions, Save, or Call. Nearby pins should stay visible but recede so the selected place reads first.
Include controls that are expected on a real map: zoom, recenter on current location, compass/orientation, and transport mode for directions. If the user starts routing, show origin, destination, ETA, and a route preview without forcing them off the map.
Design the awkward states too: loading tiles, empty search, no nearby results, and permission denied for location. Each state should keep the user oriented and offer a next step, such as changing filters, searching again, or enabling location access.
What to deliver
- Design the map canvas with zoom controls, compass, and current-location affordance.
- Add a searchable place list or result tray with filters for category, distance, and open-now state.
- Show selected pins with a clear detail card for name, rating, hours, and primary action.
- Include route preview and directions state with start, destination, ETA, and transport mode.
- Handle empty, loading, and no-results states with obvious next steps.
Inject some local flavor by including unique landmarks or cultural icons on your map, making it memorable!