From 47fdc633966a8f2baefb5424042de6be2ecd1ab6 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Sat, 28 May 2022 07:37:24 -0700
Subject: Add map to stops report

---
 modern/src/main/MainPage.js              |   8 +-
 modern/src/map/MapCamera.js              |  18 +++++
 modern/src/map/MapCurrentLocation.js     |   2 +-
 modern/src/map/MapGeofenceEdit.js        |   2 +-
 modern/src/map/MapPadding.js             |   2 +-
 modern/src/map/MapPositions.js           |   6 +-
 modern/src/map/MapRoutePath.js           |   2 +-
 modern/src/map/core/Map.js               | 134 -------------------------------
 modern/src/map/core/MapView.js           | 134 +++++++++++++++++++++++++++++++
 modern/src/map/main/MapAccuracy.js       |   2 +-
 modern/src/map/main/MapDefaultCamera.js  |   2 +-
 modern/src/map/main/MapGeofence.js       |   2 +-
 modern/src/map/main/MapLiveRoutes.js     |   2 +-
 modern/src/map/main/MapSelectedDevice.js |   2 +-
 modern/src/map/main/PoiMap.js            |   2 +-
 modern/src/other/EventPage.js            |   6 +-
 modern/src/other/GeofencesPage.js        |   6 +-
 modern/src/other/ReplayPage.js           |   6 +-
 modern/src/reports/RouteReportPage.js    |   6 +-
 modern/src/reports/StopReportPage.js     |  80 +++++++++++++-----
 20 files changed, 239 insertions(+), 185 deletions(-)
 create mode 100644 modern/src/map/MapCamera.js
 delete mode 100644 modern/src/map/core/Map.js
 create mode 100644 modern/src/map/core/MapView.js

(limited to 'modern/src')

diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index b3b23aab..f9341eb6 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -15,7 +15,7 @@ import ListIcon from '@mui/icons-material/ViewList';
 
 import { useDispatch, useSelector } from 'react-redux';
 import DevicesList from './DevicesList';
-import Map from '../map/core/Map';
+import MapView from '../map/core/MapView';
 import MapSelectedDevice from '../map/main/MapSelectedDevice';
 import MapAccuracy from '../map/main/MapAccuracy';
 import MapGeofence from '../map/main/MapGeofence';
