Map content insets do not offset attribution on inset change

[tamoyal]

Platform: iOS
Mapbox SDK version: Mapbox-iOS-SDK (3.7.0)

I am creating an experience similar to HotelTonight where the user at first sees only a small window of the map view at the top of the screen centered to that area and the rest is hidden under other views until tap where it expands.

This isn't exact because I found these online but they illustrate the point: Step 1, Step 2

And in my app, we want to go from first screen to second screen:

I also want to show the user's location so I have enabled that.

The way I accomplish this is view contentInset.

let url = URL(string: "mapbox://styles/mapbox/dark-v9")
let rect = CGRect(x: 0.0, y: Theme.Metrics.topBarHeight, width: self.view.bounds.width, height: self.view.bounds.height - Theme.Metrics.topBarHeight)
let _mapView = MGLMapView(frame: rect, styleURL: url)
_mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
_mapView.zoomLevel = 11
_mapView.userTrackingMode = .follow
_mapView.showsUserLocation = true

// bottomViewHeight is height of the list of users view
let smallMapInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: self.bottomViewHeight, right: 0.0)
let largeMapInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: 80.0, right: 0.0) // bottom offset for bottom nav bar

mapView.setContentInset(smallMapInsets, animated: false)

The above works as shown in the first screen shot.

On map tap (i have added a gesture recognizer), I want to animate a change in center and zoom level. Side note - if you have a better suggestion on how to do this, I would love to know.

func expandMap() {
    // disable user tracking mode as that will cause jumps during the animation
    self.mapView.userTrackingMode = .none

    // animate the content inset change while the list view is being animated out
    // this effectively results in a re-center
    self.mapView.setContentInset(largeMapInsets, animated: true)
    UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseIn, animations: {
        self.bottomView.setY(self.view.bounds.height) // animate out the list view
    }) { completed in
        // zoom in after we're recentered
         self.mapView.setZoomLevel(13, animated: true)
    }
}

The above results in the second screen shot where the center has been updated but not the attribution or info button.

[fabian-guerra]

Hi, @tamoyal. Thank you for using Mapbox. Could you please try:

mapView.setNeedsUpdateConstraints()

[tamoyal]

thanks @fabian-guerra , it works but it's jumpy. any idea how i can animate all these things at the same time? im guessing i would have to animate this constraint update alongside the content inset change?

[fabian-guerra]

Fixed in #10629