MKMapView ignoring Safe Area on iOS 11 and iPhone X

Question

I'm trying to migrate a app to iOS 11 and for days I'm stuck with one ugly UI bug after the other. This time: MKMapView. I have a bunch of buttons which I pinned to the Safe Area Layout Guides and everything is working fine - except the MKMapView.

It completely ignores the Safe Area and therefore the compass and legal buttons are hidden under bars or my own UI elements. To verify, I created a new project with only one plain UIViewController. Then I added a MKMapView and configured custom "additionalSafeAreaInsets" which are indeed completely ignored.

The worse is probably that even with just the MKMapView, the legal label looks horribly wrong on iPhone X.

Question: is there any way I can inset the legal label and the compass to not get hidden by custom views?

Answer 1

The correct approach is to set additionalSafeAreaInsets of the view controller that contains the MKMapView. Doing so will allow you to adjust both the compass and "Legal" label as needed to accommodate for custom views on top of the map.

Answer 2

The only solution worked for me

1. Disable compass in the MapView
2. Create a new Compass button manually and simply put it wherever you like it

Here is an example

    @IBOutlet weak var mapView: MKMapView! {
    didSet {
        let userTrackingButton = MKUserTrackingButton(mapView: mapView)
        userTrackingButton.layer.position = CGPoint(x: 100, y: 100)
        userTrackingButton.backgroundColor = UIColor.white

        let compassButton = MKCompassButton(mapView: mapView)
        compassButton.layer.position = CGPoint(x: 100, y: 150)
        compassButton.compassVisibility = .adaptive

        mapView.delegate = self
        mapView.showsUserLocation = true
        mapView.setUserTrackingMode(.follow, animated: true)
        mapView.addSubview(userTrackingButton)
        mapView.addSubview(compassButton)
    }
}