mapbox / mapbox/mapbox-maps-ios
SwiftUI - Centering camera using Overview with padding not working.
Nobody has claimed this yet.
- 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.
###
###
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.
###
###
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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