SwiftuI

[kaspesi]

New Feature

Offset on a MapViewAnnotation

Why

I currently have two MapViewAnnotations I want to display. One with has the text label and one which has the icon. I want the icons to always show up and I want the text to display below it (conditional on overlap). What I'm currently seeing is that the icons always show up but they do not allow the text MapViewAnnotations to show (since they have overlap to false). Im hoping offset could solve this issue as they would not share the same coordinate location.

I currently have it so on drag gesture begin, the overlap gets set to true. This makes it so I can see both the text and icons, and they do not seem to be overlapping, which makes me wonder why they are not being displayed. This is what my code currently looks like:

MapReader { proxy in
          Map(viewport: $mapViewModel.viewport) {
            ForEvery(venues.reversed(), id: \.id) { venue in
              MapViewAnnotation(coordinate: CLLocationCoordinate2DMake(venue.location.latitude, venue.location.longitude)) {
                VenueMapAnnotationView(venue: venue, ranking: venueRankings[venue.id] ?? 0)
              }
              .selected(venue.id == mapViewModel.selectedBusiness?.id ?? "")
              .allowOverlap(true)
              .allowOverlapWithPuck(true)
              .ignoreCameraPadding(true)
              .variableAnchors(
                [ViewAnnotationAnchor.bottom].map { .init(anchor: $0) }
              )
            }
            
            
            ForEvery(venues.reversed(), id: \.id) { venue in
              MapViewAnnotation(coordinate: CLLocationCoordinate2DMake(venue.location.latitude, venue.location.longitude)) {
                VenueTextMapAnnotationView(venue: venue)
              }
              .variableAnchors(
                [ViewAnnotationAnchor.top, .topLeft, .topRight].map { .init(anchor: $0) }
              )
              .allowOverlap(overlap)
              .allowOverlapWithPuck(true)
              .selected(venue.id == mapViewModel.selectedBusiness?.id ?? "")

            }

            Puck2D(bearing: .heading)
              .showsAccuracyRing(true)
          }
          .presentsWithTransaction(true)
          .mapStyle(MapStyle(uri: customStyle))
          .ornamentOptions(
            OrnamentOptions(
              scaleBar: .init(visibility: .hidden), compass: .init(visibility: .hidden))
          )
          .onCameraChanged { _ in
            if mapViewModel.selectedBusiness != nil {
              mapViewModel.selectedBusiness = nil
            }
          }
          .presentsWithTransaction(true)
          .gestureHandlers(MapGestureHandlers(
            onBegin: {  gestureType in
              DispatchQueue.main.async {
              self.overlap = true
              }
            },
            onEnd: { (gestureType, willDecelerate) in
              DispatchQueue.main.async {
              self.overlap = false
              }
            },
            onEndAnimation: { gestureType in
              DispatchQueue.main.async {
              self.overlap = false
              }
            }
        ))
          .ignoresSafeArea()
          
        }
        ```

[persidskiy]

@kaspesi Hi, If I understand your case correcly, you can use the ViewAnnotationAnchorConfig that you pass into https://docs.mapbox.com/ios/maps/api/11.2.0/documentation/mapboxmaps/mapviewannotation/variableanchors(_:). It has the offsetX and offsetY properties.

Also, take a look at this example https://docs.mapbox.com/ios/maps/examples/view-annotation-with-point-annotation/, this is not SwiftUI, but the options are the same.

I'm closing the issue. Please reopen if you think this is a bug. Also, any screenshots would be helpful.