MapKit 🤝 SwiftUI in iOS 17

Implement MapKit APIs introduced at WWDC 2023 for SwiftUI with Xcode 15.

Apple’s WWDC23 brought about exciting announcements. With the introduction of new APIs and the deprecation of MapKit initializers from Xcode 12, integrating maps into your SwiftUI app has become even more straightforward in iOS 17. The downside is that you might have to rewrite some parts of the map integration in your existing SwiftUI app.

In this blog, we’ll delve into the significant improvements that MapKit brings to SwiftUI and learn how to leverage the following features:

• Initializing Map
• Marker and Annotations
• Map styles and elevation
• Map Controls
• LookAroundPreview
• Map Overlay Contents

Before we begin, make sure you have macOS 13.3 and Xcode 15 installed.

Initialize Map

Adding a map to the SwiftUI is as easy as adding a **Map()** component without any parameters.

You can customize the map by using a content builder closure. This allows you to incorporate various elements into the map, such as markers, annotations, and even the user’s location. Additionally, you can integrate diverse controls to enhance user interaction with the map.

Marker and Annotations

MapKit has deprecated **MapMarker and `MapAnnotation**and replaced them withMarker` and **Annotation** components.

Use **Marker** view to add a balloon-shaped marker to the map.

Marker("Empire state building", coordinate: .empireStateBuilding)

You can customize the marker by initializing it with a monogram string, system image, or a custom image. Use **MKMapItem** as a marker, and it will take care of marker color, image, and title. Use the .tint shape style to change the color of the marker.

Likewise, use **Annotation view to add an annotation to the map. `Annotation`** allows you to use a custom view to mark specific locations on a map.

[embed]Example of Annotation

The **anchor** option within Annotations provides you with the capability to adjust the marker’s anchor point in various directions relative to the provided coordinates.

You have the flexibility to use a combination of top, bottom, leading, right, or useCGPoint for precise control. By default, the anchor point is set to the center.

Applying all the insights we’ve gathered till now, the following example presents a map of New York featuring an annotation with a custom view and a marker.

[embed]Map with Marker and Annotation

Preview of NewYorkView

You must have noticed the map zoomed in automatically to show all Markers in the view. Pretty neat, right?

Map style and elevation

We have three map styles available for rendering the map:

1. Standard — Street map with road and names of places
2. Imagery — Satellite image of the area
3. Hybrid — Satellite image of the area including road and names of places

All map styles offer support for automatic, flat, and realistic (3D) elevation. Additionally, the standard and hybrid map styles also provide information on current traffic conditions.

.mapStyle(.hybrid(elevation: .realistic))

Hybrid map with realistic elevation

Map controls

Apple introduced new map controls that can be added via the mapControls(_:) modifier.

• MapCompass — Shows the current orientation of the map
• MapPitchToggle — Toggles between flat and pitched map
• MapPitchSlider (Mac only) — Slider to control the pitch of the map
• MapScaleView — Shows legend with distance information
• MapUserLocationButton — Centers the map on the user’s location
• MapZoomStepper (Mac only) — Button to adjust the map zoom level
• MapLocationCompass (WatchOS only) — Combined user location button and map compass

[embed]Map with map controls

The following GIF demonstrates the Map Pitch Button in action, accompanied by the User Location Button and a Compass for reference.

Different Map controls available for a Map

Marker selection

To enable marker or annotation selection, it’s necessary to set up a selection binding. Use a tag if the Marker and Annotations don’t have a similar type of identity.

[embed]Marker selection example

Look around preview

One standout feature of the MapKit is LookAroundPreview . It offers a captivating 360-degree view of street imagery at a chosen geographical spot.

The code block below contains a LookAroundPreview view to preview imagery for a specific geographic location.

The LookAroundPreview provides a visual representation of the selected location, showing us what it looks like. This preview includes an MKLookAroundScene, which we obtain using the MKLookAroundSceneRequest. The function getLookAroundScene() fetches the MKLookAroundScene when the view is initially displayed and also whenever the selected marker changes.

[embed]

The LocationPreviewView displays markers on a map and a preview of the selected location. The map is responsible for handling marker selection, and when the selection changes, the LocationPreviewLookAroundView becomes visible.

[embed]

[embed]

LookAroundPreview in action

Overlay contents

MapCircle

Utilize MapCircle to display a circular overlay over a specific coordinate, complete with an adjustable radius. The mapOverlayLevelmodifier allows us to specify the overlay’s placement in relation to other elements on the map.

[embed]

Map circle with different overlay level

MapPolygon

Create a map polygon by specifying coordinates through the use of MapPolygon.

Map {    
    MapPolygon(coordinates: expositionParkSquare)
        .foregroundStyle(.orange.opacity(0.60))
}

MapPolygon example

MapPolyline

The MapPolyline feature proves invaluable in presenting overlays comprising connected line segments, especially when presenting directions between points. Leveraging MKDirections, we can prepare a request with source, destination, and transportation preferences. MapKit seamlessly processes this request, promptly providing route details and the estimated travel duration.

Just a heads up, try not to make too many requests too quickly, or your app might receive a loadingThrottled error.

If you want to jazz up the route, try uncommenting the part that adds a gradient to the line!

[embed]

Example of Polyline with expected travel time

Limitations

While all these features offer numerous advantages, it is essential to acknowledge that they come with certain limitations. Limitations of feature availability based on iOS versions and dependence on other Apple frameworks can have an impact on your development decision. Thus, when evaluating MapKit as the mapping solution for your app, it’s crucial to factor in these considerations:

1. Most of the features I’ve explained require iOS 16 or above and XCode 15 or above.
2. Realistic(3D) elevation and LookAroundPreview are only available in a few cities.

What’s next

MapKit stands as a powerful API, providing developers access to Apple’s cutting-edge Mapping capabilities. Through features like Realistic elevation and LookAround, along with the flexibility of Overlays, it offers an experience that outshines third-party alternatives.

Using its rich offerings and carefully considering its intricacies, you’re poised to create truly immersive and seamless location-based experiences for your users. Not to mention, we get to use all of these capabilities with a standard Apple developer membership.

Happy coding!

For more updates on the latest tools and technologies, follow the Simform Engineering blog.

Follow Us: Twitter | LinkedIn