# Draggable Bottom Sheet Over a Map in SwiftUI, Free

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-01, updated 2026-06-02. 5 min read.
> Source: https://vp0.com/blogs/draggable-bottom-sheet-map-modal

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](https://survey.stackoverflow.co/2024/ai) 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](https://developer.apple.com/documentation/swiftui/view/presentationdetents(_:)) defines the heights, [presentationBackgroundInteraction](https://developer.apple.com/documentation/swiftui/view/presentationbackgroundinteraction(_:)) keeps the map usable, and [MapKit for SwiftUI](https://developer.apple.com/documentation/mapkit/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](/blogs/real-estate-app-template-ios/), [an EV charging station finder app template](/blogs/ev-charging-station-finder-app-template-react-native-free-ios-template-vibe-codi/), [a Snapchat Map clone UI kit for iOS](/blogs/snapchat-map-clone-ui-kit-ios/), and [how to make an AI app look native on iOS](/blogs/make-ai-app-look-native-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.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*