Draggable Bottom Sheet Over a Map in SwiftUI, Free
The Apple Maps bottom sheet is a signature iOS pattern: a sheet that sits over the map at multiple heights and drags between them. SwiftUI makes it native.
TL;DR
An Apple Maps style draggable bottom sheet sits over a full-screen map at multiple heights (peek, medium, full) and drags between them, staying present rather than dismissing. In SwiftUI, use a sheet with presentationDetents and a background interaction so the map stays usable. Build it free from a VP0 design, prototype with sample content, then wire your map data. The detents and a usable map underneath are the pattern.
Building an Apple Maps style draggable bottom sheet over a map? The short answer: it is a sheet that sits over a full-screen map at multiple heights and drags between them, staying present rather than dismissing. SwiftUI makes it native with presentationDetents. Build it free from a VP0 design, the free iOS design library for AI builders, and clone it into Cursor or Claude Code. The detents and a still-usable map underneath are the whole pattern. By the numbers, roughly 62% of developers already use AI tools day to day.
Who this is for
This is for builders making any map-based app, search, places, delivery, real estate, who want the signature Apple Maps bottom-sheet behavior without fighting it from scratch.
What the pattern has to get right
Three things define it. Multiple heights: the sheet has detents, a small peek (a handle and summary), a medium height (a list), and a large or full height (details), and the user drags between them. Persistence: it stays present, not dismissed, because it is the app’s primary surface over the map. And a usable map underneath: at lower detents the map must stay interactive, so users can pan and tap while the sheet is up. SwiftUI provides exactly these. The presentationDetents documentation defines the heights, presentationBackgroundInteraction keeps the map usable, and MapKit for SwiftUI is the map.
| Piece | Job | Get it right |
|---|---|---|
| Detents | Multiple heights | Peek, medium, full |
| Drag | Move between heights | Smooth, with a handle |
| Persistence | Stay present | Non-dismissable sheet |
| Map interaction | Usable underneath | Background interaction on |
| Content | What the sheet shows | Summary to list to detail |
Build it free with a VP0 design
Pick a map or sheet screen in VP0, copy its link, and prompt your AI builder:
Build a SwiftUI full-screen MapKit map with an Apple Maps style draggable bottom sheet from this design: [paste VP0 link]. Use presentationDetents for a peek, medium, and large height, keep the sheet present and non-dismissable, and enable background interaction so the map stays usable at lower detents. Match the palette and spacing from the reference, and generate clean code.
For neighboring map and sheet patterns, see a real estate app template for iOS, an EV charging station finder app template, a Snapchat Map clone UI kit for iOS, and how to make an AI app look native on iOS.
Nail the feel
The pattern feels right when the sheet glides between detents with a clear drag handle and the map keeps working beneath it. So enable background interaction so taps and pans reach the map at the peek and medium heights, keep the sheet non-dismissable so it is a permanent part of the screen, and match the content to the height, a summary at peek, a list at medium, details at full. Build with sample content first to tune the detents and transitions, then wire your real map data. Done right, it is indistinguishable from first-party Apple Maps behavior, which is exactly the polish users expect from a map app.
Common mistakes
The first mistake is a dismissable sheet, when this pattern should persist. The second is a map that goes dead behind the sheet; enable background interaction. The third is wrong or too few detents, so the drag feels off. The fourth is content that does not match the height. The fifth is paying for a kit when SwiftUI plus a free VP0 design does it.
Key takeaways
- The Apple Maps sheet is a persistent, draggable bottom sheet over a usable map.
- Use presentationDetents for peek, medium, and full heights.
- Keep the map interactive with background interaction, and keep the sheet present.
- VP0 gives you the map and sheet UI free, ready to build with Cursor or Claude Code.
- Match content to the detent: summary, list, then details.
Frequently asked questions
How do I build an Apple Maps style draggable bottom sheet in SwiftUI? Use a sheet with presentationDetents for multiple heights, keep it present, and enable background interaction so the map stays usable, over a MapKit map from a free VP0 design.
What is the best free template for a map bottom sheet? VP0, the free iOS design library for AI builders, which generates clean SwiftUI for the map and detented sheet from a design link.
How do I keep the map usable behind the sheet? Use presentationBackgroundInteraction so the map stays interactive at lower detents, and keep the sheet non-dismissable.
What detents should the sheet have? Commonly a peek, a medium, and a full height, defined with presentationDetents so the user can drag between them.
Frequently asked questions
How do I build an Apple Maps style draggable bottom sheet in SwiftUI?
Use a sheet with presentationDetents for multiple heights (a peek, medium, and full), keep it present rather than dismissable, and enable background interaction so the map underneath stays usable. Build the UI from a free VP0 design over a MapKit map, prototype with sample content, then wire your data.
What is the best free template for a map bottom sheet?
VP0, the free iOS design library for AI builders. You clone a map or sheet screen into an AI tool like Cursor or Claude Code, which generates clean SwiftUI for the map and detented sheet, at no cost.
How do I keep the map usable behind the sheet?
Use presentationBackgroundInteraction so the map stays interactive while the sheet is at a lower detent, and keep the sheet non-dismissable so it persists. That is what makes the Apple Maps pattern feel right.
What detents should the sheet have?
Commonly three: a small peek showing a handle and summary, a medium height for a list, and a large or full height for details. presentationDetents lets you define these and let the user drag between them.
Part of the Native Apple & SwiftUI: The iOS Ecosystem hub. Browse all VP0 topics →
Keep reading
Cursor Keeps Hallucinating SwiftUI Views? Fix It
Cursor inventing SwiftUI views and APIs that do not compile? Here is why, and how rules, a mapping kit, and a reference stop the hallucinations.
A Cursor Rules File for Native SwiftUI iOS Apps
A cursor rules file tells Cursor how to write SwiftUI that stays native and consistent. Here is a starter rules file plus a free VP0 design to pair it with.
DePIN Network Map UI for iOS, Free Template
Build a DePIN (decentralized physical infrastructure) network map UI for iOS from a free template. Nodes, coverage, and status with Claude Code or Cursor.
Flitsmeister Style Speed Camera Alert UI in SwiftUI
Build a Flitsmeister style community road-alert UI in SwiftUI from a free template. Map, proximity alerts, and crowd reports with Claude Code or Cursor.
iOS Maps and Core Location Setup: The Config That Matters
Setting up MapKit and Core Location on iOS? The config is small but exact: Info.plist usage keys, authorization, and MapKit for SwiftUI. Here is the free template.
iOS Address Autocomplete: Google Places or Free MapKit
How to build an address autocomplete UI for iOS with the Google Places API, plus MKLocalSearchCompleter, the free native alternative built into MapKit.