[fix] fit to bounds - fix initial basemap and deck projections mismatch

src/reducers/src/map-state-updaters.ts

@@ -422,7 +422,7 @@ function updateViewportBasedOnBounds(state: MapState, newMapState: MapState) {
     if (!booleanWithin(viewportBoundsPolygon, maxBoundsPolygon)) {
       const {latitude, longitude, zoom} = fitBounds({
         width: newMapState.width,
-        height: newMapState.width,
+        height: newMapState.height,
         bounds: [
           [newStateMaxBounds[0], newStateMaxBounds[1]],
           [newStateMaxBounds[2], newStateMaxBounds[3]]

src/utils/src/projection-utils.ts

@@ -41,18 +41,27 @@ export function getCenterAndZoomFromBounds(bounds, {width, height}) {
   }
 
   // viewport(bounds, dimensions, minzoom, maxzoom, tileSize, allowFloat)
-  const {zoom} = geoViewport.viewport(
+  let {zoom} = geoViewport.viewport(
     bounds,
     [width, height],
     undefined,
     undefined,
-    MAPBOX_TILE_SIZE
+    MAPBOX_TILE_SIZE,
+    true
   );
   // center being calculated by geo-vieweport.viewport has a complex logic that
   // projects and then unprojects the coordinates to determine the center
   // Calculating a simple average instead as that is the expected behavior in most of cases
   const center = [(bounds[0] + bounds[2]) / 2, (bounds[1] + bounds[3]) / 2];
 
+  // NOTE: this logic is used in deck.gl normalizeViewportProps
+  // This is required in order to prevent projection matrix mismatch between basemap and layers
+  const minZoom = Math.log2(height / MAPBOX_TILE_SIZE);
+  if (zoom <= minZoom) {
+    zoom = minZoom;
+    center[1] = 0;
+  }
+
   return {zoom, center};
 }
 

test/browser/components/geocoder-panel-test.js

@@ -190,7 +190,7 @@ test('GeocoderPanel - render', t => {
 
   t.deepEqual(
     {latitude: newVP.latitude, longitude: newVP.longitude, zoom: newVP.zoom},
-    {latitude: 57.5, longitude: 1.5, zoom: 4},
+    {latitude: 57.5, longitude: 1.5, zoom: 4.307606395110668},
     'Should call updateMap action on onSelected w/ new viewport'
   );
 
@@ -201,7 +201,7 @@ test('GeocoderPanel - render', t => {
   const newVP2 = updateMap.args[1][0];
   t.deepEqual(
     {latitude: newVP2.latitude, longitude: newVP2.longitude, zoom: newVP2.zoom},
-    {latitude: 55, longitude: 1, zoom: 11},
+    {latitude: 55, longitude: 1, zoom: 11.655698543267773},
     'Should call updateMapaction on onSelected w/o bbox'
   );
 

test/browser/components/plot-container-test.js

@@ -90,6 +90,6 @@ test('PlotContainer -> mount -> imageSize', t => {
     -45.57105275929253,
     'should set longitude when center: true'
   );
-  t.equal(map.props.mapState.zoom, 1, 'should set zoom when center: true');
+  t.equal(map.props.mapState.zoom, 1.8721094288367688, 'should set zoom when center: true');
   t.end();
 });

test/node/reducers/map-state-test.js

@@ -346,7 +346,7 @@ test('#mapStateReducer -> FIT_BOUNDS', t => {
 
   const expected = {
     center: [5.7604079999999955, 45.189756500000016],
-    zoom: 10
+    zoom: 10.569800116329509
   };
 
   const stateWidthMapDimension = reducer(undefined, updateMap(mapUpdate, 0));