Apple has revamped the experience for Map on the iOS providing more control over location privacy. With that in mind, I am actually surprise that Apple introduces Map as I was pretty sure they release Map in the beginning but upon checking, it was actually MapView.
With that, I’ve compare Map and MapView and found out that MapView is actually UIKit while Map is SwiftUI.
Bear in mind that if you use Map, your operating system that will be supported is iOS 14+ while MapView is iOS 3+.
A view that displays an embedded map interface.
Apple Documentation
Prerequisites
To follow along this tutorial, you’ll need some basic knowledge in:
- A basic familiarity with Swift.
- At least Xcode 12+
- Only supports iOS 14+
Map
Let’s dive in and see what Map is capable of. You could select a region to be presented and I am using Petronas Twin Tower which is the tallest twin tower in the world hailing from Malaysia.
Proud Malaysian moment right there 🇲🇾
Anyway, you may begin creating MKCoordinateRegion by indicating the latitude and longitude of a location. MKCoordinateSpan is being used as zoom level of the map with the smaller value corresponding to a higher zoom level.
|
1 |
@State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 3.164557, longitude: 101.713423), span: MKCoordinateSpan(latitudeDelta: 0.03, longitudeDelta: 0.03)) |
With the region that is created, you can just pass it into the Map
|
1 |
Map(coordinateRegion: $region) |
And that’s how you create your map.
Current Location
Getting the user current location is a lot easier now. But there are some stuffs that you need to be aware of.
MapInteractionMode either allows the user to zoom, pan or both zoom and pan. Currently the user is only allowed to zoom and not pan.
MapUserTrackingMode allows you to update by following user’s location or none at all. Currently the user is being tracked with @State private var trackingMode = MapUserTrackingMode.follow
|
1 |
Map(coordinateRegion: $region, interactionModes: .zoom, showsUserLocation: true, userTrackingMode: $trackingMode) |
Map Annotations
Including annotation is also a lot easier. I hope Apple would provide more guides on how to do it rather than an empty documentation.
You will create a Model structured as below. This is the coordinates for your annotations.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
struct Location { let id = UUID() let title: String let coordinate: CLLocationCoordinate2D } extension Location: Identifiable { } extension Location { static func getLocation() -> [Location] { return [ Location(title: "KLCC Park", coordinate: CLLocationCoordinate2D(latitude: 3.155699, longitude: 101.713934)), Location(title: "Twin Tower", coordinate: CLLocationCoordinate2D(latitude: 3.157804, longitude: 101.711869)) ] } } |
Now you just gotta get the annotations.
|
1 |
@State private var locations: [Location] = Location.getLocation() |
Insert the annotations and get the coordinate of each annotations and it will appear on the map.
|
1 2 3 |
Map(coordinateRegion: $region, interactionModes: .all, showsUserLocation: true, userTrackingMode: $trackingMode, annotationItems: locations) { (location) -> MapPin in MapPin(coordinate: location.coordinate, tint: .black) } |
Where to go From Here
Feel like SwiftUI is something that you will really like and want to explore more? Check out my page where you can learn how to use most of the components in SwiftUI.
Thank you for this tutorial! Do you have insight on how I would implement additional views and toggle MapUserTrackingModes? I find that I can only use MapUserTrackingMode.follow
Would like to use .followWithHeading as well…..