Emre Değirmenci
Emre Değirmenci

Reputation: 747

Why VisionOS has no MapKit Annotation tapping interaction support?

Update: For preventing to give wrong information about the context, please read the answer that I added above.

I'm trying to adapt my current production ready iOS/iPadOS 17 app to visionOS and I'm trying it directly running the app for the Apple Vision Pro (Designed for iPad) target.

I have a bottom sheet to show Map items detail by tapping on the Map Annotations. The bottom sheet is opening properly with a normal Button action but it's not opening by Annotation which wrapped a Button action. It pops up as expected on iOS/iPadOS but on VisionOS it doesn't.

struct SomeAnnotation: Identifiable, Hashable {
    let id: UUID
    let title: String?
    let coordinate: CLLocationCoordinate2D
    let text: String
    
    func hash(into hasher: inout Hasher) {
        hasher.combine(id)
    }
    
    static func == (lhs: SomeAnnotation, rhs: SomeAnnotation) -> Bool {
        return lhs.id == rhs.id
    }
}

struct ContentView: View {
    @State var position: MapCameraPosition = .automatic
    @State var selected: SomeAnnotation?
    @State private var planBottomSheet: Bool = false
    
    let annotations: [SomeAnnotation] = [
        SomeAnnotation(
            id: UUID(),
            title: "Location 1",
            coordinate: CLLocationCoordinate2D(
                latitude: 43.64191952505181,
                longitude: -79.38918661813415
            ),
            text: "Text 1"
        ),
        SomeAnnotation(
            id: UUID(),
            title: "Location 2",
            coordinate: CLLocationCoordinate2D(
                latitude: 43.64083254041681,
                longitude: -79.3859357809321
            ),
            text: "Text 2"
        )
    ]
    
    var body: some View {
        Map(position: $position) {
            ForEach(annotations, id: \.self) { result in
                Annotation(result.title!, coordinate: result.coordinate) {
                    Button(action: {
                        selected = (selected == result ? nil : result)
                    }) {
                        Image(systemName: "bolt.car.circle.fill")
                            .resizable()
                            .foregroundStyle(.red)
                            .frame(width: 36, height: 36)
                            .background(.white)
                            .clipShape(.circle)
                    }
                }
            }
        }
        .sheet(isPresented: $planBottomSheet) {
            SomeView(bottomSheet: $planBottomSheet) // just for an example
        }
    }
}

struct SomeView: View {
    @Binding var bottomSheet: Bool
    var body: some View {
        VStack {
            Text("This is some view")
        }
    }
}

#Preview {
    ContentView()
}

But, it works for the following button action as expected and for the reproduce the problem and see the following code button action works you copy/paste the code below to above one's body;

var routePlannerButton: some View {
        Button(action: {
            planBottomSheet = true
            if mapViewModel.planDetentCondition {
                mapViewModel.planBottomSheetDetent = .large
            } else {
                mapViewModel.planBottomSheetDetent = .medium
            }
        }) {
            Image(systemName: "point.bottomleft.forward.to.arrowtriangle.uturn.scurvepath.fill")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 20, height: 20)
                .padding()
        }
        .sheet(isPresented: $planBottomSheet) {
            RoutePlannerView(
                planBottomSheetDetent: $mapViewModel.planBottomSheetDetent,
                planBottomSheet: $planBottomSheet,
                isNavigating: $isNavigating,
                showingDetails: $showingRouteDetails
            )
            .presentationDetents(
                [mapViewModel.planBottomSheetDetent, .large, .medium],
                selection: $mapViewModel.planBottomSheetDetent
            )
            .presentationContentInteraction(.resizes)
            .presentationBackgroundInteraction(.enabled(upThrough: .medium))
            .presentationDragIndicator(.visible)
        }
    }

Upvotes: 0

Views: 238

Answers (1)

Emre Değirmenci
Emre Değirmenci

Reputation: 747

Okay, problem wasn't related to VisionOS SwiftUI iOS 17 Map Annotation support but the problem that I saw was that I was not doing anything to trigger bottomSheet in the annotation. My Map() should also keep track of the selection. With a selection: plus a .tag on the annotation, I didn't need a button in the annotation label at all. Also, I was looping over two different types in map, and the $selection was looking for a single type. So the tags for the chargers are ignored.

Upvotes: 0

Related Questions