Handle initialViewState.bounds when reusing map (#1923)

visgl · Jul 21, 2022 · bcf8d2f · bcf8d2f
1 parent d3c409e
commit bcf8d2f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git 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
@@ -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]
+      ]
     }
   },
   {