SwiftUI Map Annotation Tutorial

In SwiftUI different annotation type can be displayed in a map view. Map pins, map markers and custom map annotations. In this tutorial some places of interest of the city of London will be displayed with the different annotation types. This tutorial is built for iOS14 and Xcode 12, which can be download at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. In the template selector, select iOS as the platform, select App template in the Application section and then click Next.

Enter SwiftUIMapAnnotationtutorial as the Product Name, select SwiftUI as Interface, SwiftUI App as Life Cycle and Swift as Language. Deselect the Include Tests checkbos and click Next. Choose a location to save the project on your Mac.

In the canvas, click Resume to display the preview. If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

In the Project navigator, click to select ContentView.swift. Import the MapKit framework at the top of the file

import MapKit

Insert the Place Struct which will hold the coordinate values of the different locations.

import MapKit

struct Place: Identifiable {
    let id = UUID()
    let name: String
    let latitude: Double
    let longitude: Double
    var coordinate: CLLocationCoordinate2D {
        CLLocationCoordinate2D(latitude: latitude, longitude: longitude)
    }
}

Change the ContentView struct to

struct ContentView: View {
    // 1.
    let places = [
        Place(name: "British Museum", latitude: 51.519581, longitude: -0.127002),
        Place(name: "Tower of London", latitude: 51.508052, longitude: -0.076035),
        Place(name: "Big Ben", latitude: 51.500710, longitude: -0.124617)
    ]
    
    // 2.
    @State var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 51.514134, longitude: -0.104236),
        span: MKCoordinateSpan(latitudeDelta: 0.075, longitudeDelta: 0.075))
    
  
    var body: some View {
        // 3.
        Map(coordinateRegion: $region, annotationItems: places) { place in
            // Insert an annotation type here 
        }
        .ignoresSafeArea(.all)
    }
}

1. a places array is declared containing 3 places of interest in londen with the corresponding coordinates.

2. a region State property is declared containing a region of the city of london.

3. A Map view is displayed of the predefined region locations and size. The map contains the places with the annotation.

Unfortunately in the current version of SwiftUI only one type of annotation can be displayed inside a map view. First, insert the following line inside the Map view closure to display the MapPin annotation type.

MapPin(coordinate: place.coordinate)

The preview displays the map pin annotations.

Change the line to display the Mapmarker annotation type.

MapMarker(coordinate: place.coordinate)

The Preview now display the map marker annotations.

Change the line with the following code block to display the MapAnnotation type.

MapAnnotation(coordinate: place.coordinate, anchorPoint: CGPoint(x: 0.5, y: 0.5)) {
    Circle()
        .strokeBorder(Color.red, lineWidth: 10)
        .frame(width: 44, height: 44)
}

The Preview displays each location with the annotation with a circle with a red outline color.

The source code of the SwiftUIMaoAnnotationTutorial can be downloaded at the ioscreator repository on Github.