mapbox / mapbox/mapbox-maps-ios

SwiftUI - Centering camera using Overview with padding not working.

Open
#2,113 4 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.2
- iOS version: 17.0.1
- Devices affected: All
- Maps SDK Version: 11.1.0

## Observed behavior and steps to reproduce

We are presenting a map to show the different cities someone has visited throughout the year. When showing the map, we want to center the camera to show all of the cities.

In the `.onAppear` method we get the coordinates to create the overview . The behavior works as expected.

### Code in .onAppear

```swift
.onAppear {
let airports = summary?.routes.flatMap { $0.airports } // <-- We get the airports which hold the coordinate

if let points = airports.flatMap({ $0.map { $0.coordinate } }) {
let multiPoints = MultiPoint(points) // <-- We create the MultiPoint with the coordinates.
viewport = .overview(geometry: multiPoints, geometryPadding: .init(top: 20 , leading: 20, bottom: 20, trailing: 20), maxZoom: 3, offset: .zero) // <-- We set the overview with the paddings.
}
}
```

###

Here is a screenshot that shows the results.
> [!NOTE]
> As you can see, the camera was centered properly and with the correct padding.

###

Screenshot 2024-02-08 at 4 59 10 PM

###

However, when the user taps through the different months to see the cities and routes that correspond to those months, the map is centering correctly, but it is not applying the paddings.

### Code in .onChange

```swift
.onChange(of: summary?.routes) { oldValue, newValue in
withViewportAnimation {
let airports = newValue?.flatMap { $0.airports } // <-- We get the new airports which hold the coordinate

if let points = airports.flatMap({ $0.map { $0.coordinate } }) {
let multiPoints = MultiPoint(points) // <-- We create the MultiPoint with the coordinates.
viewport = .overview(geometry: multiPoints, geometryPadding: .init(top: 20, leading: 20, bottom: 20, trailing: 20), maxZoom: 3, offset: .zero) // <-- We set the overview with the paddings.
}
}
}

```
###

Here is a screenshot that shows the results.

> [!WARNING]
> The padding is not correct. As you can see the cities are flushed to the edges.

###

Screenshot 2024-02-08 at 5 18 34 PM

###

What is interesting is that when the map's style is changed to `.satellite`, the map works as expected.

```swift

.mapStyle(colorScheme == .light ? .standard : .satellite)

```

###

Here is a screen record displaying both in the `.standard` and `.satellite`. As shown in the video the padding is only applied while the map is on `.satellite` and not in the `.standard`.

###

https://github.com/mapbox/mapbox-maps-ios/assets/14069813/e8ffdab7-dad1-4fbc-8fcc-d771019b1c26

## Expected behavior

The expected behavior is that the map should center in the overview and apply the paddings passed in.

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 reported SwiftUI camera behavior from the .onAppear and .onChange examples on Xcode 15.2, iOS 17.0.1, and Maps SDK 11.1.0, comparing the standard and satellite styles. Done means viewport.overview applies the supplied geometry padding consistently when routes change, regardless of map style.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.