Integrating MapKit with SwiftUI

The MapKit framework offers developers a range of APIs to incorporate map-related functionalities within their apps. These functionalities include displaying maps, navigating through maps, adding annotations for specific locations, and incorporating overlays on existing maps. With this framework, you can easily embed a fully functional map interface into your app without the need for extensive coding.

For SwiftUI, it provides a native Map view that allows developers to seamlessly embed a map interface. Additionally, you have the option to display annotations using built-in annotation views such as MapMarker.

First, let’s see a quick introduction of the Map view in SwiftUI. By referring the documentation of Map (https://developer.apple.com/documentation/mapkit/map), you should find the following init method of the structure:

init(coordinateRegion: Binding<MKCoordinateRegion>, interactionModes: MapInteractionModes = .all, showsUserLocation: Bool = false, userTrackingMode: Binding<MapUserTrackingMode>? = nil) where Content == _DefaultMapContent

To work with Map, you need to provide a binding of MKCoordinateRegion that keeps track of the region to display on the map. The MKCoordinateRegion structure lets you specify a rectangular geographic region centered around a specific latitude and longitude.

Here is an example:

MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 40.75773, longitude: -73.985708), span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05))

The coordinates in the above sample is the GPS coordinates of Times Square in New York. The value of span is used to define your desired zoom level of the map. The smaller the value, the higher is the zoom level.

In general, to embed a map in SwiftUI, you first need to import the MapKit framework:

import MapKit

Then, to create a map, simply instantiate a Map view like this:

var body: some View {
    Map()
}

This creates a full-screen map with a default location. However, instead of displaying a default location, the Map view provides an additional init method that allows you to customize the initial position of the map:

init(
    initialPosition: MapCameraPosition,
    bounds: MapCameraBounds? = nil,
    interactionModes: MapInteractionModes = .all,
    scope: Namespace.ID? = nil
) where Content == MapContentView<Never, EmptyMapContent>

You can create an instance of MapCameraPosition as the initial position of the map. MapCameraPosition contains various properties that you can use to control which place or region is displayed, including:

automatic
item(MKMapItem) – for displaying a specific map item.
region(MKCoordinateRegion) – for displaying a specific region.
rect(MKMapRect) – for displaying specific map boundaries.
camera(MapCamera) – for displaying an existing camera position.
userLocation() – for displaying the user’s location

For instance, you can instruct the map to display a specific region by using .region(MKCoordinateRegion):

Map(initialPosition: 
      .region(MKCoordinateRegion(
                center: CLLocationCoordinate2D(latitude: 40.75773, longitude: -73.985708), 
                span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)
      )))

The coordinates in the above sample is the GPS coordinates of Times Square in New York. The value of span is used to define your desired zoom level of the map. The smaller the value, the higher is the zoom level.

MapKit Example

In our example, we’ll see how to integrate MapKit into SwiftUI. The first thing we need to do is import the MapKit framework with the following line of code:

import MapKit

In the ContentView.swift file in Xcode, we’ll write the following code:

struct ContentView: View {

@State private var region: MKCoordinateRegion = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 51.510357, longitude: -0.116773), span: MKCoordinateSpan(latitudeDelta: 1.0, longitudeDelta: 1.0))

var body: some View {
Map(initialPosition: .region(region))
 }
}

By default, the region state variable is set to the coordinate of London. In Xcode preview, it should show you a map of London.

If you have any questions about this article, please contact me and I’ll be happy to help 🙂 You can reach me on my X profile or on my Instagram profile.