Refactor map route plugin

5 files changed, 25 insertions, 16 deletions

diff --git a/modern/src/map/MapCamera.js b/modern/src/map/MapCamera.js
index 7ebf24fb..63f070f8 100644
--- a/modern/src/map/MapCamera.js
+++ b/modern/src/map/MapCamera.js
@@ -1,16 +1,28 @@
 import { useEffect } from 'react';
-
+import maplibregl from 'maplibre-gl';
 import { map } from './core/MapView';
 
 const MapCamera = ({
-  latitude, longitude,
+  latitude, longitude, positions,
 }) => {
   useEffect(() => {
-    map.jumpTo({
-      center: [longitude, latitude],
-      zoom: Math.max(map.getZoom(), 10),
-    });
-  }, [latitude, longitude]);
+    if (positions) {
+      const coordinates = positions.map((item) => [item.longitude, item.latitude]);
+      if (coordinates.length) {
+        const bounds = coordinates.reduce((bounds, item) => bounds.extend(item), new maplibregl.LngLatBounds(coordinates[0], coordinates[1]));
+        const canvas = map.getCanvas();
+        map.fitBounds(bounds, {
+          padding: Math.min(canvas.width, canvas.height) * 0.1,
+          duration: 0,
+        });
+      }
+    } else {
+      map.jumpTo({
+        center: [longitude, latitude],
+        zoom: Math.max(map.getZoom(), 10),
+      });
+    }
+  }, [latitude, longitude, positions]);
 
   return null;
 };
diff --git a/modern/src/map/MapRoutePath.js b/modern/src/map/MapRoutePath.js
index 7971e3d3..22f8d335 100644
--- a/modern/src/map/MapRoutePath.js
+++ b/modern/src/map/MapRoutePath.js
@@ -1,5 +1,4 @@
 import { useTheme } from '@mui/styles';
-import maplibregl from 'maplibre-gl';
 import { useId, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { map } from './core/MapView';
@@ -70,14 +69,6 @@ const MapRoutePath = ({ positions }) => {
         color: reportColor,
       },
     });
-    if (coordinates.length) {
-      const bounds = coordinates.reduce((bounds, item) => bounds.extend(item), new maplibregl.LngLatBounds(coordinates[0], coordinates[1]));
-      const canvas = map.getCanvas();
-      map.fitBounds(bounds, {
-        padding: Math.min(canvas.width, canvas.height) * 0.1,
-        duration: 0,
-      });
-    }
   }, [positions, reportColor]);
 
   return null;
diff --git a/modern/src/other/ReplayPage.js b/modern/src/other/ReplayPage.js
index e49835d6..556f5a87 100644
--- a/modern/src/other/ReplayPage.js
+++ b/modern/src/other/ReplayPage.js
@@ -21,6 +21,7 @@ import { formatTime } from '../common/util/formatter';
 import ReportFilter from '../reports/components/ReportFilter';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import { useCatch } from '../reactHelper';
+import MapCamera from '../map/MapCamera';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -155,6 +156,7 @@ const ReplayPage = () => {
           <MapPositions positions={[positions[index]]} onClick={onClick} />
         )}
       </MapView>
+      <MapCamera positions={positions} />
       <div className={classes.sidebar}>
         <Paper elevation={3} square>
           <Toolbar>
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index c901cf66..fb05f1b1 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -18,6 +18,7 @@ import MapRoutePath from '../map/MapRoutePath';
 import MapPositions from '../map/MapPositions';
 import useReportStyles from './common/useReportStyles';
 import TableShimmer from '../common/components/TableShimmer';
+import MapCamera from '../map/MapCamera';
 
 const RouteReportPage = () => {
   const classes = useReportStyles();
@@ -65,6 +66,7 @@ const RouteReportPage = () => {
               <MapRoutePath positions={items} />
               <MapPositions positions={[selectedItem]} />
             </MapView>
+            <MapCamera positions={items} />
           </div>
         )}
         <div className={classes.containerMain}>
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 23455404..8aed01be 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -21,6 +21,7 @@ import MapRoutePath from '../map/MapRoutePath';
 import AddressValue from '../common/components/AddressValue';
 import TableShimmer from '../common/components/TableShimmer';
 import MapMarkers from '../map/MapMarkers';
+import MapCamera from '../map/MapCamera';
 
 const columnsArray = [
   ['startTime', 'reportStartTime'],
@@ -151,6 +152,7 @@ const TripReportPage = () => {
                 </>
               )}
             </MapView>
+            <MapCamera positions={route} />
           </div>
         )}
         <div className={classes.containerMain}>