Map View
The spatial browse surface where markers, permission and offline behaviour all have to hold up.
Navigation & Command · 8 checks · 6 resources
Before you ship
8- 01Pin and marker designs — custom markers distinguishable from each other and the base map, sized for reliable tap accuracy
- 02Marker clustering — how markers are grouped when too close together to be shown individually
- 03Native map components — MapKit on iOS or Google Maps on Android to leverage existing foundations
- 04Location permission — requested at the point in the flow where it is needed, with context on the access level and why
- 05Current location re-centre — a visible button to re-centre the map without zooming or scrolling manually
- 06Selected item bottom sheet — tapping a marker expanding a sheet with details, not a full-screen navigation away from the map
- 07Search or filter actions — accessible as a persistent overlay on the map or as a separate screen
- 08Offline handling — cached map tiles displayed where available, with a clear indicator the map may not be current
Resources that help you build this
6- HeroUI Pro · Paid React + React Native components, 6 templates, MCP server and agent skills
- mapcn · Theme-aware MapLibre map components installed through the shadcn CLI
- Osmo · Paid vault of 231 GSAP/Webflow interaction recipes plus a 100-button pack
- Watermelon UI · MIT shadcn registry: 131 animated components, 187 page blocks, 30 base primitives
- Manifest UI · 39 MIT shadcn blocks sized for ChatGPT Apps and MCP app surfaces
- The Gridcn · Tron-styled shadcn registry: 140 items, six themes, HUD and 3D grid components