Update viewport states when map size is changed (#8503)

persidskiy · github-actions[bot] · commit d456f0036b72 · 2025-12-04T17:56:43.000Z
GitOrigin-RevId: 17f135863ae737e239a4d372b0576e8cad063549
diff --git a/.swiftlint.yml b/.swiftlint.yml
@@ -18,6 +18,7 @@ disabled_rules:
   - trailing_comma
   - type_name
   - type_body_length
+  - large_tuple
 custom_rules:
   trojan_source:
     regex: "[\u202A\u202B\u202D\u202E\u2066\u2067\u2068\u202C\u2069]"
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@ Mapbox welcomes participation and contributions from everyone.
 ### Features ✨ and improvements 🏁
 * Promote Geofencing APIs to stable. Remove `@_spi(Experimental)` from Geofencing APIs.
 * Fix an issue where the location indicator could show incorrect direction in landscape orientation.
+* Update viewport state when map size is changed.
 
 ## 11.17.0-rc.1 - 20 November, 2025
 
diff --git a/Examples.xcodeproj/project.pbxproj b/Examples.xcodeproj/project.pbxproj
diff --git a/Sources/Examples/SwiftUI Examples/Testing Examples/SwiftUIRoot.swift b/Sources/Examples/SwiftUI Examples/Testing Examples/SwiftUIRoot.swift
@@ -40,6 +40,7 @@ struct SwiftUIExamples {
             Example("Map settings", note: "Showcase of the most possible map configurations.", destination: MapSettingsExample())
             Example("Interactions playground", note: "Interactions edge cases", destination: InteractionsPlayground())
             Example("Viewport Playground", note: "Showcase of the possible viewport states.", destination: ViewportPlayground())
+            Example("Viewport In Fixed Frame", note: "Overview viewport in Map with fixed frame", destination: ViewportInFixedFrameExample())
             Example("Puck playground", note: "Display user location using puck.", destination: PuckPlayground())
             Example("Annotation Order", note: "Test the rendering order of annotations.", destination: AnnotationsOrderTestExample())
             Example("Snapshot Map", note: "Make a snapshot of the map.", destination: SnapshotMapExample())
diff --git a/Sources/Examples/SwiftUI Examples/Testing Examples/ViewportInFixedFrameExample.swift b/Sources/Examples/SwiftUI Examples/Testing Examples/ViewportInFixedFrameExample.swift
@@ -0,0 +1,35 @@
+import SwiftUI
+import MapboxMaps
+
+struct ViewportInFixedFrameExample: View {
+    var body: some View {
+        Map(
+            initialViewport: .overview(
+                geometry: Geometry.lineString(LineString(routeCoordinates)),
+                geometryPadding: EdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)
+            )
+        ) {
+            PolylineAnnotation(lineString: LineString(routeCoordinates))
+                .lineBorderColor(UIColor(red: 62, green: 66, blue: 181, alpha: 0))
+                .lineBorderWidth(8)
+                .lineColor(.blue)
+                .lineWidth(3)
+        }
+        .frame(width: 300, height: 300)
+    }
+
+    private let routeCoordinates: [CLLocationCoordinate2D] = [
+        .init(latitude: 61.493343399275375, longitude: 21.79401104323395),
+        .init(latitude: 61.369485877583685, longitude: 21.6497937188623),
+        .init(latitude: 61.20121331932606, longitude: 21.723373986398713),
+        .init(latitude: 61.15722935505474, longitude: 21.579156662028026),
+        .init(latitude: 61.1174491345069, longitude: 21.517349237298163),
+        .init(latitude: 61.03916342463762, longitude: 21.532065290804866),
+        .init(latitude: 60.922086661997184, longitude: 21.611531979743546),
+        .init(latitude: 60.82754056454698, longitude: 21.82049993954618),
+        .init(latitude: 60.662131116075585, longitude: 22.02063826724438),
+        .init(latitude: 60.543665503992116, longitude: 22.129538402396946),
+        .init(latitude: 60.461061119997595, longitude: 22.206061880634536),
+        .init(latitude: 60.4538050749446, longitude: 22.270812516066485)
+    ]
+}
diff --git a/Sources/Examples/SwiftUI Examples/Testing Examples/ViewportPlayground.swift b/Sources/Examples/SwiftUI Examples/Testing Examples/ViewportPlayground.swift
@@ -1,54 +1,61 @@
-import SwiftUI
 import MapboxMaps
+import SwiftUI
 
 struct ViewportPlayground: View {
     @State var viewport: Viewport = .styleDefault
     @State var mapStyle: MapStyle = .standard
     @State var useSafeAreaAsPaddings: Bool = true
     @State var additionalSafeArea: Bool = true
     @State var settingsHeight = 0.0
+    @State var collapsed = false
 
     var body: some View {
-        Map(viewport: $viewport) {
-            Puck2D(bearing: .course)
-
-            ForEvery(parks.coordinates, id: \.latitude) { coord in
-                MapViewAnnotation(coordinate: coord) {
-                    Image(systemName: "tree")
-                        .foregroundColor(.white)
-                        .padding(.all, 5)
-                        .background(
-                            Circle()
-                                .strokeBorder(.black, lineWidth: 0.5)
-                                .background(Circle().fill(Color(.systemGreen)))
-                        )
+        ZStack {
+            Map(viewport: $viewport) {
+                Puck2D(bearing: .course)
+
+                ForEvery(parks.coordinates, id: \.latitude) { coord in
+                    MapViewAnnotation(coordinate: coord) {
+                        Image(systemName: "tree")
+                            .foregroundColor(.white)
+                            .padding(.all, 5)
+                            .background(
+                                Circle()
+                                    .strokeBorder(.black, lineWidth: 0.5)
+                                    .background(Circle().fill(Color(.systemGreen)))
+                            )
+                    }
+                    .allowOverlap(true)
                 }
-                .allowOverlap(true)
-            }
 
-            PolygonAnnotation(id: "polygon", polygon: maineBoundaries)
-                .fillColor(StyleColor(red: 0, green: 128, blue: 255, alpha: 0.5)!)
-                .fillOutlineColor(StyleColor(.black))
-        }
-        .mapStyle(mapStyle)
-        .debugOptions([.camera, .padding])
-        .usesSafeAreaInsetsAsPadding(useSafeAreaAsPaddings)
-        .additionalSafeAreaInsets(.bottom, additionalBottomSafeArea)
-        .ignoresSafeArea()
-        .overlay(alignment: .bottomLeading) {
-            VStack(alignment: .leading, spacing: 0) {
-                Text("Viewport sate: \(viewportShortDescription)")
-                MiniToggle(title: "Use safe area as padding", isOn: $useSafeAreaAsPaddings)
-                MiniToggle(title: "Use additional safe area", isOn: $additionalSafeArea)
+                PolygonAnnotation(id: "polygon", polygon: maineBoundaries)
+                    .fillColor(StyleColor(red: 0, green: 128, blue: 255, alpha: 0.5)!)
+                    .fillOutlineColor(StyleColor(.black))
             }
-            .font(.safeMonospaced)
-            .floating()
-            .onChangeOfSize { size in
-                settingsHeight = size.height
+            .mapStyle(mapStyle)
+            .debugOptions([.camera, .padding])
+            .usesSafeAreaInsetsAsPadding(useSafeAreaAsPaddings)
+            .additionalSafeAreaInsets(.bottom, additionalBottomSafeArea)
+            .frame(width: collapsed ? 400 : nil, height: collapsed ? 200 : nil)
+            .ignoresSafeArea()
+            .overlay(alignment: .trailing) {
+                MapStyleSelectorButton(mapStyle: $mapStyle)
+            }
+
+            VStack(alignment: .leading) {
+                Spacer()
+                VStack(alignment: .leading, spacing: 0) {
+                    Text("Viewport sate: \(viewportShortDescription)")
+                    MiniToggle(title: "Use safe area as padding", isOn: $useSafeAreaAsPaddings)
+                    MiniToggle(title: "Use additional safe area", isOn: $additionalSafeArea)
+                    MiniToggle(title: "Collapsed", isOn: $collapsed)
+                }
+                .font(.safeMonospaced)
+                .floating()
+                .onChangeOfSize { size in
+                    settingsHeight = size.height
+                }
             }
-        }
-        .overlay(alignment: .trailing) {
-            MapStyleSelectorButton(mapStyle: $mapStyle)
         }
         .toolbar {
             ToolbarItem {
@@ -58,7 +65,7 @@ struct ViewportPlayground: View {
     }
 
     private var additionalBottomSafeArea: CGFloat {
-        additionalSafeArea ? settingsHeight : 0
+        (additionalSafeArea && !collapsed) ? settingsHeight : 0
     }
 
     var viewportShortDescription: String {
@@ -86,8 +93,8 @@ struct ViewportPlayground: View {
             case .geometryCollection:
                 geometryType = "geometryCollection"
             #if USING_TURF_WITH_LIBRARY_EVOLUTION
-            @unknown default:
-                geometryType = "unknownType"
+                @unknown default:
+                    geometryType = "unknownType"
             #else
             #endif
             }
@@ -126,7 +133,9 @@ private struct ViewportMenu: View {
                 viewport = .styleDefault
             }
             Button(".camera()") {
-                viewport = .camera(center: CLLocationCoordinate2D(latitude: 41.8915, longitude: -87.6087), zoom: 16.52, bearing: 290, pitch: 68.5)
+                viewport = .camera(
+                    center: CLLocationCoordinate2D(latitude: 41.8915, longitude: -87.6087), zoom: 16.52, bearing: 290,
+                    pitch: 68.5)
             }
             Button(".overview(.multiPoint())") {
                 viewport = viewport(for: parks, coordinatePadding: 20)
@@ -152,7 +161,9 @@ private struct ViewportMenu: View {
                 }
                 Button("[easeIn] .camera()") {
                     withViewportAnimation(.easeIn(duration: 1)) {
-                        viewport = .camera(center: CLLocationCoordinate2D(latitude: 41.8915, longitude: -87.6087), zoom: 16.52, bearing: 290, pitch: 68.5)
+                        viewport = .camera(
+                            center: CLLocationCoordinate2D(latitude: 41.8915, longitude: -87.6087), zoom: 16.52,
+                            bearing: 290, pitch: 68.5)
                     }
                 }
                 Button("[fly] .overview(.multiPoint())") {
@@ -206,28 +217,30 @@ private let parks = MultiPoint([
     CLLocationCoordinate2D(latitude: 35.141689, longitude: -115.510399),
 ])
 
-private let maineBoundaries = Polygon([[
-    CLLocationCoordinate2D(latitude: 45.13745, longitude: -67.13734),
-    CLLocationCoordinate2D(latitude: 44.8097, longitude: -66.96466),
-    CLLocationCoordinate2D(latitude: 44.3252, longitude: -68.03252),
-    CLLocationCoordinate2D(latitude: 43.98, longitude: -69.06),
-    CLLocationCoordinate2D(latitude: 43.68405, longitude: -70.11617),
-    CLLocationCoordinate2D(latitude: 43.09008, longitude: -70.64573),
-    CLLocationCoordinate2D(latitude: 43.08003, longitude: -70.75102),
-    CLLocationCoordinate2D(latitude: 43.21973, longitude: -70.79761),
-    CLLocationCoordinate2D(latitude: 43.36789, longitude: -70.98176),
-    CLLocationCoordinate2D(latitude: 43.46633, longitude: -70.94416),
-    CLLocationCoordinate2D(latitude: 45.30524, longitude: -71.08482),
-    CLLocationCoordinate2D(latitude: 45.46022, longitude: -70.66002),
-    CLLocationCoordinate2D(latitude: 45.91479, longitude: -70.30495),
-    CLLocationCoordinate2D(latitude: 46.69317, longitude: -70.00014),
-    CLLocationCoordinate2D(latitude: 47.44777, longitude: -69.23708),
-    CLLocationCoordinate2D(latitude: 47.18479, longitude: -68.90478),
-    CLLocationCoordinate2D(latitude: 47.35462, longitude: -68.2343),
-    CLLocationCoordinate2D(latitude: 47.06624, longitude: -67.79035),
-    CLLocationCoordinate2D(latitude: 45.70258, longitude: -67.79141),
-    CLLocationCoordinate2D(latitude: 45.13745, longitude: -67.13734)
-]])
+private let maineBoundaries = Polygon([
+    [
+        CLLocationCoordinate2D(latitude: 45.13745, longitude: -67.13734),
+        CLLocationCoordinate2D(latitude: 44.8097, longitude: -66.96466),
+        CLLocationCoordinate2D(latitude: 44.3252, longitude: -68.03252),
+        CLLocationCoordinate2D(latitude: 43.98, longitude: -69.06),
+        CLLocationCoordinate2D(latitude: 43.68405, longitude: -70.11617),
+        CLLocationCoordinate2D(latitude: 43.09008, longitude: -70.64573),
+        CLLocationCoordinate2D(latitude: 43.08003, longitude: -70.75102),
+        CLLocationCoordinate2D(latitude: 43.21973, longitude: -70.79761),
+        CLLocationCoordinate2D(latitude: 43.36789, longitude: -70.98176),
+        CLLocationCoordinate2D(latitude: 43.46633, longitude: -70.94416),
+        CLLocationCoordinate2D(latitude: 45.30524, longitude: -71.08482),
+        CLLocationCoordinate2D(latitude: 45.46022, longitude: -70.66002),
+        CLLocationCoordinate2D(latitude: 45.91479, longitude: -70.30495),
+        CLLocationCoordinate2D(latitude: 46.69317, longitude: -70.00014),
+        CLLocationCoordinate2D(latitude: 47.44777, longitude: -69.23708),
+        CLLocationCoordinate2D(latitude: 47.18479, longitude: -68.90478),
+        CLLocationCoordinate2D(latitude: 47.35462, longitude: -68.2343),
+        CLLocationCoordinate2D(latitude: 47.06624, longitude: -67.79035),
+        CLLocationCoordinate2D(latitude: 45.70258, longitude: -67.79141),
+        CLLocationCoordinate2D(latitude: 45.13745, longitude: -67.13734),
+    ]
+])
 
 struct MapViewportExample_Previews: PreviewProvider {
     static var previews: some View {
diff --git a/Sources/MapboxMaps/Foundation/MapboxMap.swift b/Sources/MapboxMaps/Foundation/MapboxMap.swift
@@ -11,6 +11,7 @@ protocol MapboxMapProtocol: AnyObject {
     var size: CGSize { get }
     var anchor: CGPoint { get }
     var options: MapOptions { get }
+    var sizeSignal: Signal<CGSize> { get }
     func setCamera(to cameraOptions: CameraOptions)
     func setCameraBounds(with options: CameraBoundsOptions) throws
     func setNorthOrientation(_ northOrientation: NorthOrientation)
@@ -203,6 +204,9 @@ public final class MapboxMap: StyleManager {
 
     private let _isDefaultCameraInitialized = CurrentValueSignalProxy<Bool>()
 
+    private let sizeSubject = CurrentValueSignalSubject(CGSize.zero)
+    private(set) lazy var sizeSignal = sizeSubject.signal.skipRepeats()
+
     /// Triggered when map is loaded for the first time, and camera is initialized with default style camera options.
     var isDefaultCameraInitialized: Signal<Bool> { _isDefaultCameraInitialized.signal.skipRepeats() }
 
@@ -467,6 +471,7 @@ public final class MapboxMap: StyleManager {
         }
         set {
             __map.setSizeFor(Size(newValue))
+            self.sizeSubject.value = newValue
         }
     }
 
diff --git a/Sources/MapboxMaps/Foundation/Signal/Signal.swift b/Sources/MapboxMaps/Foundation/Signal/Signal.swift
@@ -169,13 +169,14 @@ extension Signal {
 }
 
 extension Signal {
-    static func combineLatest<P1, P2>(_ s1: Signal<P1>, _ s2: Signal<P2>) -> Signal where Payload == (P1, P2) {
+    static func combineLatest<P1, P2, P3>(_ s1: Signal<P1>, _ s2: Signal<P2>, _ s3: Signal<P3>) -> Signal where Payload == (P1, P2, P3) {
         Signal { handler in
             var last1: P1?
             var last2: P2?
+            var last3: P3?
             let handle = {
-                if let last1, let last2 {
-                    handler((last1, last2))
+                if let last1, let last2, let last3 {
+                    handler((last1, last2, last3))
                 }
             }
             return AnyCancelable([
@@ -186,10 +187,17 @@ extension Signal {
                 s2.observe { value in
                     last2 = value
                     handle()
+                },
+                s3.observe { value in
+                    last3 = value
+                    handle()
                 }
             ])
         }
     }
+    static func combineLatest<P1, P2>(_ s1: Signal<P1>, _ s2: Signal<P2>) -> Signal where Payload == (P1, P2) {
+        Signal<(P1, P2, Int)>.combineLatest(s1, s2, Signal<Int>(just: 1)).map { ($0.0, $0.1) }
+    }
 }
 
 extension Signal {
diff --git a/Sources/MapboxMaps/Viewport/States/FollowPuck/FollowPuckViewportState.swift b/Sources/MapboxMaps/Viewport/States/FollowPuck/FollowPuckViewportState.swift
@@ -26,8 +26,11 @@ public final class FollowPuckViewportState {
         self.mapboxMap = mapboxMap
 
         let resultCamera = Signal
-            .combineLatest(optionsSubject.signal.skipRepeats(), onPuckRender.map(\.followPuckState).skipRepeats())
-            .map { (options, renderingState) in
+            .combineLatest(
+                optionsSubject.signal.skipRepeats(),
+                mapboxMap.sizeSignal, // trigger viewport reevaluation on map size change
+                onPuckRender.map(\.followPuckState).skipRepeats())
+            .map { (options, _, renderingState) in
                 CameraOptions(
                     center: renderingState.coordinate,
                     padding: options.padding,
diff --git a/Sources/MapboxMaps/Viewport/States/Overview/OverviewViewportState.swift b/Sources/MapboxMaps/Viewport/States/Overview/OverviewViewportState.swift
@@ -34,8 +34,13 @@ public final class OverviewViewportState {
         self.optionsSubject = .init(options)
         self.mapboxMap = mapboxMap
         self.cameraAnimationsManager = cameraAnimationsManager
-        self.cameraOptions = Signal.combineLatest(safeAreaPadding, optionsSubject.signal.skipRepeats())
-            .map { safeAreaPadding, options in
+        self.cameraOptions =
+            Signal.combineLatest(
+                safeAreaPadding,
+                mapboxMap.sizeSignal, // trigger viewport reevaluation on map size change
+                optionsSubject.signal.skipRepeats()
+            )
+            .map { safeAreaPadding, _, options in
                 let padding = safeAreaPadding + options.padding
                 let cam = try? mapboxMap.camera(
                     for: options.geometry.coordinates,
diff --git a/Tests/MapboxMapsTests/Foundation/Mocks/MockMapboxMap.swift b/Tests/MapboxMapsTests/Foundation/Mocks/MockMapboxMap.swift
@@ -25,7 +25,8 @@ final class MockMapboxMap: MapboxMapProtocol {
     var onRenderFrameFinished: Signal<RenderFrameFinished> { events.signal(for: \.onRenderFrameFinished) }
     var onResourceRequest: Signal<ResourceRequest> { events.signal(for: \.onResourceRequest) }
 
-    var size: CGSize = .zero
+    @TestPublished var size: CGSize = .zero
+    var sizeSignal: Signal<CGSize> { $size }
 
     var cameraBounds = MapboxMaps.CameraBounds(
         bounds: CoordinateBounds(
diff --git a/Tests/MapboxMapsTests/Foundation/SignalTests.swift b/Tests/MapboxMapsTests/Foundation/SignalTests.swift
diff --git a/Tests/MapboxMapsTests/Viewport/States/FollowPuck/FollowPuckViewportStateTests.swift b/Tests/MapboxMapsTests/Viewport/States/FollowPuck/FollowPuckViewportStateTests.swift
diff --git a/Tests/MapboxMapsTests/Viewport/States/Overview/OverviewViewportStateTests.swift b/Tests/MapboxMapsTests/Viewport/States/Overview/OverviewViewportStateTests.swift

Original file line number	Diff line number	Diff line change
`@@ -169,13 +169,14 @@ extension Signal {`
`169`	`169`	`}`
`170`	`170`
`171`	`171`	`extension Signal {`
`172`		`- static func combineLatest<P1, P2>(_ s1: Signal<P1>, _ s2: Signal<P2>) -> Signal where Payload == (P1, P2) {`
	`172`	`+ static func combineLatest<P1, P2, P3>(_ s1: Signal<P1>, _ s2: Signal<P2>, _ s3: Signal<P3>) -> Signal where Payload == (P1, P2, P3) {`
`173`	`173`	`Signal { handler in`
`174`	`174`	`var last1: P1?`
`175`	`175`	`var last2: P2?`
	`176`	`+ var last3: P3?`
`176`	`177`	`let handle = {`
`177`		`- if let last1, let last2 {`
`178`		`- handler((last1, last2))`
	`178`	`+ if let last1, let last2, let last3 {`
	`179`	`+ handler((last1, last2, last3))`
`179`	`180`	`}`
`180`	`181`	`}`
`181`	`182`	`return AnyCancelable([`
`@@ -186,10 +187,17 @@ extension Signal {`
`186`	`187`	`s2.observe { value in`
`187`	`188`	`last2 = value`
`188`	`189`	`handle()`
	`190`	`+ },`
	`191`	`+ s3.observe { value in`
	`192`	`+ last3 = value`
	`193`	`+ handle()`
`189`	`194`	`}`
`190`	`195`	`])`
`191`	`196`	`}`
`192`	`197`	`}`
	`198`	`+ static func combineLatest<P1, P2>(_ s1: Signal<P1>, _ s2: Signal<P2>) -> Signal where Payload == (P1, P2) {`
	`199`	`+ Signal<(P1, P2, Int)>.combineLatest(s1, s2, Signal<Int>(just: 1)).map { ($0.0, $0.1) }`
	`200`	`+ }`
`193`	`201`	`}`
`194`	`202`
`195`	`203`	`extension Signal {`