From 1c7521b1445945cf9d3c212276e889797d979cd8 Mon Sep 17 00:00:00 2001
From: Shan He <heshan0131@gmail.com>
Date: Tue, 8 Jun 2021 18:20:56 -0700
Subject: [PATCH] [Bug] Fix center map accuracy (#1502)

* change tileSize to 512
Signed-off-by: Shan He <heshan0131@gmail.com>
---
 src/utils/projection-utils.js                  | 12 ++++++++++--
 test/browser/components/geocoder-panel-test.js |  4 ++--
 test/browser/components/plot-container-test.js |  2 +-
 test/node/reducers/map-state-test.js           |  2 +-
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/utils/projection-utils.js b/src/utils/projection-utils.js
index 1891ad856d..ee5a31a0fc 100644
--- a/src/utils/projection-utils.js
+++ b/src/utils/projection-utils.js
@@ -21,6 +21,8 @@
 import geoViewport from '@mapbox/geo-viewport';
 import Console from 'global/console';
 
+const MAPBOX_TILE_SIZE = 512;
+
 function isLat(num) {
   return Number.isFinite(num) && num <= 90 && num >= -90;
 }
@@ -53,8 +55,14 @@ export function getCenterAndZoomFromBounds(bounds, {width, height}) {
     return null;
   }
 
-  const {zoom} = geoViewport.viewport(bounds, [width, height]);
-
+  // viewport(bounds, dimensions, minzoom, maxzoom, tileSize, allowFloat)
+  const {zoom} = geoViewport.viewport(
+    bounds,
+    [width, height],
+    undefined,
+    undefined,
+    MAPBOX_TILE_SIZE
+  );
   // 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
diff --git a/test/browser/components/geocoder-panel-test.js b/test/browser/components/geocoder-panel-test.js
index 949335aa09..01b71faa59 100644
--- a/test/browser/components/geocoder-panel-test.js
+++ b/test/browser/components/geocoder-panel-test.js
@@ -193,7 +193,7 @@ test('GeocoderPanel - render', t => {
 
   t.deepEqual(
     {latitude: newVP.latitude, longitude: newVP.longitude, zoom: newVP.zoom},
-    {latitude: 57.5, longitude: 1.5, zoom: 5},
+    {latitude: 57.5, longitude: 1.5, zoom: 4},
     'Should call updateMap action on onSelected w/ new viewport'
   );
 
@@ -204,7 +204,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: 12},
+    {latitude: 55, longitude: 1, zoom: 11},
     'Should call updateMapaction on onSelected w/o bbox'
   );
 
diff --git a/test/browser/components/plot-container-test.js b/test/browser/components/plot-container-test.js
index 45866f658a..f81f15284e 100644
--- a/test/browser/components/plot-container-test.js
+++ b/test/browser/components/plot-container-test.js
@@ -85,6 +85,6 @@ test('PlotContainer -> mount -> imageSize', t => {
     -45.57105275929253,
     'should set longitude when center: true'
   );
-  t.equal(map.props.mapState.zoom, 2, 'should set zoom when center: true');
+  t.equal(map.props.mapState.zoom, 1, 'should set zoom when center: true');
   t.end();
 });
diff --git a/test/node/reducers/map-state-test.js b/test/node/reducers/map-state-test.js
index 6b40b54b19..9da3105e35 100644
--- a/test/node/reducers/map-state-test.js
+++ b/test/node/reducers/map-state-test.js
@@ -98,7 +98,7 @@ test('#mapStateReducer -> FIT_BOUNDS', t => {
 
   const expected = {
     center: [5.7604079999999955, 45.189756500000016],
-    zoom: 11
+    zoom: 10
   };
 
   const stateWidthMapDimension = reducer(undefined, updateMap(mapUpdate));