CODEWITHSUNDEEP
iosswiftswiftuixcode12ios14
M1X
M1X

Reputation: 5354

SwiftUI Map Display Annotations

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)
    }
    
}

Upvotes: 6

Views: 5648

Answers (3)

MikChmie
MikChmie

Reputation: 51

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)
    }
  }
}

Upvotes: 3

promacuser
promacuser

Reputation: 396

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)
    })

Upvotes: 3

Asperi
Asperi

Reputation: 257493

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 ?? "")
   }
}

Upvotes: 1

Related Questions