Fitting camera to bounds does not work as intended

[ristiisa]

Environment

• Xcode version: 15.1
• iOS version: 17
• Devices affected: all
• Maps SDK Version: 11.1

Observed behavior and steps to reproduce

Fitting the map to a bounds does not work properly if the angle of the diagonal is steep and the width of the device is small enough.

import UIKit
import MapboxMaps

final class MultipleGeometriesExample: UIViewController, ExampleProtocol {
    private var mapView: MapView!
    private var cancelables = Set<AnyCancelable>()

    override func viewDidLoad() {
        super.viewDidLoad()

        // Set the center coordinate and zoom level.
        let centerCoordinate = CLLocationCoordinate2D(latitude: 0, longitude: 0)
        let options = MapInitOptions(cameraOptions: CameraOptions(center: centerCoordinate, zoom: 11))

        mapView = MapView(frame: view.bounds, mapInitOptions: options)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(mapView)
       
        // Allow the view controller to receive information about map events.
        mapView.mapboxMap.onMapLoaded.observeNext { [weak self] _ in
            guard let self = self else { return }
            
            let coordinates = [
                CLLocationCoordinate2DMake(59, 25),
                CLLocationCoordinate2DMake(56, 13)
            ]

            let camera = (try? mapView.mapboxMap.camera(
                for: coordinates,
                camera: CameraOptions(),
                coordinatesPadding: .init(allEdges: 0),
                maxZoom: nil,
                offset: nil))!
            
            mapView.camera.fly(to: camera, duration: 0.5)

            var line = GeoJSONSource(id: "line")
            line.data = .feature(Feature(geometry: LineString(coordinates.compactMap({ $0 }))))
            
            var lineLayer = LineLayer(id: "line-layer", source: line.id)
            lineLayer.lineColor = .constant(StyleColor(.red))
            lineLayer.lineWidth = .constant(3.0)
            lineLayer.lineCap = .constant(.round)
            
            try! mapView.mapboxMap.addSource(line)
            try! mapView.mapboxMap.addLayer(lineLayer)
            
            self.finish()
        }.store(in: &cancelables)
    }
}

Expected behavior

Notes / preliminary analysis

The issue seems to be related to the aspect ratio of the screen and the angle of the corner coordinates. As it is possible to find coordinates that work well.

Additional links and references

[ristiisa]

@pjleonard37 @persidskiy @aleksproger @OdNairy @evil159 @maios

Any thoughts on this issue?

[jhoanarango]

Hi @ristiisa, just an observation here. What happens if you add values to the padding?

            let camera = (try? mapView.mapboxMap.camera(
                for: coordinates,
                camera: CameraOptions(),
                coordinatesPadding: .init(allEdges: 0), // <-- ADD 20 OR MORE TO THIS.
                maxZoom: nil,
                offset: nil))!

[ristiisa]

Hi @ristiisa, just an observation here. What happens if you add values to the padding?

            let camera = (try? mapView.mapboxMap.camera(
                for: coordinates,
                camera: CameraOptions(),
                coordinatesPadding: .init(allEdges: 0), // <-- ADD 20 OR MORE TO THIS.
                maxZoom: nil,
                offset: nil))!

still failure

[persidskiy]

@ristiisa you can try to workaround it by using mercator projection like here https://github.com/mapbox/mapbox-maps-ios/issues/2113#issuecomment-1935887812

[ristiisa]

@ristiisa you can try to workaround it by using mercator projection like here #2113 (comment)

I confirm, the fit to bounds does work with mercator projection. For us not a possible workaround though.

[ristiisa]

in 11.3-rc1 the issue is mostly resolved where the area is now fully visible but not centered.