MapKit in SwiftUI: Getting Started

5 min readMay 20, 2024

MapKit is a framework that enables the display of maps on Apple platforms using SwiftUI. You can leverage MapKit to:

Create points of interest on the map and provide detailed information upon tapping a specific marker.
Add overlays to indicate routes.
Display areas on the map in satellite view or a more realistic manner.
Show the user’s location on the map.

In this article, you will learn how to integrate maps into your SwiftUI applications and explore the various configurations offered by this framework.

Adding a Map

To incorporate a map into your SwiftUI view, you need to import MapKit and use the Map() view in your main view. For example:

import SwiftUI
import MapKit

struct ContentView: View {
  var body: some View {
    Map()
  }
}

Configuring Style

MapKit provides the mapStyle(_:) modifier to customize the appearance of a map, with styles such as standard, imagery, and hybrid.

Standard

This is the default style of Map() and the one you saw in the previous example. You can specify it explicitly like this:

Map()
  .mapStyle(.standard)

The parameters you can set in this style are:

elevation: Specifies a value between automatic, flat, or realistic. The values automatic (default) and flat render the map in 2D, while realistic renders it in 3D.

Example of a map with standard style and realistic elevation:

Map()
  .mapStyle(.standard(elevation: .realistic))

emphasis: Defines the importance of the images displayed on the map by specifying a value between automatic (default) and muted to reduce importance.

Example of a map with standard style and muted emphasis:

Map()
  .mapStyle(.standard(emphasis: .muted))

pointsOfInterest: Defines an array of points of interest to display on the map. You can choose between all (default) to show all, excludingAll to exclude all, or including/excluding to include/exclude some belonging to a specific category.

Example of a map with standard style and all points of interest excluded:

Map()
  .mapStyle(.standard(pointsOfInterest: .excludingAll))

showsTraffic: Specifies a boolean value to indicate whether the map will display traffic or not. By default, its value is false.

Example of a map with standard style and traffic routes:

Map()
  .mapStyle(.standard(showsTraffic: true))

Imagery

Applies a more realistic style to the map using satellite images.

Example of a map with satellite images:

Map()
  .mapStyle(.imagery)

Similar to the standard style, you can configure the elevation with the elevation parameter.

Hybrid

Applies a hybrid style to the map by combining satellite images from the imagery style with the features of the standard style.

Example of a hybrid map:

Map()
  .mapStyle(.hybrid)

Similar to the standard style, you can configure elevation, points of interest, and whether to show traffic with the parameters elevation, pointsOfInterest, and showsTraffic, respectively.

Adding Markers

Markers are a simple way to display content at a specific point on a map, and you have the UserAnnotation, Marker, and Annotation views for this purpose.

UserAnnotation

It is a marker used to show the user’s location on the map. It is used as follows:

Map {
  UserAnnotation()
}

It is necessary to grant location permissions to the user in the app; otherwise, the marker will not be indicated.

Marker

Displayed as a red balloon with a symbol. This view is added within the Map view, where a title and a coordinate using the CLLocationCoordinate2D structure are specified, as shown below:

import SwiftUI
import MapKit

struct ContentView: View {
  // 1
  let coordinate = CLLocationCoordinate2D(latitude: 40.4152647, longitude: -3.6870744)

  var body: some View {
    Map {
      // 2
      Marker("My Marker", coordinate: coordinate)
    }
  }
}

The latitude and longitude where the Marker will be displayed are defined.
The Marker view is added within Map with the title and coordinate.

To change the symbol inside the balloon, use the systemImage parameter for system images or image for a custom one:

Marker("My Marker", systemImage: "building.columns", coordinate: coordinate)

Additionally, you can change the color of the balloon with the tint(_:) modifier and define the title display with the annotationTitles(_:) modifier:

Marker("My Marker", systemImage: "building.columns", coordinate: coordinate)
  .tint(.purple)
  .annotationTitles(.hidden)

Annotation

Instead of showing a balloon like Marker, it displays a custom view. For example:

import SwiftUI
import MapKit

struct ContentView: View {
  // 1
  let coordinate = CLLocationCoordinate2D(latitude: 40.4152647, longitude: -3.6870744)

  var body: some View {
    Map {
      // 2
      Annotation("My annotation", coordinate: coordinate) {
        // 3
        Text("👀")
          .padding(4)
          .background(.yellow)
      }
    }
  }
}

The latitude and longitude where the Annotation will be displayed are defined.
The Annotation view is added within Map with the title, coordinate, and custom view.
A Text with an emoji on a yellow background.