From 6fa3069857c798e5b3fe83e736f4e115c64d41d8 Mon Sep 17 00:00:00 2001
From: Rudo Kemper <31662219+rudokemper@users.noreply.github.com>
Date: Tue, 26 Sep 2023 09:44:01 -0400
Subject: [PATCH] fix: Use turf center to handle fitBounds on non-Mercator
 projections (#958)

---
 rails/app/javascript/components/Map.jsx |  7 ++++++-
 rails/package.json                      |  6 ++++--
 rails/yarn.lock                         | 19 +++++++++++++++++--
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/rails/app/javascript/components/Map.jsx b/rails/app/javascript/components/Map.jsx
index 53687ff08..153d7ce85 100644
--- a/rails/app/javascript/components/Map.jsx
+++ b/rails/app/javascript/components/Map.jsx
@@ -7,6 +7,9 @@ import Popup from "./Popup";
 import mapboxgl from '!mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
 
+import center from '@turf/center'
+import bboxPolygon from '@turf/bbox-polygon'
+
 const STORY_POINTS_LAYER_ID = "ts-points-layer";
 const STORY_POINTS_DATA_SOURCE = "ts-points-data";
 
@@ -209,7 +212,9 @@ export default class Map extends Component {
     ) {
       const { bounds, ...frameOptions } = this.props.framedView;
       if (bounds) {
-        this.map.fitBounds(bounds, { padding: 50, duration: 2000.0, ...frameOptions });
+        const bboxPoly = bboxPolygon(bounds);
+        const centerPoint = center(bboxPoly).geometry.coordinates;
+        this.map.fitBounds(bounds, { center: centerPoint, padding: 50, duration: 2000.0, maxZoom: 12, ...frameOptions });
       } else {
         this.map.easeTo({ duration: 2000.0, ...frameOptions });
       }
diff --git a/rails/package.json b/rails/package.json
index bd1889f56..b91f4e0f6 100644
--- a/rails/package.json
+++ b/rails/package.json
@@ -16,8 +16,10 @@
     "@babel/core": "^7.20.12",
     "@babel/preset-react": "^7.18.6",
     "@rails/webpacker": "5.4.4",
-    "@turf/bbox": "^6.0.1",
-    "@turf/helpers": "^6.1.4",
+    "@turf/bbox": "^6.5.0",
+    "@turf/bbox-polygon": "^6.5.0",
+    "@turf/center": "^6.5.0",
+    "@turf/helpers": "^6.5.0",
     "awesomplete": "^1.1.5",
     "babel-jest": "24.0.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
diff --git a/rails/yarn.lock b/rails/yarn.lock
index ffee800ed..0a032a841 100644
--- a/rails/yarn.lock
+++ b/rails/yarn.lock
@@ -1445,7 +1445,14 @@
     webpack-cli "^3.3.12"
     webpack-sources "^1.4.3"
 
-"@turf/bbox@^6.0.1":
+"@turf/bbox-polygon@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@turf/bbox-polygon/-/bbox-polygon-6.5.0.tgz#f18128b012eedfa860a521d8f2b3779cc0801032"
+  integrity sha512-+/r0NyL1lOG3zKZmmf6L8ommU07HliP4dgYToMoTxqzsWzyLjaj/OzgQ8rBmv703WJX+aS6yCmLuIhYqyufyuw==
+  dependencies:
+    "@turf/helpers" "^6.5.0"
+
+"@turf/bbox@^6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@turf/bbox/-/bbox-6.5.0.tgz#bec30a744019eae420dac9ea46fb75caa44d8dc5"
   integrity sha512-RBbLaao5hXTYyyg577iuMtDB8ehxMlUqHEJiMs8jT1GHkFhr6sYre3lmLsPeYEi/ZKj5TP5tt7fkzNdJ4GIVyw==
@@ -1453,7 +1460,15 @@
     "@turf/helpers" "^6.5.0"
     "@turf/meta" "^6.5.0"
 
-"@turf/helpers@^6.1.4", "@turf/helpers@^6.5.0":
+"@turf/center@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@turf/center/-/center-6.5.0.tgz#3bcb6bffcb8ba147430cfea84aabaed5dbdd4f07"
+  integrity sha512-T8KtMTfSATWcAX088rEDKjyvQCBkUsLnK/Txb6/8WUXIeOZyHu42G7MkdkHRoHtwieLdduDdmPLFyTdG5/e7ZQ==
+  dependencies:
+    "@turf/bbox" "^6.5.0"
+    "@turf/helpers" "^6.5.0"
+
+"@turf/helpers@^6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@turf/helpers/-/helpers-6.5.0.tgz#f79af094bd6b8ce7ed2bd3e089a8493ee6cae82e"
   integrity sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw==