SwiftUI Map Type Tutorial

The MapType can be used to show the map as a standard type, but also as a satellite or hybrid type. Unfortunately the MapType property is not availlable in the MapView in SwiftUi at this time. Therefore the MapType from the MapKit framework in UIKit can be used. In this tutorial a region of New York is displayed with a segmented control to change the map type. This tutorial is built for iOS14 and Xcode 12, which can be download at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. In the template selector, select iOS as the platform, select App template in the Application section and then click Next.

Enter SwiftUIMapTypeTutorial as the Product Name, select SwiftUI as Interface, SwiftUI App as Life Cycle and Swift as Language. Deselect the Include Tests checkbos and click Next. Choose a location to save the project on your Mac.

In the canvas, click Resume to display the preview. If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

In the Project navigator, click to select ContentView.swift. Add the MapViewUIKit struct

import SwiftUI
import MapKit

struct MapViewUIKit: UIViewRepresentable {
    // 1.
    let region: MKCoordinateRegion
    let mapType : MKMapType
    
    // 2.
    func makeUIView(context: Context) -> MKMapView {
        let mapView = MKMapView()
        mapView.setRegion(region, animated: false)
        mapView.mapType = mapType
        return mapView
    }
    
    // 3.
    func updateUIView(_ mapView: MKMapView, context: Context) {
        mapView.mapType = mapType
    }
}

1. These properties will be used when the Map View is displayed inside the ContentView

2. The makeUiView method creates a MKMapView object with the defined region and mapType

3. When the mapType is changed in the Content View, the Map is updated with the new mapType.

Change the code inside the ContentView struct to

struct ContentView: View {
    // 1
    @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 40.61900, longitude: -74.14053) , span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05))
    // 2
    @State private var mapType: MKMapType = .standard
        
    var body: some View {
        ZStack {
            // 3
            MapViewUIKit(region: region, mapType: mapType)
                .edgesIgnoringSafeArea(.all)
            
            VStack {
                Spacer()
                // 4
                Picker("", selection: $mapType) {
                    Text("Standard").tag(MKMapType.standard)
                    Text("Satellite").tag(MKMapType.satellite)
                    Text("Hybrid").tag(MKMapType.hybrid)
                }
                .pickerStyle(SegmentedPickerStyle())
                .offset(y: -40)
                .font(.largeTitle)
            }
        }
    }
}

1. The region State property is declared with the region of a part of the city New York

2. The mapType State propery is declared with the standard view type.

3. The MapViewUiKit object is called with the New York region and standard maptype

4. A Picker with type SegmentPickerStyle containing the different map types is displayed. When a segment is selected the mapType property value updates which will redraw the map with thus new type.

Go to the Preview and select Live View. Change the segments in the Picker to update the map type.

The source code of the SwiftUIMapTypeTutorial can be downloaded at the ioscreator repository on Github.