WWDC23 Meet MapKit for SwiftUI Apple

title: "WWDC23: Meet MapKit for SwiftUI | Apple"
sources: https://www.youtube.com/watch?v=efjxmrAIobU
media_link: https://www.youtube.com/watch?v=efjxmrAIobU
contentPublished: 2024-03-26
noteCreated: 2025-06-23
description: "Discover how expanded SwiftUI support for MapKit has made it easier than ever for you to integrate Maps into your app. We’ll show you how to use SwiftUI to add annotations and overlays to a map, control the camera, and more.More Apple Developer resources:Video sessions: https://apple.co/VideoSessionsDocumentation: https://apple.co/DeveloperDocsForums: https://apple.co/DeveloperForumsApp: https://apple.co/DeveloperApp"
tags:
  - clippings
  - video
takeaways:
subjects:
Status: 🙏🏼 Want To Read
publish: true
Youtube_Duration: 27:21

Description

Discover how expanded SwiftUI support for MapKit has made it easier than ever for you to integrate Maps into your app. We’ll show you how to use SwiftUI to add annotations and overlays to a map, control the camera, and more.

More Apple Developer resources:
Video sessions: https://apple.co/VideoSessions
Documentation: https://apple.co/DeveloperDocs
Forums: https://apple.co/DeveloperForums
App: https://apple.co/DeveloperApp

YouTube	WWDC23: Meet MapKit for SwiftUI \| Apple - YouTube
Apple	Meet MapKit for SwiftUI - WWDC23 - Videos - Apple Developer

My Notes

Meet MapKit for SwiftUI

(0:00) Introduction
- (0:00) Speaker: Jeff, Engineer on the MapKit team.
- (0:09) Easier than ever to integrate Maps into apps across all platforms with expanded SwiftUI API.
- (0:21) Demo: Building a fully functional trip planner from scratch for a family trip to Boston.
- (0:43) Features covered in the demo:
  - Annotations to mark places on the map.
  - Enable selection to tap on each marker to learn more.
  - Integrate Look Around to explore places.
  - Add an overlay that shows a driving route.
  - Use the map to display different locations and regions.
  - Add another dimension by enabling realistic elevation.
  - Show satellite and flyover imagery.
  - Add controls to the map, including a user location button.

Getting Started: Adding a Basic Map

(1:58) Start with a brand-new SwiftUI project.
(2:06) Use MapKit.
(2:14) Add a Map.
(2:24) Interactive map with just one line of code.

Adding Content to the Map

(2:40) Mark the parking garage location.
(3:04) Learn about using Marker and Annotation to display content at a specific coordinate.
(3:22) Use a MapContentBuilder closure to add a marker to the map.
- (3:34) Map automatically frames the content by zooming in to show the Marker.
(3:43) What is a Marker?
- (3:45) Used to display content at a specific coordinate.
- (3:48) Balloon shape.
- (3:52) Found in the Maps app and across the platform.
(4:00) What is an Annotation?
- (4:03) Displays a SwiftUI View at a specific coordinate.
(4:05) The content builder can also be used to present overlay content.
(4:17) Use an Annotation to mark the parking spot with a custom SwiftUI view (composed of shapes and an image).
(4:23) Use Annotation's anchor parameter to position the view (e.g., anchor: .bottom).

Map Style: Adding Realism and Imagery

(4:28) Use mapStyle to convey a sense of place by enabling realistic terrain elevation.
(4:36) Set a style using the mapStyle modifier.
(4:43) Standard map style (flat presentation by default).
(4:49) Enable realistic elevated terrain.
(5:06) Imagery map style displays map rendered using satellite or flyover imagery.
(5:16) Hybrid map style combines imagery with roads and labels.
(5:23) Recap: Enabled realistic elevation, showed other map styles.

Adding UI and Search Results

