mapbox / mapbox/mapbox-maps-ios

Fitting camera to bounds does not work as intended

Open
#2,101 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged bug :beetle:
Dominant language
Swift
Stars
601
Forks
196
PR merge metrics
No merged PRs in 30d

Description

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.

Simulator Screenshot - iPhone 15 Pro - 2024-01-24 at 12 08 53

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

Simulator Screenshot - iPhone 15 Pro - 2024-01-24 at 12 09 03

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the provided MultipleGeometriesExample on an iPhone 15 Pro or equivalent narrow device, focusing on mapboxMap.camera(for:coordinates📷coordinatesPadding:maxZoom:offset:). Compare the resulting camera and displayed bounds for the steep diagonal coordinates; done means fitting the bounds produces the expected framing without depending on a different coordinate pair.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, swift
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.