Show annotations in a Map view in SwiftUI

In this tutorial, you are going to learn how to add annotations in a Map view in SwiftUI.

SwiftUI provides MapAnnotation, which is a customizable annotation that you can use to mark locations on a map with your very own custom map marker.

SwiftUI also provides a built-in MapMarker. To learn about adding MapMarker on your map read this tutorial – Adding MapMarker on Map using SwiftUI and MapKit. If you want to add your custom annotations then continue reading this article…

Before you start following this tutorial, make sure you have imported the MapKit framework just below the SwiftUI:

import SwiftUI
import MapKit

Now let’s create our struct with the name Location. We must have to conform it to Identifiable so that SwiftUI can identify each item uniquely. Below is how you can do it:

struct Location: Identifiable {
    let id = UUID()
    let name: String
    let coordinate: CLLocationCoordinate2D
}

Now let’s focus on our main view struct…

create a state variable with the type MKCoordinateRegion for showing our map:

@State private var mapRegion: MKCoordinateRegion = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 42.54, longitude: -113.76), span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2))

In the above code, the name we provide to the state variable is mapRegion. It contains the location coordinate and zoom level to create our map.

Now let’s create an array that contains all the locations where we want to add annotations:

    let locations = [
        Location(name: "Coffee shop", coordinate: CLLocationCoordinate2D(latitude: 42.48, longitude: -113.76)),
        Location(name: "Pizza stall", coordinate: CLLocationCoordinate2D(latitude: 42.56, longitude: -113.7)),
        Location(name: "JRJI College", coordinate: CLLocationCoordinate2D(latitude: 42.59, longitude: -113.78))
    ]

As we can see in the above program, we have added the name of the places and coordinates of locations. Here we are actually using the Location type from the struct we created before to provide the locations where we want to mark our annotations.

The final step is to create our map using the Map view and put the locations to the annotations:

        Map(coordinateRegion: $mapRegion, annotationItems: locations) { location in
            //MapMarker(coordinate: location.coordinate, tint: .blue) // For using built-in marker
            MapAnnotation(coordinate: location.coordinate) {
                Circle()
                    .stroke(.blue, lineWidth: 4)
                    .frame(width: 11, height: 11)
                    .onTapGesture {
                        print("Clicked on \(location.name)")
                    }
                
                Text(location.name).foregroundColor(Color.blue)
                
            }
        }
       

As you can see in the above program, we are marking circles on the map using Circle(). Also showing the name of the locations using the Text view. You can notice that we have previously mentioned these location names and coordinates previously in the array of Location types.

Complete and final SwiftUI code to show annotations on map

Below is the complete and final code that is ready to run on iOS or Xcode emulator:

import SwiftUI
import MapKit


struct Location: Identifiable {
    let id = UUID()
    let name: String
    let coordinate: CLLocationCoordinate2D
}



struct ContentView: View {
    
    
    @State private var mapRegion: MKCoordinateRegion = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 42.54, longitude: -113.76), span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2))
    
    let locations = [
        Location(name: "Coffee shop", coordinate: CLLocationCoordinate2D(latitude: 42.48, longitude: -113.76)),
        Location(name: "Pizza stall", coordinate: CLLocationCoordinate2D(latitude: 42.56, longitude: -113.7)),
        Location(name: "JRJI College", coordinate: CLLocationCoordinate2D(latitude: 42.59, longitude: -113.78))
    ]
    

    var body: some View {
        
        
        Map(coordinateRegion: $mapRegion, annotationItems: locations) { location in
            //MapMarker(coordinate: location.coordinate, tint: .blue) // For using built-in marker
            MapAnnotation(coordinate: location.coordinate) {
                Circle()
                    .stroke(.blue, lineWidth: 4)
                    .frame(width: 11, height: 11)
                    .onTapGesture {
                        print("Clicked on \(location.name)")
                    }
                
                Text(location.name).foregroundColor(Color.blue)
                
            }
        }
        
          
    }
       
}

Now if you run the above program, you can see our custom map annotations showing up on the map as you can see in the image below:

You can see on the map, the blue circle we created for the annotations are visible on the map along with the names.

By Faruque Ahamed Mollick