MapBox Gesture Listener In SwiftUI View

[RebinX1]

So i implemented the full mapbox v11 to my swiftUI App using the swiftUI implementation and its working great, but the issue is i want to listen when my user make pinch or pan or zoom on the map using the Gesture provided by mapbox, however i did not find any proper documentation on how to achieve that in SwiftUI.

I tried using SwiftUI Gesture and mimic some of the Old mapbox Gesture listener but its causing me weird behavior:

`MapReader { proxy in Map(viewport: $viewPort, content: { if isTrafficLayerInitilized {

                PolylineAnnotation(id:"route", lineCoordinates: navigationViewModel.routeCoordinates)
                    .lineColor(StyleColor(UIColor(named: "MagentaColor")!))
                    .lineBorderColor(StyleColor(UIColor(named: "MagentaColor")!))
                    .lineWidth(6.0)
                    .lineJoin(.round)

                if let destination = navigationViewModel.routeCoordinates.last {

                    PointAnnotation(id: "Destination", coordinate: destination)
                        .image(.init(image: UIImage(named: "destination_pin")!, name: "DestinationPin"))
                        .iconAnchor(.bottom)
                        .iconSize(0.7)
                        .iconOffset([0.0, 8.0])
                }

                PointAnnotationGroup(reportViewModel.reports) { report in
                    PointAnnotation(coordinate: report.coordinate)
                        .image(mapBoxViewModel.annotationImage(report: report, isLowZoom: usePointAnnotationOnLowZoom))
                        .iconAnchor(.bottom)
                        .iconSize(0.7)
                        .iconOffset([0.0, 8.0])
                        .onTapGesture {
                            withAnimation(.easeOut) {
                                homeViewModel.isReportInformationSheetVisable = true
                                reportInformationViewModel.selectedReport = report
                                homeViewModel.hideSearchStack = false
                            }
                        }
                }

                if let report = reportViewModel.reportOfCurrentRegion, reportViewModel.alertUser {

                    MapViewAnnotation(coordinate: report.coordinate) {
                        CircleAlertPulsAnnotationView(reportType: report.reportType)
                    }
                    .variableAnchors([.init(anchor: .center)])

                }

                if let report = reportInformationViewModel.selectedReport {
                    MapViewAnnotation(coordinate: report.coordinate) {
                        ReportAnnotation(report: report)
                    }
                    .variableAnchors([.init(anchor: .bottom, offsetY: -24)])
                }

                createPuck2D()
            }
        })
        .onCameraChanged(action: { camera in
            usePointAnnotationOnLowZoom = camera.cameraState.zoom < 11.5
        })

// .mapStyle(.standard(lightPreset: .dawn)) .mapStyle(MapStyle(uri: customStyle!)) .ornamentOptions(configureOrnamentOptions()) .onStyleLoaded(action: { _ in proxy.map.map { mapBoxViewModel.initStyleLayer($0) landmarkViewModel.getAllLandMarks($0) } configureMap() }) .onMapLongPressGesture(perform: { mapContentGesture in reportViewModel.fetchManualReports(coordinate: mapContentGesture.coordinate) navigationViewModel.generateRoute(to: mapContentGesture.coordinate)

            debugLog("DEBUG: Map coordinate click \(mapContentGesture.coordinate)")
        })
        .gesture(
            DragGesture()
                .onChanged { _ in
                    guageState = .idle
                    withAnimation(.easeOut) {
                        homeViewModel.isReportInformationSheetVisable = false
                        homeViewModel.hideSearchStack = true
                    }
                }
        )
        .onTapGesture {
            withAnimation(.easeOut) {
                homeViewModel.isReportInformationSheetVisable = false
                homeViewModel.hideSearchStack = false
            }
        }

    }`

[persidskiy]

Hi, thank you for the feedback, the API is missing currently. Internal ticket https://mapbox.atlassian.net/browse/MAPSIOS-577

[persidskiy]

@Re-Core in the upcoming release you will be able to set gesture handlers via https://docs.tilestream.net/ios/maps/api/latest/documentation/mapboxmaps/map/gesturehandlers(_:) , you can try the fresh version from main branch