At WWDC 2020, Apple announced various improvements to their frameworks and SwiftUI was at the front of the line to receive new API and existing API refinements. In this tutorial, we’ll learn how crazy simple it is to integrate MapViews using the MapKit framework, which is now native, in your SwiftUI Applications. Let’s go

Please note that this tutorial requires you to have Xcode 12 but doesn’t require that you have macOS Big Sur installed in your machine.

The first thing we have to do is to import MapKit in your current SwiftUI file. Let us create a VStack that will show the map in a nice rounded view along with the name of the place below it. For this tutorial we’ll use San Francisco’s Bay Area’s coordinates which, according to Google is at 37.8272° N, 122.2913° W. This translates to:

• Latitude- 37.8272
• Longitude--122.2913 (Negative since it’s in the western hemisphere)

Now with this information let’s get into the rather simple code. Below the struct ContentView: View declaration, make a new @State variable that will be of type MKCoordinateRegion. The constructor that we’ll be using will consist of 2 parameters:

• Center- This is where the MapView will be centred.
• Span- The amount of region shown on the map. The bigger the number the more of the area is shown. This span will change depending on the user interacting with the MapView.

The coordinateRegion State variable will now look like this:

@State private var coordinateRegion = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 37.8272,                                                                                     longitude: -122.2913),                                              span: MKCoordinateSpan(latitudeDelta: 1.5,                                                                         longitudeDelta: 1.5))

Making the View

Our view is quite simple. It’s a MapView and a Text with some view modifiers added to it. Create a VStack and inside that create a Map(yep, a SwiftUI Map is just called a Map. It can’t get simpler than this). The Map view has a few contractors but for this simple tutorial, we’ll be using the one with the coordinateRegion parameter. In this parameter, pass the binding variable that you just created. You can add some view modifiers to shape the MapView in any way that you like or use the code that I’ve written below:

Map(coordinateRegion: $coordinateRegion)
                .frame(width: 300, height: 400, alignment: .center)
                .cornerRadius(5)
                .shadow(radius: 4)

This creates a MapView with 300x400 as it’s frame, adds in a corner radius, and adds a slight drop shadow of radius 4 just to give it some cool aesthetics because why not.

Aesthetics

The main part of the tutorial is over. If you’d like to add the “Bay Area, California” Text below the MapView simply add in a Text view and add in some custom view modifiers just like this:

Text(“Bay Area, California”)
                .font(.system(size: 18, weight: .bold, design: .rounded))

A side note- I really like that the new iOS and macOS design language have moved towards the rounded font design and that is what we’re using in this tutorial. If you want the big title on the top wrap the whole View in a NavigationView and add in the navigationTitle modifier. Your whole code should now look like this:

import SwiftUI
import MapKitstruct ContentView: View {
    @State private var coordinateRegion = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 37.8272,
                                                                                            longitude: -122.2913),
                                                             span: MKCoordinateSpan(latitudeDelta: 1.5,
                                                                                    longitudeDelta: 1.5))
    var body: some View {
        NavigationView {
            VStack(spacing: 15) {
                Map(coordinateRegion: $coordinateRegion)
                    .frame(width: 300, height: 400, alignment: .center)
                    .cornerRadius(5)
                    .shadow(radius: 4)
                Text(“Bay Area, California”)
                    .font(.system(size: 18, weight: .bold, design: .rounded))
        }
            .navigationTitle(Text(“MapView”))
        }
    }
}

[image:26DEB3CB-F421-4D1F-ABA9-E431BB50AC6F-647-00000145058FCD72/0*a-RE5a7xr8LcsXS_.png]

Conclusion

In this tutorial, we learnt how to implement the brand new MapView functionality in SwiftUI. Thank you for reading. If you have any doubts please feel free to @ me on twitter @SwapnanilDhol