Base combined report

2 files changed, 12 insertions, 8 deletions

diff --git a/modern/src/map/MapCamera.js b/modern/src/map/MapCamera.js
index 46936513..afb52f89 100644
--- a/modern/src/map/MapCamera.js
+++ b/modern/src/map/MapCamera.js
@@ -3,11 +3,13 @@ import maplibregl from 'maplibre-gl';
 import { map } from './core/MapView';
 
 const MapCamera = ({
-  latitude, longitude, positions,
+  latitude, longitude, positions, coordinates,
 }) => {
   useEffect(() => {
-    if (positions) {
-      const coordinates = positions.map((item) => [item.longitude, item.latitude]);
+    if (coordinates || positions) {
+      if (!coordinates) {
+        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[0]));
         const canvas = map.getCanvas();
@@ -22,7 +24,7 @@ const MapCamera = ({
         zoom: Math.max(map.getZoom(), 10),
       });
     }
-  }, [latitude, longitude, positions]);
+  }, [latitude, longitude, positions, coordinates]);
 
   return null;
 };
diff --git a/modern/src/map/MapRoutePath.js b/modern/src/map/MapRoutePath.js
index 0eb48bdc..ffd3ce0c 100644
--- a/modern/src/map/MapRoutePath.js
+++ b/modern/src/map/MapRoutePath.js
@@ -3,13 +3,13 @@ import { useId, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { map } from './core/MapView';
 
-const MapRoutePath = ({ positions }) => {
+const MapRoutePath = ({ positions, coordinates }) => {
   const id = useId();
 
   const theme = useTheme();
 
   const reportColor = useSelector((state) => {
-    const position = positions.find(() => true);
+    const position = positions?.find(() => true);
     if (position) {
       const attributes = state.devices.items[position.deviceId]?.attributes;
       if (attributes) {
@@ -58,7 +58,9 @@ const MapRoutePath = ({ positions }) => {
   }, []);
 
   useEffect(() => {
-    const coordinates = positions.map((item) => [item.longitude, item.latitude]);
+    if (!coordinates) {
+      coordinates = positions.map((item) => [item.longitude, item.latitude]);
+    }
     map.getSource(id).setData({
       type: 'Feature',
       geometry: {
@@ -69,7 +71,7 @@ const MapRoutePath = ({ positions }) => {
         color: reportColor,
       },
     });
-  }, [theme, positions, reportColor]);
+  }, [theme, positions, coordinates, reportColor]);
 
   return null;
 };