From b75f363b1943f639ec303524c7e0b328b9de333b Mon Sep 17 00:00:00 2001
From: Tomasz Subik <tsubik@gmail.com>
Date: Fri, 29 Mar 2024 09:25:53 +0100
Subject: [PATCH] observations map: fitBounds to selected observations

---
 components/map/index.js |  4 +++-
 pages/observations.js   | 21 +++++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/components/map/index.js b/components/map/index.js
index 6f78eb2f..016ff916 100644
--- a/components/map/index.js
+++ b/components/map/index.js
@@ -303,11 +303,13 @@ class Map extends Component {
         ...options
       });
 
+      // TODO: not sure why fitBounds maxZoom is not working, so fixing that manually
+      const useMaxZoom = options.maxZoom && zoom > options.maxZoom;
       const newViewport = {
         ...this.state.viewport,
         longitude,
         latitude,
-        zoom,
+        zoom: useMaxZoom ? options.maxZoom : zoom,
         transitionDuration
       };
 
diff --git a/pages/observations.js b/pages/observations.js
index 6fc9f3f9..9ce9b5fd 100644
--- a/pages/observations.js
+++ b/pages/observations.js
@@ -7,6 +7,8 @@ import { connect } from 'react-redux';
 import { withRouter } from 'next/router';
 import { injectIntl } from 'react-intl';
 
+import getBBox from '@turf/bbox';
+
 import modal from 'services/modal';
 
 import { transformRequest } from 'utils/map';
@@ -98,6 +100,23 @@ class ObservationsPage extends React.Component {
     if (!isEqual(this.props.router.query, prevProps.router.query)) {
       this.props.getObservationsUrl(this.props.router);
     }
+
+    // when the data is loaded fitBounds to selected observations
+    if (!isEqual(this.props.observations.data, prevProps.observations.data)) {
+      const obsLayer = this.props.getObservationsLayers.find((l) => l.id === 'observations');
+      if (obsLayer) {
+        const bbox = getBBox(obsLayer.source.data);
+        this.setState({
+          bounds: {
+            bbox,
+            options: {
+              padding: 50,
+              maxZoom: 6
+            },
+          }
+        });
+      }
+    }
   }
 
   getPageSize() {
@@ -418,6 +437,8 @@ class ObservationsPage extends React.Component {
               // viewport
               viewport={observations.map}
               onViewportChange={this.onViewportChange}
+              // Bounds
+              bounds={this.state.bounds}
               // Interaction
               interactiveLayerIds={interactiveLayerIds}
               onClick={this.onClick}