[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};
 }