From bcf8d2f69afe0c2fb0db20b27b854f3e23d0c7ab Mon Sep 17 00:00:00 2001
From: Xiaoji Chen <Pessimistress@users.noreply.github.com>
Date: Wed, 20 Jul 2022 17:52:39 -0700
Subject: [PATCH] Handle initialViewState.bounds when reusing map (#1923)

---
 src/mapbox/mapbox.ts             | 13 +++++++++----
 test/apps/reuse-maps/src/app.tsx | 11 ++++++-----
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/mapbox/mapbox.ts b/src/mapbox/mapbox.ts
index b8e5ec3df..6cac92870 100644
--- a/src/mapbox/mapbox.ts
+++ b/src/mapbox/mapbox.ts
@@ -487,11 +487,16 @@ export default class Mapbox {
     map._container = container;
 
     // Step 3: apply new props
-    if (props.initialViewState) {
-      that._updateViewState(props.initialViewState, false);
-    }
-    map.resize();
     that.setProps({...props, styleDiffing: false});
+    map.resize();
+    const {initialViewState} = props;
+    if (initialViewState) {
+      if (initialViewState.bounds) {
+        map.fitBounds(initialViewState.bounds, {...initialViewState.fitBoundsOptions, duration: 0});
+      } else {
+        that._updateViewState(initialViewState, false);
+      }
+    }
 
     // Simulate load event
     if (map.isStyleLoaded()) {
diff --git a/test/apps/reuse-maps/src/app.tsx b/test/apps/reuse-maps/src/app.tsx
index c13de311a..64f5ceb97 100644
--- a/test/apps/reuse-maps/src/app.tsx
+++ b/test/apps/reuse-maps/src/app.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import {useState} from 'react';
 import {render} from 'react-dom';
-import Map from 'react-map-gl';
+import Map, {MapProps} from 'react-map-gl';
 
 const TOKEN = ''; // Set your mapbox token here
 
-const CONFIGS = [
+const CONFIGS: MapProps[] = [
   {
     style: {width: '100%', height: '100%'},
     mapStyle: 'mapbox://styles/mapbox/dark-v9',
@@ -19,9 +19,10 @@ const CONFIGS = [
     style: {width: 400, height: 300, margin: 100},
     mapStyle: 'mapbox://styles/mapbox/light-v9',
     initialViewState: {
-      longitude: -100,
-      latitude: 40,
-      zoom: 3.5
+      bounds: [
+        [-125, 35],
+        [-70, 45]
+      ]
     }
   },
   {