13 files changed, 33 insertions, 15 deletions
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/MapView.js
index 1e7fa76b..ba5a67d6 100644
--- a/modern/src/map/core/Map.js
+++ b/modern/src/map/core/MapView.js
@@ -75,7 +75,7 @@ const switcher = new SwitcherControl(
 
 map.addControl(switcher);
 
-const Map = ({ children }) => {
+const MapView = ({ children }) => {
   const containerEl = useRef(null);
   const t = useTranslation();
 
@@ -131,4 +131,4 @@ const Map = ({ children }) => {
   );
 };
 
-export default Map;
+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';