MapKit in SwiftUI: Getting Started
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 betweenautomatic
,flat
, orrealistic
. The valuesautomatic
(default) andflat
render the map in 2D, whilerealistic
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 betweenautomatic
(default) andmuted
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 betweenall
(default) to show all,excludingAll
to exclude all, orincluding
/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 withinMap
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 withinMap
with the title, coordinate, and custom view. - A
Text
with an emoji on a yellow background.
Similar to Marker
, with Annotation
, you can use the tint(_:)
and annotationTitles(_:)
modifiers.
If you want to read the Spanish version of this article, you can find it here: https://asynclearn.com/blog/mapkit-swiftui/