SwiftUI Map Display Annotations

Question

I decided to switch from wrapping MKMapView into a UIViewRepresentable to the new Map() in SwiftUI.

I was able to display correctly a MKMapRect into the Map() but I am unable to display two MKPointAnnotation there. Also my route between these annotation is not showing

It is requiring me to provide an RandomAccessCollection and a (Identifiable) -> MapAnnotationProtocol> but I do not know what to put there.

Any idea what should I put in (Identifiable) -> MapAnnotationProtocol ?

import SwiftUI
import MapKit

extension MKPointAnnotation: Identifiable { }

struct ItemView: View {
    @ObservedObject var itemViewModel: ItemViewModel
    @State var coll = [MKPointAnnotation]()
    
    func onAppear() {
        let requestAnnotation = MKPointAnnotation()
        requestAnnotation.coordinate = CLLocationCoordinate2D(latitude: 46.2004781, longitude: 6.1346497)
        requestAnnotation.title = "Package"
        
        let destinationAnnotation = MKPointAnnotation()
        destinationAnnotation.coordinate = CLLocationCoordinate2D(latitude: 47.1420446, longitude: 9.5204032)
        destinationAnnotation.title = "Destination"
        
        coll.append(requestAnnotation)
        coll.append(destinationAnnotation)
    }
    
    var body: some View {
        VStack {
            if let mapRect = itemViewModel.route?.polyline.boundingMapRect {
                Map(mapRect: .constant(mapRect), annotationItems: coll) { point in
                  MapAnnotation(coordinate: point.coordinate) {
                      Text(point.title ?? "")
                  }
                }
            }
        }
        .onAppear(perform: self.onAppear)
    }
    
}

score 3 · Answer 1 · answered Jun 30 '20 at 23:00

3

You don't need to do MKPointAnnotation anymore. Currently, in Xcode 12.0 Beta, there are three structs that SwiftUI provides to satisfy the MapAnnotationProtocol:

MapAnnotation
MapMarker
MapPin

The RandomAccessCollection should be any collection (an array will do) of objects that adopt Identifiable. These used as the argument of the block in the final argument of the Map initializer.

Map(coordinateRegion: $container.region, 
    annotationItems: container.annotationLocations) { 
        (location) -> MapPin in
            MapPin(coordinate: location.coordinate)
    })

answered Jun 30 '20 at 23:00

promacuser

374
1
15

What about a Route? Is it possible to do it in SwiftUI or not yet ? – M1X Jul 01 '20 at 21:16
1

I don't know. Was hoping they'd publish a video about the new map features, but I guess we didn't get that yet. We'll see if it gets fleshed out in the next few betas... – promacuser Jul 02 '20 at 22:02
Can you do an example with MapAnnotation. I need also to display some text thats why I need MapAnnotation – M1X Jul 03 '20 at 22:59

score 3 · Answer 2 · answered Aug 19 '20 at 13:05

It seems to me that MapAnnotation requires you to implement the whole view that will be rendered on the map, so if you want both the red pin and some text, you will have to create that pin yourself (e.g. as an instance of Image with SF Symbol). Of course it doesn't look as good as the pin from MapMarker but at least it's a start.

Map(coordinateRegion: .constant(mapRect), annotationItems: coll) { annotationItem in
  MapAnnotation(coordinate: annotationItem.coordinate) {
    VStack {
      Group {
        Image(systemName: "mappin.circle.fill")
          .resizable()
          .frame(width: 30.0, height: 30.0)
        Circle()
          .frame(width: 8.0, height: 8.0)
      }
      .foregroundColor(.red)
      Text(annotationItem.title)
    }
  }
}

score 1 · Answer 3 · answered Jun 24 '20 at 04:43

1

It should be like the following (not tested due to absent dependencies in provided snapshot)

Map(mapRect: .constant(mapRect), annotationItems: coll) { point in
   MapAnnotation(coordinate: point.coordinate) {
    Text(point.title ?? "")
   }
}

answered Jun 24 '20 at 04:43

Asperi

228,894
20
464
690

1

code compiles fine but I can not see the red annotations, idea what i'm still doing wrong here? – M1X Jun 24 '20 at 08:22
also I updated my question with hard coded coordinates for testing. – M1X Jun 24 '20 at 08:25

SwiftUI Map Display Annotations

3 Answers3

Linked