Map View
Navigation & Command · 8 checks · 8 resources
The spatial browse surface where markers, permission and offline behaviour all have to hold up.
Before you ship
- 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
- HeroUI Pro · Paid React + React Native components, 6 templates, MCP server and agent skillsComponent LibrariesS
- mapcn · Theme-aware MapLibre map components installed through the shadcn CLIComponent LibrariesS
- Osmo · Paid vault of 231 GSAP/Webflow interaction recipes plus a 100-button packMotion & InteractionA
- Watermelon UI · MIT shadcn registry: 131 animated components, 187 page blocks, 30 base primitivesComponent LibrariesA
- FeralUI · React interactions with ropes, paper, maps, and lightMotion & InteractionB
- Manifest UI · 39 MIT shadcn blocks sized for ChatGPT Apps and MCP app surfacesAI Interface KitsB
- The Gridcn · Tron-styled shadcn registry: 140 items, six themes, HUD and 3D grid componentsComponent LibrariesB
- Mapbox · Maps, location search, navigation, and geospatial data APIs and SDKs for appsUtilities & NamingC