[Bug] Fix center map accuracy (#1502)

* change tileSize to 512 Signed-off-by: Shan He <[email protected]>
keplergl · Jun 9, 2021 · 1c7521b · 1c7521b
1 parent b662892
commit 1c7521b
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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));