(5:27) Add buttons to search for playgrounds and beaches.
(5:52) The app will add a Marker for each search result.
(6:01) Show own UI above the map without getting in the way of search results.
(6:13) BeantownButtons View created previously. Tapping a button calls a search function.
(6:33) Search function uses MKLocalSearch to find places near the parking garage.
(6:58) In ContentView, add State to keep track of search results.
(7:17) Add the buttons above the map at the bottom of the screen using safeAreaInset. Ensures UI doesn't obscure map content or system-provided controls.
(7:50) Use the content builder and ForEach to add search result Markers.
(8:07) Try the search buttons: Find playgrounds, find beaches. Map automatically frames results.
(8:24) Search results are MKMapItems.
(8:31) Marker's map item initializer uses the map item's name for title and information for icon and tint color.
(8:57) Customizing Marker presentation: provide own icon (Image asset or system image), show up to three letters of text using monogram, change color using tint modifier.
(9:14) Recap: Used safeAreaInset to display buttons, used content builder and ForEach to add search result markers.

Controlling the Map Display (Camera Position)

(9:19) Issue: Map automatically frames content initially, but not after the user pans away.
(9:35) Demonstration: Pan away, search again - map doesn't re-frame results near parking spot.
(9:57) Solution: Control what's displayed by the map using the Map's camera position state. Add state to track the position.
(10:13) Use the default automatic position that frames the content.
(10:19) Pass the binding to Map's initializer.
(10:31) Use an onChange modifier on the search results state.
(10:44) When search results are updated, set the camera position back to automatic to make sure they're visible.
(10:44) Demonstration: Search, pan away, search again - results are displayed and framed.
(11:08) Use position state to display other locations or regions (e.g., North shore coastline).
(11:27) Add coordinate regions for the city and for the North Shore.
(11:44) Add a binding for the position state to the BeantownButtons UI.
(11:51) Add buttons in BeantownButtons, each setting the camera position to a region.
(12:03) Demonstration: Pressing "City" or "Waves" button updates the map's position to the corresponding region.
(12:25) Behind the scenes: The Map's display is controlled by a MapCamera.
(12:52) App specifies what should be in view using MapCameraPosition. MapKit takes care of the camera.
(13:09) Types of MapCameraPosition:
- automatic: Frames content (like search results).
- region: Shows a specific coordinate region.
- rect: Shows an area using a map rect.
- (13:31) item: Shows a particular MKMapItem (MapKit zooms appropriately based on the item).
- (13:48) camera: Supply a MapCamera configured exactly as desired (e.g., with pitch for 3D).
- (14:14) userLocation: Follows the user's location. Can supply a fallback position.
(14:42) If you provide a binding to your camera position state, MapKit will update it when the camera position changes.
(14:50) userLocation position example: followsUserLocation property.
(15:00) User interaction (panning) changes the camera position state to positionedByUser.
(15:08) Setting the camera position state back to userLocation resumes following the user.
(15:14) The user can position the camera by interacting with the map no matter which type of camera position you specify.
(15:18) Recap: Used automatic and region camera positions.

Getting the Visible Region

(15:18) Issue: Search is limited to near Boston Common. Want to search within the currently visible map region.
(15:31) Solution: Get the visible region when the camera changes.
(15:37) Add state to track the visibleRegion.
(15:45) Add an onMapCameraChange modifier.
(15:57) Grab the visible region from the update context within the closure and stash it in state.
(16:05) By default, closure is called when user finishes interacting. Request continuous updates by passing a frequency parameter.
(16:15) Context also has properties for the visible map rect and the map camera itself.
(16:20) Update BeantownButtons to search within the visibleRegion.
(16:35) Pass the visibleRegion to the buttons UI.
(16:47) Demonstration: Pan to North Shore, search for beaches there. Pan to Rhode Island, search for beaches there.
(17:06) Enabled searching within the visible region using onMapCameraChange.

Handling Selection

