SwiftUI MapKit: How to display a map and show a location

The MapKit framework is utilized to display a map or satellite imagery from your app's interface. It can also be used to call out points of interest and determine placemark information for coordinates on the map. We can use MapKit to load a map and center on a location.

Basic Code Sample

Setting up a map is pretty easy. The basic code is as simple as this:

Map(coordinateRegion: Binding<MKCoordinateRegion>)

Notice that it needs a binding, often a @State variable of type MKCoordinateRegion. To create one, we need to look at the basic requirements for MKCoordinateRegion.

MKCoordinateRegion(
    center: CLLocationCoordinate2D,
    span: MKCoordinateSpan
)

CLLocationCoordinate2D is the longitude and latitude of a specific coordinate on the map.

CLLocationCoordinate2D(
    latitude: 37.789467,
    longitude: -122.416772
)

MKCoordinateSpan is the width and height of the map view in degrees, using latitudeDelta and longitudeDelta. A higher value creates a wider, zoomed-out view, while a smaller value creates a more precise, zoomed-in view.

MKCoordinateSpan(
    latitudeDelta: 0.5,
    longitudeDelta: 0.5
)

Given both pieces, you can create an MKCoordinateRegion like this:

@State var region = MKCoordinateRegion(
    center: CLLocationCoordinate2D(
        latitude: 37.789467,
        longitude: -122.416772
    ),
    span: MKCoordinateSpan(
        latitudeDelta: 0.5,
        longitudeDelta: 0.5
    )
)

The region needs to be a binding because in normal circumstances the location can change, or the user might zoom and pan around the map. The state needs to update as those map values change.

Finally, use the MKCoordinateRegion to feed the Map and display it.

Map(coordinateRegion: $region)

Map Options

Although the basic map declaration with only coordinateRegion is enough to display a map, it will only show a basic map centered around the location you specified. It will not show a marker for where you are.

For more control, use a map initializer that includes interaction modes, user location, and tracking mode.

Map(
    coordinateRegion: Binding<MKCoordinateRegion>,
    interactionModes: MapInteractionModes,
    showsUserLocation: Bool,
    userTrackingMode: Binding<MapUserTrackingMode?>
)

• interactionModes controls how users interact with your map. Use MapInteractionModes.pan, MapInteractionModes.zoom, or MapInteractionModes.all.
• showsUserLocation is a Boolean that controls whether the user's location marker appears.
• userTrackingMode controls whether the map follows user location changes. You can use values such as .follow or .none.

Because userTrackingMode is a binding, set it separately and then use that variable in your map setup.

@State var tracking: MapUserTrackingMode = .follow

Given all this information, you can set up the map with more specific functionality and control.

Map(
    coordinateRegion: $region,
    interactionModes: MapInteractionModes.all,
    showsUserLocation: true,
    userTrackingMode: $tracking
)

Full Example

import SwiftUI
import MapKit

struct ContentView: View {
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(
            latitude: 37.789467,
            longitude: -122.416772
        ),
        span: MKCoordinateSpan(
            latitudeDelta: 0.5,
            longitudeDelta: 0.5
        )
    )

    @State private var tracking: MapUserTrackingMode = .follow

    var body: some View {
        Map(
            coordinateRegion: $region,
            interactionModes: MapInteractionModes.all,
            showsUserLocation: true,
            userTrackingMode: $tracking
        )
    }
}