'MKMapView ignoring Safe Area on iOS 11 and iPhone X

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?

enter image description here

iosiphonemapkitmkmapviewsafearealayoutguide


Solution 1:[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.

Solution 2:[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)
    }
}

Solution 3:[3]

Looking into this for one of my own projects, looks like interface builder has a solution for this:

On the map view, select "Preserve Superview Margins" and "Safe area relative Margins"

On the map view, select "Preserve Superview Margins" and "Safe area relative Margins" and the legal + compass will be positioned correctly.

Solution 4:[4]

Another solution to this issue is to use the directionalLayoutMargins property of UIView available in iOS 11.0+. This lets you specify the margins of a view before the content of any subviews (in this case the Legal notes) is drawn.

mapView.directionalLayoutMargins = NSDirectionalEdgeInsetsMake(0, 0, 25, 0);

Solution 5:[5]

In Xcode 13.2, iOS 15.4,select the view controller in Interface Builder and open the Attributes Inspector. In the section "Extend Edges", clear "Under Top Bars" and "Under Bottom Bars" check boxes.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 dbart
Solution 2 Vagif
Solution 3 danwkennedy
Solution 4 jt_uk
Solution 5 Phil

Related Questions