Mastering MapKit in SwiftUI & iOS 17

Summary

The article provides guidance on enhancing the Map view in a SwiftUI iOS 17 application by implementing map controls such as scale, compass, and pitch toggle using MapKit's mapControls modifier.

Abstract

The article titled "Mastering MapKit in SwiftUI & iOS 17 — Part 8" delves into the advanced features of MapKit for SwiftUI developers. It focuses on the utilization of the mapControls modifier to incorporate interactive elements like the MapPitchToggle, which allows users to switch between 2D and 3D map views. The author demonstrates how to make these controls always visible using the mapControlVisibility modifier, ensuring that users have constant access to map navigation tools. Additionally, the article covers the inclusion of other map controls such as the compass and map scale view, enhancing the overall user experience with a more interactive and informative map interface. The article concludes by inviting readers to engage with the content by clapping and following, and to visit the website for more information.

Opinions

The author emphasizes the importance of a pleasing map angle for user experience when using the MapPitchToggle control.
It is suggested that the visibility of certain controls, like the compass, may depend on user interaction with the map, such as rotation.
The article implies that making map controls always visible can improve the user interface, as it provides constant access to map navigation tools.
The use of real-time examples and animated GIFs indicates the author's commitment to providing clear and practical demonstrations of the concepts discussed.
The article encourages reader interaction and feedback, indicating a community-oriented approach to sharing knowledge and resources.

Mastering MapKit in SwiftUI & iOS 17 — Part 8

Mastering MapKit in SwiftUI & iOS 17 — Part 8

MapKit provides a mapControls modifier that can be used to display map controls such as map scale, compass, pitch toggle, etc. Let's incorporate map controls into the Map view of the "SF Top Attractions" app by adding the mapControls modifier.

struct MapExampleHome: View {
    let sfPlaces = SFPlace.topAttractions
    @State private var showMapView = false
    
    var body: some View {
        NavigationStack {
            Group {
                if showMapView {
                    mapView
                } else {
                    listView
                }
            }
            ...
        }
    }
    
    private var mapView: some View {
        Map() {
            ForEach(sfPlaces) { place in
                Annotation(place.title, coordinate: place.coordinates, anchor: .bottom) {
                    ZStack {
                        Circle()
                            .frame(width: 40, height: 40)
                            .foregroundStyle(place.color.gradient.opacity(0.4))
                        
                        Image(place.image)
                            .resizable()
                            .frame(width: 35, height: 35)
                    }
                }
            }
        }
        .mapStyle(.standard(elevation: .realistic, showsTraffic: true))
        .mapControls {
            // <--- map controls here 
        }
    }
    ...

We will add MapPitchToggle control first. The MapPitchToggle control sets the pitch of the associated map to a pleasing angle(3D) if flat, or returns the map to flat(2D) if pitched.

private var mapView: some View {
        Map() {
            ForEach(sfPlaces) { place in
                Annotation(place.title, coordinate: place.coordinates, anchor: .bottom) {
                    ZStack {
                        Circle()
                            .frame(width: 40, height: 40)
                            .foregroundStyle(place.color.gradient.opacity(0.4))
                        
                        Image(place.image)
                            .resizable()
                            .frame(width: 35, height: 35)
                    }
                }
            }
        }
        .mapStyle(.standard(elevation: .realistic, showsTraffic: true))
        .mapControls {
            MapPitchToggle()
        }
    }

Note that the pitch control becomes visible only when the map is zoomed in enough to display the variation on the map. However, we can adjust the visibility settings for controls to make them always visible on the screen by using the mapControlVisibility modifier.

private var mapView: some View {
        Map() {
            ForEach(sfPlaces) { place in
                Annotation(place.title, coordinate: place.coordinates, anchor: .bottom) {
                    ZStack {
                        Circle()
                            .frame(width: 40, height: 40)
                            .foregroundStyle(place.color.gradient.opacity(0.4))
                        
                        Image(place.image)
                            .resizable()
                            .frame(width: 35, height: 35)
                    }
                }
            }
        }
        .mapStyle(.standard(elevation: .realistic, showsTraffic: true))
        .mapControls {
            MapPitchToggle()
        }
        .mapControlVisibility(.visible)
    }

Let’s include additional map controls such as the compass and map scale view. Please be aware that the compass may not become visible until the map is rotated.

private var mapView: some View {
        Map() {
            ForEach(sfPlaces) { place in
                Annotation(place.title, coordinate: place.coordinates, anchor: .bottom) {
                    ZStack {
                        Circle()
                            .frame(width: 40, height: 40)
                            .foregroundStyle(place.color.gradient.opacity(0.4))
                        
                        Image(place.image)
                            .resizable()
                            .frame(width: 35, height: 35)
                    }
                }
            }
        }
        .mapStyle(.standard(elevation: .realistic, showsTraffic: true))
        .mapControls {
            MapPitchToggle()
            MapCompass()
            MapScaleView()
        }
        .mapControlVisibility(.visible)
    }

With that we have reached the end of this article. Thank you once again for reading. If you liked this, don’t forget to 👏 and follow 😍. Also visit us at https://www.devtechie.com