How do I add pins and other annotations to the new SwiftUI Map view for iOS 14

Question

Created Jun ’20

Replies 2

Boosts 0

Views 6.2k

Participants 5

I'm still confused after reading the documentation about how to complete the annotationItems and annotationContent parameters of the Map view for iOS 14.

Answered by OOPer in 616530022

This is a simple example of showing pins in a Map.

Code Block import SwiftUI
import MapKit
struct MyAnnotationItem: Identifiable {
    var coordinate: CLLocationCoordinate2D
    let id = UUID()
}
struct ContentView: View {
    @State var coordinateRegion: MKCoordinateRegion = {
        var newRegion = MKCoordinateRegion()
        newRegion.center.latitude = 37.786996
        newRegion.center.longitude = -122.440100
        newRegion.span.latitudeDelta = 0.2
        newRegion.span.longitudeDelta = 0.2
        return newRegion
    }()
    var annotationItems: [MyAnnotationItem] = [
        MyAnnotationItem(coordinate: CLLocationCoordinate2D(latitude: 37.810000, longitude: -122.477450)),
        MyAnnotationItem(coordinate: CLLocationCoordinate2D(latitude: 37.786996, longitude: -122.419281)),
    ]
    var body: some View {
        VStack {
            Text("Hello, world!").padding()
            Map(coordinateRegion: $coordinateRegion,
                annotationItems: annotationItems) {item in
                MapPin(coordinate: item.coordinate)
            }
        }
    }
}

But I cannot find how to put multiple types of annotations in a Map. (Showing Overlays, neither.)
Maybe that is one of the not-yet features...

Boost

Answer 1

OOPer OP

Jun ’20

Accepted Answer

This is a simple example of showing pins in a Map.

Code Block import SwiftUI
import MapKit
struct MyAnnotationItem: Identifiable {
    var coordinate: CLLocationCoordinate2D
    let id = UUID()
}
struct ContentView: View {
    @State var coordinateRegion: MKCoordinateRegion = {
        var newRegion = MKCoordinateRegion()
        newRegion.center.latitude = 37.786996
        newRegion.center.longitude = -122.440100
        newRegion.span.latitudeDelta = 0.2
        newRegion.span.longitudeDelta = 0.2
        return newRegion
    }()
    var annotationItems: [MyAnnotationItem] = [
        MyAnnotationItem(coordinate: CLLocationCoordinate2D(latitude: 37.810000, longitude: -122.477450)),
        MyAnnotationItem(coordinate: CLLocationCoordinate2D(latitude: 37.786996, longitude: -122.419281)),
    ]
    var body: some View {
        VStack {
            Text("Hello, world!").padding()
            Map(coordinateRegion: $coordinateRegion,
                annotationItems: annotationItems) {item in
                MapPin(coordinate: item.coordinate)
            }
        }
    }
}

But I cannot find how to put multiple types of annotations in a Map. (Showing Overlays, neither.)
Maybe that is one of the not-yet features...

7

Answer 2

Schokolado OP

Feb ’21

how do I place map pins without hardcoding them inside this struct?

2