fix bound calculations

codesyntax · Feb 27, 2024 · 19d996d · 19d996d
1 parent c2c04cb
commit 19d996d
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/src/components/MapLibre/MapLibre.jsx b/src/components/MapLibre/MapLibre.jsx
@@ -7,15 +7,22 @@ import 'maplibre-gl/dist/maplibre-gl.css';
 import './style.css';
 import { basicOSMStyle } from './utils';
 import markerPNG from '../../icons/marker-icon.png';
+import { calcBoundsFromCoordinates } from './utils';
 
 export const FitBounds = (props) => {
   const { markers } = props;
   const map = useMap();
-  map.current.fitBounds(
+
+  const bounds = calcBoundsFromCoordinates(
     markers.map((marker) => [
       parseFloat(marker.longitude),
       parseFloat(marker.latitude),
     ]),
+  );
+
+  map.current.fitBounds(
+    bounds,
+
     {
       padding: { top: 50, bottom: 50, left: 50, right: 50 },
     },

diff --git a/src/components/MapLibre/utils.js b/src/components/MapLibre/utils.js
@@ -18,3 +18,36 @@ export const basicOSMStyle = {
     },
   ],
 };
+
+/* taken from https://stackoverflow.com/a/71659589/1427863
+ *
+ */
+
+const getSWCoordinates = (coordinatesCollection) => {
+  const lowestLng = Math.min(
+    ...coordinatesCollection.map((coordinates) => coordinates[0]),
+  );
+  const lowestLat = Math.min(
+    ...coordinatesCollection.map((coordinates) => coordinates[1]),
+  );
+
+  return [lowestLng, lowestLat];
+};
+
+const getNECoordinates = (coordinatesCollection) => {
+  const highestLng = Math.max(
+    ...coordinatesCollection.map((coordinates) => coordinates[0]),
+  );
+  const highestLat = Math.max(
+    ...coordinatesCollection.map((coordinates) => coordinates[1]),
+  );
+
+  return [highestLng, highestLat];
+};
+
+export const calcBoundsFromCoordinates = (coordinatesCollection) => {
+  return [
+    getSWCoordinates(coordinatesCollection),
+    getNECoordinates(coordinatesCollection),
+  ];
+};