(17:13) Make it easier to pick a beach by adding support for selecting a search result.
(17:36) By default, tapping a search result marker does nothing (no selection state).
(17:44) Solution: Add a selection binding to the Map.
(17:51) Demonstration: Tapping a search result marker animates the balloon to show it's selected.
(18:02) Using MKMapItem as the selection type makes markers representing map items selectable.
(18:09) The Parking Spot annotation (not representing a map item) is not selectable in this case.
(18:16) If you want to support selection for Markers and Annotations with different identity types, you can simply tag them. Works the same way as managing selection with Picker and List.
(18:40) Recap: Added an MKMapItem selection binding to Map, enabling selection for search result markers.

Displaying Item Information on Selection

(18:40) Display additional information about the selected search result: Look Around preview, beach name, drive time.
(18:57) ItemInfoView created previously. Shows title, estimated travel time, and a Look Around Preview.
(19:19) Look Around Preview displays an MKLookAroundScene. Get the scene using MKLookAroundSceneRequest. Scene is fetched when view displayed or selection changes.
(19:42) MKRoute has a property that formats estimated travel time for display using DateComponentsFormatter.
(19:52) Switch back to ContentView and add the ItemInfoView.
(20:03) Add state to keep track of a route.
(20:07) Add a function that uses MKDirections to get a route from the parking garage to the selected result and set the route state.
(20:25) Add another onChange modifier to call the route function when the selection changes.
(20:32) Show the ItemInfoView when there is a selected search result.
(20:32) Hide the Marker titles for the search results to clean up the map appearance.
(20:54) Demonstration: Tap on a beach result, the info view appears showing Look Around preview and travel time.
(21:19) Recap: Added a Look Around preview and estimated travel time display when a marker is selected.

Adding Overlays

(21:32) Use the route to display the driving route from Boston Common to the selected search result.
(21:46) When a route is available, add a MapPolyline and stroke it with blue.
(22:17) Demonstration: Blue polyline route appears on the map.
(22:20) Use MapPolyline to show own location data. Use StrokeStyle for fancy effects (dashes, gradient).
(22:35) Use MapPolygon or MapCircle to highlight an area.
(22:35) overlayLevel parameter: aboveRoads (default, labels above overlay), aboveLabels (overlay above labels).
(23:04) Recap: Added a MapPolyline to show the driving route, showed other overlay types (MapPolygon, MapCircle) and overlayLevel.

Adding Map Controls

(23:43) Make it easy to figure out where the user is.
(23:56) Add UserAnnotation as content to show the user's location (the blue dot).
(24:07) Demonstration: User's location appears on the map.
(24:25) Need to zoom out and pan manually to find the user location if far from other content.
(24:40) Solution: Add a MapUserLocationButton.
(24:45) Demonstration: Tapping the button displays the user's location and the map camera follows them.
(24:55) Also added a MapCompass and a MapScaleView.
(25:04) The default mapControls configuration shows a compass when the map is rotated and a scale indicator while zooming.
(25:15) Specify the desired controls within the mapControls modifier. The map will automatically display them in their default locations on all platforms.
(25:37) Includes platform-specific controls like MapZoomStepper and MapPitchSlider on macOS.
(25:47) To position controls yourself, present them in your own UI and use the mapScope modifier to associate them with a particular Map scope.
(26:09) Recap: Added UserAnnotation and MapUserLocationButton. Used mapControls modifier to add controls with automatic positioning.

Conclusion

(26:15) MapKit for SwiftUI is an incredibly powerful, easy-to-use API to integrate Maps into your app.
(26:31) Use Markers, Annotations, and Overlays to show your content.
(26:38) Use Map Camera and Map Controls to tailor the map to your needs.
(26:44) Use MapStyle and Look Around to give your users a real sense of place.
(26:56) Check out the Developer Documentation for more features.
(27:05) Your map will look great on all platforms.
(27:12) Final thoughts:
- (27:14) Apple Maps Server APIs support Autocomplete and Directions. See "Meet Apple Maps Server APIs" (last year's talk).
- (27:36) Provide feedback using the Feedback Assistant.
- (27:44) Check out new features in SwiftUI this year (e.g., Animation Plans for maps).
(27:58) Thanks for watching.

Transcript

Take interactive transcript notes on youtube-transcript.io