@@ -149,15 +149,15 @@ const MainPage = () => {
 
   return (
     <div className={classes.root}>
-      <Map>
+      <MapView>
         <MapGeofence />
         <MapAccuracy />
         {mapLiveRoutes && <MapLiveRoutes />}
-        <MapPositions positions={positions} onClick={onClick} />
+        <MapPositions positions={positions} onClick={onClick} showStatus />
         <MapDefaultCamera />
         <MapSelectedDevice />
         <PoiMap />
-      </Map>
+      </MapView>
       <MapCurrentLocation />
       {desktop && <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />}
       <Button
diff --git a/modern/src/map/MapCamera.js b/modern/src/map/MapCamera.js
new file mode 100644
index 00000000..7ebf24fb
--- /dev/null
+++ b/modern/src/map/MapCamera.js
@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+import { map } from './core/MapView';
+
+const MapCamera = ({
+  latitude, longitude,
+}) => {
+  useEffect(() => {
+    map.jumpTo({
+      center: [longitude, latitude],
+      zoom: Math.max(map.getZoom(), 10),
+    });
+  }, [latitude, longitude]);
+
+  return null;
+};
+
+export default MapCamera;
diff --git a/modern/src/map/MapCurrentLocation.js b/modern/src/map/MapCurrentLocation.js
index 691c6be3..66fc46ec 100644
--- a/modern/src/map/MapCurrentLocation.js
+++ b/modern/src/map/MapCurrentLocation.js
@@ -1,6 +1,6 @@
 import maplibregl from 'maplibre-gl';
 import { useEffect } from 'react';
-import { map } from './core/Map';
+import { map } from './core/MapView';
 
 const MapCurrentLocation = () => {
   useEffect(() => {
diff --git a/modern/src/map/MapGeofenceEdit.js b/modern/src/map/MapGeofenceEdit.js
index 0b5062d8..42e51af7 100644
--- a/modern/src/map/MapGeofenceEdit.js
+++ b/modern/src/map/MapGeofenceEdit.js
@@ -6,7 +6,7 @@ import { useEffect } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
-import { map } from './core/Map';
+import { map } from './core/MapView';
 import { geofenceToFeature, geometryToArea } from './core/mapUtil';
 import { errorsActions, geofencesActions } from '../store';
 import { useCatchCallback } from '../reactHelper';
diff --git a/modern/src/map/MapPadding.js b/modern/src/map/MapPadding.js
index 1a4643a9..b1927a1f 100644
--- a/modern/src/map/MapPadding.js
+++ b/modern/src/map/MapPadding.js
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { map } from './core/Map';
+import { map } from './core/MapView';
 
 const MapPadding = ({
   top, right, bottom, left,
diff --git a/modern/src/map/MapPositions.js b/modern/src/map/MapPositions.js
index 170a6b11..4b53255a 100644
--- a/modern/src/map/MapPositions.js
+++ b/modern/src/map/MapPositions.js
@@ -1,11 +1,11 @@
 import { useCallback, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
-import { map } from './core/Map';
+import { map } from './core/MapView';
 import { getStatusColor } from '../common/util/formatter';
 import usePersistedState from '../common/util/usePersistedState';
 
-const MapPositions = ({ positions, onClick }) => {
+const MapPositions = ({ positions, onClick, showStatus }) => {
   const id = 'positions';
   const clusters = `${id}-clusters`;
 
@@ -20,7 +20,7 @@ const MapPositions = ({ positions, onClick }) => {
       deviceId: position.deviceId,
       name: device.name,
       category: device.category || 'default',
-      color: getStatusColor(device.status),
+      color: showStatus ? getStatusColor(device.status) : 'neutral',
     };
   };
 
diff --git a/modern/src/map/MapRoutePath.js b/modern/src/map/MapRoutePath.js
index d7cb484d..9703bf24 100644
--- a/modern/src/map/MapRoutePath.js
+++ b/modern/src/map/MapRoutePath.js
@@ -1,7 +1,7 @@
 import maplibregl from 'maplibre-gl';
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import { map } from './core/Map';
+import { map } from './core/MapView';
 
 const MapRoutePath = ({ positions }) => {
   const id = 'replay';
diff --git a/modern/src/map/core/Map.js b/modern/src/map/core/Map.js
deleted file mode 100644
index 1e7fa76b..00000000
--- a/modern/src/map/core/Map.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import 'maplibre-gl/dist/maplibre-gl.css';
-import '../switcher/switcher.css';
-import maplibregl from 'maplibre-gl';
-import React, {
-  useRef, useLayoutEffect, useEffect, useState,
-} from 'react';
-import { useSelector } from 'react-redux';
-import { SwitcherControl } from '../switcher/switcher';
-import {
-  styleCarto, styleCustom, styleLocationIq, styleMapbox, styleMapTiler, styleOsm,
-} from './mapStyles';
-import { useAttributePreference } from '../../common/util/preferences';
-import { useTranslation } from '../../common/components/LocalizationProvider';
-import usePersistedState, { savePersistedState } from '../../common/util/usePersistedState';
-import { mapImages } from './preloadImages';
-
-const element = document.createElement('div');
-element.style.width = '100%';
-element.style.height = '100%';
-element.style.boxSizing = 'initial';
-
-export const map = new maplibregl.Map({
-  container: element,
-});
-
-let ready = false;
-const readyListeners = new Set();
-
-const addReadyListener = (listener) => {
-  readyListeners.add(listener);
-  listener(ready);
-};
-
-const removeReadyListener = (listener) => {
-  readyListeners.delete(listener);
-};
-
-const updateReadyValue = (value) => {
-  ready = value;
-  readyListeners.forEach((listener) => listener(value));
-};
-
-const initMap = async () => {
-  if (ready) return;
-  if (!map.hasImage('background')) {
-    Object.entries(mapImages).forEach(([key, value]) => {
-      map.addImage(key, value, {
-        pixelRatio: window.devicePixelRatio,
-      });
-    });
-  }
-  updateReadyValue(true);
-};
-
-map.addControl(new maplibregl.NavigationControl({
-  showCompass: false,
-}));
-
-const switcher = new SwitcherControl(
-  () => updateReadyValue(false),
-  (layerId) => savePersistedState('mapLayer', layerId),
-  () => {
-    map.once('styledata', () => {
-      const waiting = () => {
-        if (!map.loaded()) {
-          setTimeout(waiting, 33);
-        } else {
-          initMap();
-        }
-      };
-      waiting();
-    });
-  },
-);
-
-map.addControl(switcher);
-
-const Map = ({ children }) => {
-  const containerEl = useRef(null);
-  const t = useTranslation();
-
-  const [mapReady, setMapReady] = useState(false);
-
-  const [defaultMapLayer] = usePersistedState('mapLayer', 'locationIqStreets');
-  const mapboxAccessToken = useAttributePreference('mapboxAccessToken');
-  const mapTilerKey = useAttributePreference('mapTilerKey');
-  const locationIqKey = useAttributePreference('locationIqKey', 'pk.0f147952a41c555a5b70614039fd148b');
-  const customMapUrl = useSelector((state) => state.session.server?.mapUrl);
-
-  useEffect(() => {
-    maplibregl.accessToken = mapboxAccessToken;
-  }, [mapboxAccessToken]);
-
-  useEffect(() => {
-    switcher.updateStyles([
-      { id: 'locationIqStreets', title: t('mapLocationIqStreets'), uri: styleLocationIq('streets', locationIqKey) },
-      { id: 'locationIqEarth', title: t('mapLocationIqEarth'), uri: styleLocationIq('earth', locationIqKey) },
-      { id: 'locationIqHybrid', title: t('mapLocationIqHybrid'), uri: styleLocationIq('hybrid', locationIqKey) },
-      { id: 'osm', title: t('mapOsm'), uri: styleOsm() },
-      { id: 'carto', title: t('mapCarto'), uri: styleCarto() },
-      { id: 'mapboxStreets', title: t('mapMapboxStreets'), uri: styleMapbox('streets-v11') },
-      { id: 'mapboxOutdoors', title: t('mapMapboxOutdoors'), uri: styleMapbox('outdoors-v11') },
-      { id: 'mapboxSatellite', title: t('mapMapboxSatellite'), uri: styleMapbox('satellite-v9') },
-      { id: 'mapTilerBasic', title: t('mapMapTilerBasic'), uri: styleMapTiler('basic', mapTilerKey) },
-      { id: 'mapTilerHybrid', title: t('mapMapTilerHybrid'), uri: styleMapTiler('hybrid', mapTilerKey) },
-      { id: 'custom', title: t('mapCustom'), uri: styleCustom(customMapUrl) },
-    ], defaultMapLayer);
-  }, [t, locationIqKey, mapTilerKey, customMapUrl, defaultMapLayer]);
-
-  useEffect(() => {
-    const listener = (ready) => setMapReady(ready);
-    addReadyListener(listener);
-    return () => {
-      removeReadyListener(listener);
-    };
-  }, []);
-
-  useLayoutEffect(() => {
-    const currentEl = containerEl.current;
-    currentEl.appendChild(element);
-    map.resize();
-    return () => {
-      currentEl.removeChild(element);
-    };
-  }, [containerEl]);
-
-  return (
-    <div style={{ width: '100%', height: '100%' }} ref={containerEl}>
-      {mapReady && children}
-    </div>
-  );
-};
-
-export default Map;
diff --git a/modern/src/map/core/MapView.js b/modern/src/map/core/MapView.js
new file mode 100644
index 00000000..ba5a67d6
--- /dev/null
+++ b/modern/src/map/core/MapView.js
@@ -0,0 +1,134 @@
+import 'maplibre-gl/dist/maplibre-gl.css';
+import '../switcher/switcher.css';
+import maplibregl from 'maplibre-gl';
+import React, {
+  useRef, useLayoutEffect, useEffect, useState,
+} from 'react';
+import { useSelector } from 'react-redux';
+import { SwitcherControl } from '../switcher/switcher';
+import {
+  styleCarto, styleCustom, styleLocationIq, styleMapbox, styleMapTiler, styleOsm,
+} from './mapStyles';
+import { useAttributePreference } from '../../common/util/preferences';
+import { useTranslation } from '../../common/components/LocalizationProvider';
+import usePersistedState, { savePersistedState } from '../../common/util/usePersistedState';
+import { mapImages } from './preloadImages';
+
+const element = document.createElement('div');
+element.style.width = '100%';
+element.style.height = '100%';
+element.style.boxSizing = 'initial';
+
+export const map = new maplibregl.Map({
+  container: element,
+});
+
+let ready = false;
+const readyListeners = new Set();
+
+const addReadyListener = (listener) => {
+  readyListeners.add(listener);
+  listener(ready);
+};
+
+const removeReadyListener = (listener) => {
+  readyListeners.delete(listener);
+};
+
+const updateReadyValue = (value) => {
+  ready = value;
+  readyListeners.forEach((listener) => listener(value));
+};
+
+const initMap = async () => {
+  if (ready) return;
+  if (!map.hasImage('background')) {
+    Object.entries(mapImages).forEach(([key, value]) => {
+      map.addImage(key, value, {
+        pixelRatio: window.devicePixelRatio,
+      });
+    });
+  }
+  updateReadyValue(true);
+};
+
+map.addControl(new maplibregl.NavigationControl({
+  showCompass: false,
+}));
+
+const switcher = new SwitcherControl(
+  () => updateReadyValue(false),
+  (layerId) => savePersistedState('mapLayer', layerId),
+  () => {
+    map.once('styledata', () => {
+      const waiting = () => {
+        if (!map.loaded()) {
+          setTimeout(waiting, 33);
+        } else {
+          initMap();
+        }
+      };
+      waiting();
+    });
+  },
+);
+
+map.addControl(switcher);
+
+const MapView = ({ children }) => {
+  const containerEl = useRef(null);
+  const t = useTranslation();
+
+  const [mapReady, setMapReady] = useState(false);
+
+  const [defaultMapLayer] = usePersistedState('mapLayer', 'locationIqStreets');
+  const mapboxAccessToken = useAttributePreference('mapboxAccessToken');
+  const mapTilerKey = useAttributePreference('mapTilerKey');
+  const locationIqKey = useAttributePreference('locationIqKey', 'pk.0f147952a41c555a5b70614039fd148b');
+  const customMapUrl = useSelector((state) => state.session.server?.mapUrl);
+
+  useEffect(() => {
+    maplibregl.accessToken = mapboxAccessToken;
+  }, [mapboxAccessToken]);
+
+  useEffect(() => {
+    switcher.updateStyles([
+      { id: 'locationIqStreets', title: t('mapLocationIqStreets'), uri: styleLocationIq('streets', locationIqKey) },
+      { id: 'locationIqEarth', title: t('mapLocationIqEarth'), uri: styleLocationIq('earth', locationIqKey) },
+      { id: 'locationIqHybrid', title: t('mapLocationIqHybrid'), uri: styleLocationIq('hybrid', locationIqKey) },
+      { id: 'osm', title: t('mapOsm'), uri: styleOsm() },
+      { id: 'carto', title: t('mapCarto'), uri: styleCarto() },
+      { id: 'mapboxStreets', title: t('mapMapboxStreets'), uri: styleMapbox('streets-v11') },
+      { id: 'mapboxOutdoors', title: t('mapMapboxOutdoors'), uri: styleMapbox('outdoors-v11') },
+      { id: 'mapboxSatellite', title: t('mapMapboxSatellite'), uri: styleMapbox('satellite-v9') },
+      { id: 'mapTilerBasic', title: t('mapMapTilerBasic'), uri: styleMapTiler('basic', mapTilerKey) },
+      { id: 'mapTilerHybrid', title: t('mapMapTilerHybrid'), uri: styleMapTiler('hybrid', mapTilerKey) },
+      { id: 'custom', title: t('mapCustom'), uri: styleCustom(customMapUrl) },
+    ], defaultMapLayer);
+  }, [t, locationIqKey, mapTilerKey, customMapUrl, defaultMapLayer]);
+
+  useEffect(() => {
+    const listener = (ready) => setMapReady(ready);
+    addReadyListener(listener);
+    return () => {
+      removeReadyListener(listener);
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    const currentEl = containerEl.current;
+    currentEl.appendChild(element);
+    map.resize();
+    return () => {
+      currentEl.removeChild(element);
+    };
+  }, [containerEl]);
+
+  return (
+    <div style={{ width: '100%', height: '100%' }} ref={containerEl}>
+      {mapReady && children}
+    </div>
+  );
+};
+
+export default MapView;
diff --git a/modern/src/map/main/MapAccuracy.js b/modern/src/map/main/MapAccuracy.js
index 11ea64ed..089389bd 100644
--- a/modern/src/map/main/MapAccuracy.js
+++ b/modern/src/map/main/MapAccuracy.js
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import circle from '@turf/circle';
 
-import { map } from '../core/Map';
+import { map } from '../core/MapView';
 
 const MapAccuracy = () => {
   const id = 'accuracy';
diff --git a/modern/src/map/main/MapDefaultCamera.js b/modern/src/map/main/MapDefaultCamera.js
index 24296c2f..6ccf660e 100644
--- a/modern/src/map/main/MapDefaultCamera.js
+++ b/modern/src/map/main/MapDefaultCamera.js
@@ -2,7 +2,7 @@ import maplibregl from 'maplibre-gl';
 import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { usePreference } from '../../common/util/preferences';
-import { map } from '../core/Map';
+import { map } from '../core/MapView';
 
 const MapDefaultCamera = () => {
   const selectedDeviceId = useSelector((state) => state.devices.selectedId);
diff --git a/modern/src/map/main/MapGeofence.js b/modern/src/map/main/MapGeofence.js
index ee1bc884..71d5cb6e 100644
--- a/modern/src/map/main/MapGeofence.js
+++ b/modern/src/map/main/MapGeofence.js
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
-import { map } from '../core/Map';
+import { map } from '../core/MapView';
 import { geofenceToFeature } from '../core/mapUtil';
 
 const MapGeofence = () => {
diff --git a/modern/src/map/main/MapLiveRoutes.js b/modern/src/map/main/MapLiveRoutes.js
index 139f7d65..09319cff 100644
--- a/modern/src/map/main/MapLiveRoutes.js
+++ b/modern/src/map/main/MapLiveRoutes.js
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { useSelector } from 'react-redux';
-import { map } from '../core/Map';
+import { map } from '../core/MapView';
 import { usePrevious } from '../../reactHelper';
 
 const MapLiveRoutes = () => {
diff --git a/modern/src/map/main/MapSelectedDevice.js b/modern/src/map/main/MapSelectedDevice.js
index ba3bc784..9d97dd75 100644
--- a/modern/src/map/main/MapSelectedDevice.js
+++ b/modern/src/map/main/MapSelectedDevice.js
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 
 import { useSelector } from 'react-redux';
 import dimensions from '../../common/theme/dimensions';
-import { map } from '../core/Map';
+import { map } from '../core/MapView';
 import { usePrevious } from '../../reactHelper';
 import usePersistedState from '../../common/util/usePersistedState';
 
diff --git a/modern/src/map/main/PoiMap.js b/modern/src/map/main/PoiMap.js
index 5874f356..3ca344c5 100644
--- a/modern/src/map/main/PoiMap.js
+++ b/modern/src/map/main/PoiMap.js
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { kml } from '@tmcw/togeojson';
 
-import { map } from '../core/Map';
+import { map } from '../core/MapView';
 import { useEffectAsync } from '../../reactHelper';
 import { usePreference } from '../../common/util/preferences';
 
diff --git a/modern/src/other/EventPage.js b/modern/src/other/EventPage.js
index cbe4a0fb..f84e1e5e 100644
--- a/modern/src/other/EventPage.js
+++ b/modern/src/other/EventPage.js
@@ -8,7 +8,7 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useEffectAsync } from '../reactHelper';
 import { useTranslation } from '../common/components/LocalizationProvider';
-import Map from '../map/core/Map';
+import MapView from '../map/core/MapView';
 import MapPositions from '../map/MapPositions';
 
 const useStyles = makeStyles(() => ({
@@ -68,9 +68,9 @@ const EventPage = () => {
         </Toolbar>
       </AppBar>
       <div className={classes.mapContainer}>
-        <Map>
+        <MapView>
           {position && <MapPositions positions={[position]} />}
-        </Map>
+        </MapView>
       </div>
     </div>
   );
diff --git a/modern/src/other/GeofencesPage.js b/modern/src/other/GeofencesPage.js
index 6706ec98..fce15a39 100644
--- a/modern/src/other/GeofencesPage.js
+++ b/modern/src/other/GeofencesPage.js
@@ -7,7 +7,7 @@ import { useTheme } from '@mui/material/styles';
 import Drawer from '@mui/material/Drawer';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { useNavigate } from 'react-router-dom';
-import Map from '../map/core/Map';
+import MapView from '../map/core/MapView';
 import MapCurrentLocation from '../map/MapCurrentLocation';
 import MapGeofenceEdit from '../map/MapGeofenceEdit';
 import GeofencesList from './GeofencesList';
@@ -77,10 +77,10 @@ const GeofencesPage = () => {
           <GeofencesList />
         </Drawer>
         <div className={classes.mapContainer}>
-          <Map>
+          <MapView>
             <MapCurrentLocation />
             <MapGeofenceEdit />
-          </Map>
+          </MapView>
         </div>
       </div>
     </div>
diff --git a/modern/src/other/ReplayPage.js b/modern/src/other/ReplayPage.js
index fcf01fc7..4893dda9 100644
--- a/modern/src/other/ReplayPage.js
+++ b/modern/src/other/ReplayPage.js
@@ -13,7 +13,7 @@ import FastForwardIcon from '@mui/icons-material/FastForward';
 import FastRewindIcon from '@mui/icons-material/FastRewind';
 import { useNavigate } from 'react-router-dom';
 import { useSelector } from 'react-redux';
-import Map from '../map/core/Map';
+import MapView from '../map/core/MapView';
 import MapRoutePath from '../map/MapRoutePath';
 import MapPositions from '../map/MapPositions';
 import { formatTime } from '../common/util/formatter';
@@ -143,12 +143,12 @@ const ReplayPage = () => {
 
   return (
     <div className={classes.root}>
-      <Map>
+      <MapView>
         <MapRoutePath positions={positions} />
         {index < positions.length && (
           <MapPositions positions={[positions[index]]} onClick={onClick} />
         )}
-      </Map>
+      </MapView>
       <div className={classes.sidebar}>
         <Paper elevation={3} square>
           <Toolbar>
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index b29fb269..33bc9350 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -13,7 +13,7 @@ import PositionValue from '../common/components/PositionValue';
 import ColumnSelect from './components/ColumnSelect';
 import usePositionAttributes from '../common/attributes/usePositionAttributes';
 import { useCatch } from '../reactHelper';
-import Map from '../map/core/Map';
+import MapView from '../map/core/MapView';
 import MapRoutePath from '../map/MapRoutePath';
 import MapPositions from '../map/MapPositions';
 import useReportStyles from './common/useReportStyles';
@@ -52,10 +52,10 @@ const RouteReportPage = () => {
       <div className={classes.container}>
         {selectedItem && (
           <div className={classes.containerMap}>
-            <Map>
+            <MapView>
               <MapRoutePath positions={items} />
               <MapPositions positions={[selectedItem]} />
-            </Map>
+            </MapView>
           </div>
         )}
         <div className={classes.containerMain}>
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index d2823b06..d44e2046 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -1,7 +1,10 @@
 import React, { useState } from 'react';
 import {
+  IconButton,
   Table, TableBody, TableCell, TableHead, TableRow,
 } from '@mui/material';
+import GpsFixedIcon from '@mui/icons-material/GpsFixed';
+import LocationSearchingIcon from '@mui/icons-material/LocationSearching';
 import {
   formatDistance, formatHours, formatDate, formatVolume,
 } from '../common/util/formatter';
@@ -14,6 +17,9 @@ import ColumnSelect from './components/ColumnSelect';
 import usePersistedState from '../common/util/usePersistedState';
 import { useCatch } from '../reactHelper';
 import useReportStyles from './common/useReportStyles';
+import MapPositions from '../map/MapPositions';
+import MapView from '../map/core/MapView';
+import MapCamera from '../map/MapCamera';
 
 const columnsArray = [
   ['startTime', 'reportStartTime'],
@@ -35,6 +41,7 @@ const StopReportPage = () => {
 
   const [columns, setColumns] = usePersistedState('stopColumns', ['startTime', 'endTime', 'startOdometer', 'address']);
   const [items, setItems] = useState([]);
+  const [selectedItem, setSelectedItem] = useState(null);
 
   const handleSubmit = useCatch(async (deviceId, from, to, mail, headers) => {
     const query = new URLSearchParams({
@@ -75,29 +82,58 @@ const StopReportPage = () => {
 
   return (
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportStops']}>
-      <div className={classes.header}>
-        <ReportFilter handleSubmit={handleSubmit}>
-          <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
-        </ReportFilter>
-      </div>
-      <Table>
-        <TableHead>
-          <TableRow>
-            {columns.map((key) => (<TableCell key={key}>{t(columnsMap.get(key))}</TableCell>))}
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {items.map((item) => (
-            <TableRow key={item.positionId}>
-              {columns.map((key) => (
-                <TableCell key={key}>
-                  {formatValue(item, key)}
-                </TableCell>
+      <div className={classes.container}>
+        {selectedItem && (
+          <div className={classes.containerMap}>
+            <MapView>
+              <MapPositions positions={[{
+                deviceId: selectedItem.deviceId,
+                latitude: selectedItem.latitude,
+                longitude: selectedItem.longitude,
+              }]}
+              />
+            </MapView>
+            <MapCamera latitude={selectedItem.latitude} longitude={selectedItem.longitude} />
+          </div>
+        )}
+        <div className={classes.containerMain}>
+          <div className={classes.header}>
+            <ReportFilter handleSubmit={handleSubmit}>
+              <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
+            </ReportFilter>
+          </div>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell className={classes.columnAction} />
+                {columns.map((key) => (<TableCell key={key}>{t(columnsMap.get(key))}</TableCell>))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {items.map((item) => (
+                <TableRow key={item.positionId}>
+                  <TableCell className={classes.columnAction} padding="none">
+                    {selectedItem === item ? (
+                      <IconButton size="small" onClick={() => setSelectedItem(null)}>
+                        <GpsFixedIcon fontSize="small" />
+                      </IconButton>
+                    ) : (
+                      <IconButton size="small" onClick={() => setSelectedItem(item)}>
+                        <LocationSearchingIcon fontSize="small" />
+                      </IconButton>
+                    )}
+                  </TableCell>
+                  {columns.map((key) => (
+                    <TableCell key={key}>
+                      {formatValue(item, key)}
+                    </TableCell>
+                  ))}
+                </TableRow>
               ))}
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+            </TableBody>
+          </Table>
+        </div>
+      </div>
     </PageLayout>
   );
 };
-- 
cgit v1.2.3