Skip to content

SwiftUI: Map

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.

With the region that is created, you can just pass it into the Map

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

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.

Now you just gotta get the annotations.

Insert the annotations and get the coordinate of each annotations and it will appear on the map.

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.

Published inSwiftUI

One Comment

  1. 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…..

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © DaddyCoding 2020.