Map In SwiftUI

Introduction

In this article, we will integrate a map into our SwiftUI application. A map is an essential component of any application, almost every application uses Map to show the locations of a particular object. Many food delivery applications like Swiggy, Zomato, and Uber use a map to show nearby restaurant and delivery agent locations. Transport applications like Ola, Uber, Rapido, etc. also use a map to find a user's location and the destination path from the boarding point.

Let's start with the code

Open Xcode to create a new application, click on the app icon and give the name of the project. Now we are ready to implement a Map in our application.

Here we have a new SwiftUI project file. We can see here we have a ContentView file where we will write code for our application. On the right-hand side, we have our application preview where we can see the changes while writing the code. Here in ContentView "Hello World" is written in Text that's why we have a preview of our application with "Hello World".

We will be using MapKit to show a Map in our application, so let's understand what is MapKit.

MapKit in SwiftUI

MapKit is an API available for iOS applications to show user location, places, routes from one place to another, and many more things. MapKit gives us many functions like MapMarker which can be used to mark a place. Here we can also use a custom marker to show a particular place by using Map Annotation. MapKit uses Lattitude and Longitude to show a particular location on Map. We will explore a lot of things about MapKit in this application.

For using this powerful API we have to import it into our SwiftUi application.

Now we can use all functionalities provided by MapKit. First of all, we have to plot a Map in our application. For plotting a Map we just have to write a Map() method in ContentView. Here we have an error that says we have to bind a CoordinateRegion to this Map.

Here we are creating a State variable region, where we are giving MKCordinateRegion to this variable. MkCordinateRegion takes two argument centers and span. In the center, we will pass CLLocationCordinate2D which also takes the argument latitude and longitude. I am passing here the latitude and longitude of India Gate. We can find any location Coordinate on google. In the span parameter, we will pass latitudeDelta and longitudeDelta which is ZoomIn and ZoomOut points. Now we will simply bind this region to our Map method and our error is gone. Here we can see a Map in our app's preview on the right-hand side.

ContentView file

import SwiftUI
import MapKit

struct ContentView: View {
    @State
    var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 28.6129, longitude: 77.2295), span: MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01))
    var body: some View {
        Map(coordinateRegion: $region)
    }
}
struct ContentView_Previews: PreviewProvider {
    static
    var previews: some View {
        ContentView()
    }
}

We have successfully plotted a Map into our application. Now we will explore some more functions that are very useful in Map.

Map Marker in SwiftUI

Map Marker is used to mark a particular place. Apple has produced this function which takes argument coordinate where latitude and longitude of the place are given. Here we are creating a struct "Location", we make Location as identifiable because every Location will be unique. Now we are creating an array of Locations where we are creating the first Location as "Rashtrapati Bhawan" and passing the coordinates as latitude and longitude of "Rashtrapati Bhawan". Similarly, we are creating a second Location which is "Red Fort". We can create more Locations but here I'm creating just two. After creating this array we will simply pass it as "annotation items" in the Map function. We will iterate through this array and pass every Location in the Map Marker function which takes Coordinate of that particular Location. Here we have the result. In the preview, we can see there are two Locations marked up by red pin, which are "Rashtrapati Bhawan and Red Fort".

ContentView file

import SwiftUI
import MapKit

struct Location: Identifiable {
    let id = UUID()
    let name: String
    let coordinate: CLLocationCoordinate2D
}
let locations = [
    Location(name: "Rashtrapati Bhawan", coordinate: CLLocationCoordinate2D(latitude: 28.6143, longitude: 77.1994)),
    Location(name: "Tower of London", coordinate: CLLocationCoordinate2D(latitude: 28.6562, longitude: 77.2410))
]
struct ContentView: View {
    @State
    var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 28.6129, longitude: 77.2295), span: MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1))
    var body: some View {
        Map(coordinateRegion: $region, annotationItems: locations) {
            location in MapMarker(coordinate: location.coordinate)
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static
    var previews: some View {
        ContentView()
    }
}

Conclusion

Here we have successfully plotted a Map in our SwiftUI application and explored the Map Marker function which is very helpful to show locations. The map is an important topic in SwiftUI, so explore all functions related to MapKit. Hope this article helped you to understand MapKit and how we can plot a Map in SwiftUI.

Thanks for reading this article.