How to apply a dynamic rotation to a map using SwiftUI

Question

So I'm using Mapbox, and I don't want to use the userTrackingMode = .followWithHeading as this causes way too much lag on my device as you rotate it. Instead, I'd like to maybe incorporate the .rotationEffect(Angle(degrees: degree)) SwiftUI property. My map is pretty much the basic map found here (https://docs.mapbox.com/help/tutorials/ios-swiftui/). My map is initialized in the following way:

Map()
    .edgesIgnoringSafeArea(.all)
    //Here I tried to add a rotation effect, where the degree is the user heading, but this causes a weird graphical glitch because of the ignoring safe area property.

Any help in understanding how to rotate the view in this manner properly would be much appreciated.

Answer 1

The problem with your code is you rotate the view, which contains the map. The view is initially rectangular and the rotations are applied to this rectangle.

You can achieve this map rotation behavior with a MKMapView instance, but you have to do some additional work to use this class in SwiftUI. I have created a Playground showing how this can be achieved with a MKMapView. For different angles, change the heading of the MKMapCamera like

//for 0 degrees angle
@State private var camera = MKMapCamera(lookingAtCenter: CLLocationCoordinate2D(latitude: 37.334_900, longitude: -122.009_020), fromDistance: 7500, pitch: 0, heading: 0)

//for 30 degrees angle
@State private var camera = MKMapCamera(lookingAtCenter: CLLocationCoordinate2D(latitude: 37.334_900, longitude: -122.009_020), fromDistance: 7500, pitch: 0, heading: 30)

This is the playground code

import SwiftUI
import MapKit
import PlaygroundSupport

struct ContentView: View {

    //for 0 degrees angle, set heading = 0
    @State private var camera = MKMapCamera(lookingAtCenter: CLLocationCoordinate2D(latitude: 37.334_900, longitude: -122.009_020), fromDistance: 7500, pitch: 0, heading: 0)
    
    var body: some View {
        MapView(camera: $camera)
                .edgesIgnoringSafeArea(.all)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct MapView: UIViewRepresentable {
    @Binding var camera: MKMapCamera
    
    func makeUIView(context: Context) -> MKMapView {
        let mapView = MKMapView()
        mapView.delegate = context.coordinator
        mapView.setCamera(camera, animated: false)
        return mapView
    }

    func updateUIView(_ view: MKMapView, context: Context) {

    }

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    class Coordinator: NSObject, MKMapViewDelegate {
        var parent: MapView

        init(_ parent: MapView) {
            self.parent = parent
        }
    }
}

PlaygroundPage.current.setLiveView(ContentView())

These are the results I got for heading = 0 and heading = 30. Hope this helps you.