From 67d7ce8e0f428c521d3d032e8145108c9b2a5f45 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Sun, 22 May 2022 09:57:51 -0700
Subject: Rename map plugins

---
 modern/src/main/MainPage.js                |  28 +++---
 modern/src/map/CurrentLocationMap.js       |  21 -----
 modern/src/map/GeofenceEditMap.js          | 141 ----------------------------
 modern/src/map/MapCurrentLocation.js       |  21 +++++
 modern/src/map/MapGeofenceEdit.js          | 141 ++++++++++++++++++++++++++++
 modern/src/map/MapPositions.js             | 142 +++++++++++++++++++++++++++++
 modern/src/map/MapReplayPath.js            |  65 +++++++++++++
 modern/src/map/PositionsMap.js             | 142 -----------------------------
 modern/src/map/ReplayPathMap.js            |  65 -------------
 modern/src/map/main/AccuracyMap.js         |  55 -----------
 modern/src/map/main/CurrentPositionsMap.js |  18 ----
 modern/src/map/main/DefaultCameraMap.js    |  52 -----------
 modern/src/map/main/GeofenceMap.js         |  84 -----------------
 modern/src/map/main/LiveRoutesMap.js       |  80 ----------------
 modern/src/map/main/MapAccuracy.js         |  55 +++++++++++
 modern/src/map/main/MapCurrentPositions.js |  18 ++++
 modern/src/map/main/MapDefaultCamera.js    |  52 +++++++++++
 modern/src/map/main/MapGeofence.js         |  84 +++++++++++++++++
 modern/src/map/main/MapLiveRoutes.js       |  80 ++++++++++++++++
 modern/src/map/main/MapSelectedDevice.js   |  30 ++++++
 modern/src/map/main/SelectedDeviceMap.js   |  30 ------
 modern/src/other/EventPage.js              |   4 +-
 modern/src/other/GeofencesPage.js          |   8 +-
 modern/src/other/ReplayPage.js             |   8 +-
 24 files changed, 712 insertions(+), 712 deletions(-)
 delete mode 100644 modern/src/map/CurrentLocationMap.js
 delete mode 100644 modern/src/map/GeofenceEditMap.js
 create mode 100644 modern/src/map/MapCurrentLocation.js
 create mode 100644 modern/src/map/MapGeofenceEdit.js
 create mode 100644 modern/src/map/MapPositions.js
 create mode 100644 modern/src/map/MapReplayPath.js
 delete mode 100644 modern/src/map/PositionsMap.js
 delete mode 100644 modern/src/map/ReplayPathMap.js
 delete mode 100644 modern/src/map/main/AccuracyMap.js
 delete mode 100644 modern/src/map/main/CurrentPositionsMap.js
 delete mode 100644 modern/src/map/main/DefaultCameraMap.js
 delete mode 100644 modern/src/map/main/GeofenceMap.js
 delete mode 100644 modern/src/map/main/LiveRoutesMap.js
 create mode 100644 modern/src/map/main/MapAccuracy.js
 create mode 100644 modern/src/map/main/MapCurrentPositions.js
 create mode 100644 modern/src/map/main/MapDefaultCamera.js
 create mode 100644 modern/src/map/main/MapGeofence.js
 create mode 100644 modern/src/map/main/MapLiveRoutes.js
 create mode 100644 modern/src/map/main/MapSelectedDevice.js
 delete mode 100644 modern/src/map/main/SelectedDeviceMap.js

diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index c6879e9c..c6a0909b 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -14,20 +14,20 @@ import ListIcon from '@material-ui/icons/ViewList';
 import { useDispatch, useSelector } from 'react-redux';
 import DevicesList from './DevicesList';
 import Map from '../map/core/Map';
-import SelectedDeviceMap from '../map/main/SelectedDeviceMap';
-import AccuracyMap from '../map/main/AccuracyMap';
-import GeofenceMap from '../map/main/GeofenceMap';
-import CurrentPositionsMap from '../map/main/CurrentPositionsMap';
-import CurrentLocationMap from '../map/CurrentLocationMap';
+import MapSelectedDevice from '../map/main/MapSelectedDevice';
+import MapAccuracy from '../map/main/MapAccuracy';
+import MapGeofence from '../map/main/MapGeofence';
+import MapCurrentPositions from '../map/main/MapCurrentPositions';
+import MapCurrentLocation from '../map/MapCurrentLocation';
 import BottomMenu from '../common/components/BottomMenu';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import PoiMap from '../map/main/PoiMap';
 import MapPadding from '../map/MapPadding';
 import StatusCard from './StatusCard';
 import { devicesActions } from '../store';
-import DefaultCameraMap from '../map/main/DefaultCameraMap';
+import MapDefaultCamera from '../map/main/MapDefaultCamera';
 import usePersistedState from '../common/util/usePersistedState';
-import LiveRoutesMap from '../map/main/LiveRoutesMap';
+import MapLiveRoutes from '../map/main/MapLiveRoutes';
 import { useDeviceReadonly } from '../common/util/permissions';
 
 const useStyles = makeStyles((theme) => ({
@@ -140,15 +140,15 @@ const MainPage = () => {
   return (
     <div className={classes.root}>
       <Map>
-        <CurrentLocationMap />
-        <GeofenceMap />
-        <AccuracyMap />
-        {mapLiveRoutes && <LiveRoutesMap />}
-        <CurrentPositionsMap />
-        <DefaultCameraMap />
-        <SelectedDeviceMap />
+        <MapGeofence />
+        <MapAccuracy />
+        {mapLiveRoutes && <MapLiveRoutes />}
+        <MapCurrentPositions />
+        <MapDefaultCamera />
+        <MapSelectedDevice />
         <PoiMap />
       </Map>
+      <MapCurrentLocation />
       {!isTablet && <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />}
       <Button
         variant="contained"
diff --git a/modern/src/map/CurrentLocationMap.js b/modern/src/map/CurrentLocationMap.js
deleted file mode 100644
index 815cd42d..00000000
--- a/modern/src/map/CurrentLocationMap.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import maplibregl from 'maplibre-gl';
-import { useEffect } from 'react';
-import { map } from './core/Map';
-
-const CurrentLocationMap = () => {
-  useEffect(() => {
-    const control = new maplibregl.GeolocateControl({
-      positionOptions: {
-        enableHighAccuracy: true,
-        timeout: 5000,
-      },
-      trackUserLocation: true,
-    });
-    map.addControl(control);
-    return () => map.removeControl(control);
-  }, []);
-
-  return null;
-};
-
-export default CurrentLocationMap;
diff --git a/modern/src/map/GeofenceEditMap.js b/modern/src/map/GeofenceEditMap.js
deleted file mode 100644
index 0d7950a2..00000000
--- a/modern/src/map/GeofenceEditMap.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import 'mapbox-gl/dist/mapbox-gl.css';
-import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
-import MapboxDraw from '@mapbox/mapbox-gl-draw';
-import theme from '@mapbox/mapbox-gl-draw/src/lib/theme';
-import { useEffect } from 'react';
-
-import { useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
-import { map } from './core/Map';
-import { geofenceToFeature, geometryToArea } from './core/mapUtil';
-import { errorsActions, geofencesActions } from '../store';
-import { useCatchCallback } from '../reactHelper';
-
-const draw = new MapboxDraw({
-  displayControlsDefault: false,
-  controls: {
-    polygon: true,
-    trash: true,
-  },
-  userProperties: true,
-  styles: [...theme, {
-    id: 'gl-draw-title',
-    type: 'symbol',
-    filter: ['all'],
-    layout: {
-      'text-field': '{user_name}',
-      'text-font': ['Roboto Regular'],
-      'text-size': 12,
-    },
-    paint: {
-      'text-halo-color': 'white',
-      'text-halo-width': 1,
-    },
-  }],
-});
-
-const GeofenceEditMap = () => {
-  const dispatch = useDispatch();
-  const history = useHistory();
-
-  const geofences = useSelector((state) => state.geofences.items);
-
-  const refreshGeofences = useCatchCallback(async () => {
-    const response = await fetch('/api/geofences');
-    if (response.ok) {
-      dispatch(geofencesActions.refresh(await response.json()));
-    } else {
-      throw Error(await response.text());
-    }
-  }, [dispatch]);
-
-  useEffect(() => {
-    refreshGeofences();
-
-    map.addControl(draw, 'top-left');
-    return () => map.removeControl(draw);
-  }, [refreshGeofences]);
-
-  useEffect(() => {
-    const listener = async (event) => {
-      const feature = event.features[0];
-      const newItem = { name: '', area: geometryToArea(feature.geometry) };
-      draw.delete(feature.id);
-      try {
-        const response = await fetch('/api/geofences', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(newItem),
-        });
-        if (response.ok) {
-          const item = await response.json();
-          history.push(`/settings/geofence/${item.id}`);
-        } else {
-          throw Error(await response.text());
-        }
-      } catch (error) {
-        dispatch(errorsActions.push(error.message));
-      }
-    };
-
-    map.on('draw.create', listener);
-    return () => map.off('draw.create', listener);
-  }, [dispatch, history]);
-
-  useEffect(() => {
-    const listener = async (event) => {
-      const feature = event.features[0];
-      try {
-        const response = await fetch(`/api/geofences/${feature.id}`, { method: 'DELETE' });
-        if (response.ok) {
-          refreshGeofences();
-        } else {
-          throw Error(await response.text());
-        }
-      } catch (error) {
-        dispatch(errorsActions.push(error.message));
-      }
-    };
-
-    map.on('draw.delete', listener);
-    return () => map.off('draw.delete', listener);
-  }, [dispatch, refreshGeofences]);
-
-  useEffect(() => {
-    const listener = async (event) => {
-      const feature = event.features[0];
-      const item = Object.values(geofences).find((i) => i.id === feature.id);
-      if (item) {
-        const updatedItem = { ...item, area: geometryToArea(feature.geometry) };
-        try {
-          const response = await fetch(`/api/geofences/${feature.id}`, {
-            method: 'PUT',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(updatedItem),
-          });
-          if (response.ok) {
-            refreshGeofences();
-          } else {
-            throw Error(await response.text());
-          }
-        } catch (error) {
-          dispatch(errorsActions.push(error.message));
-        }
-      }
-    };
-
-    map.on('draw.update', listener);
-    return () => map.off('draw.update', listener);
-  }, [dispatch, geofences, refreshGeofences]);
-
-  useEffect(() => {
-    draw.deleteAll();
-    Object.values(geofences).forEach((geofence) => {
-      draw.add(geofenceToFeature(geofence));
-    });
-  }, [geofences]);
-
-  return null;
-};
-
-export default GeofenceEditMap;
diff --git a/modern/src/map/MapCurrentLocation.js b/modern/src/map/MapCurrentLocation.js
new file mode 100644
index 00000000..691c6be3
--- /dev/null
+++ b/modern/src/map/MapCurrentLocation.js
@@ -0,0 +1,21 @@
+import maplibregl from 'maplibre-gl';
+import { useEffect } from 'react';
+import { map } from './core/Map';
+
+const MapCurrentLocation = () => {
+  useEffect(() => {
+    const control = new maplibregl.GeolocateControl({
+      positionOptions: {
+        enableHighAccuracy: true,
+        timeout: 5000,
+      },
+      trackUserLocation: true,
+    });
+    map.addControl(control);
+    return () => map.removeControl(control);
+  }, []);
+
+  return null;
+};
+
+export default MapCurrentLocation;
diff --git a/modern/src/map/MapGeofenceEdit.js b/modern/src/map/MapGeofenceEdit.js
new file mode 100644
index 00000000..c64eb736
--- /dev/null
+++ b/modern/src/map/MapGeofenceEdit.js
@@ -0,0 +1,141 @@
+import 'mapbox-gl/dist/mapbox-gl.css';
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import theme from '@mapbox/mapbox-gl-draw/src/lib/theme';
+import { useEffect } from 'react';
+
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import { map } from './core/Map';
+import { geofenceToFeature, geometryToArea } from './core/mapUtil';
+import { errorsActions, geofencesActions } from '../store';
+import { useCatchCallback } from '../reactHelper';
+
+const draw = new MapboxDraw({
+  displayControlsDefault: false,
+  controls: {
+    polygon: true,
+    trash: true,
+  },
+  userProperties: true,
+  styles: [...theme, {
+    id: 'gl-draw-title',
+    type: 'symbol',
+    filter: ['all'],
+    layout: {
+      'text-field': '{user_name}',
+      'text-font': ['Roboto Regular'],
+      'text-size': 12,
+    },
+    paint: {
+      'text-halo-color': 'white',
+      'text-halo-width': 1,
+    },
+  }],
+});
+
+const MapGeofenceEdit = () => {
+  const dispatch = useDispatch();
+  const history = useHistory();
+
+  const geofences = useSelector((state) => state.geofences.items);
+
+  const refreshGeofences = useCatchCallback(async () => {
+    const response = await fetch('/api/geofences');
+    if (response.ok) {
+      dispatch(geofencesActions.refresh(await response.json()));
+    } else {
+      throw Error(await response.text());
+    }
+  }, [dispatch]);
+
+  useEffect(() => {
+    refreshGeofences();
+
+    map.addControl(draw, 'top-left');
+    return () => map.removeControl(draw);
+  }, [refreshGeofences]);
+
+  useEffect(() => {
+    const listener = async (event) => {
+      const feature = event.features[0];
+      const newItem = { name: '', area: geometryToArea(feature.geometry) };
+      draw.delete(feature.id);
+      try {
+        const response = await fetch('/api/geofences', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(newItem),
+        });
+        if (response.ok) {
+          const item = await response.json();
+          history.push(`/settings/geofence/${item.id}`);
+        } else {
+          throw Error(await response.text());
+        }
+      } catch (error) {
+        dispatch(errorsActions.push(error.message));
+      }
+    };
+
+    map.on('draw.create', listener);
+    return () => map.off('draw.create', listener);
+  }, [dispatch, history]);
+
+  useEffect(() => {
+    const listener = async (event) => {
+      const feature = event.features[0];
+      try {
+        const response = await fetch(`/api/geofences/${feature.id}`, { method: 'DELETE' });
+        if (response.ok) {
+          refreshGeofences();
+        } else {
+          throw Error(await response.text());
+        }
+      } catch (error) {
+        dispatch(errorsActions.push(error.message));
+      }
+    };
+
+    map.on('draw.delete', listener);
+    return () => map.off('draw.delete', listener);
+  }, [dispatch, refreshGeofences]);
+
+  useEffect(() => {
+    const listener = async (event) => {
+      const feature = event.features[0];
+      const item = Object.values(geofences).find((i) => i.id === feature.id);
+      if (item) {
+        const updatedItem = { ...item, area: geometryToArea(feature.geometry) };
+        try {
+          const response = await fetch(`/api/geofences/${feature.id}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(updatedItem),
+          });
+          if (response.ok) {
+            refreshGeofences();
+          } else {
+            throw Error(await response.text());
+          }
+        } catch (error) {
+          dispatch(errorsActions.push(error.message));
+        }
+      }
+    };
+
+    map.on('draw.update', listener);
+    return () => map.off('draw.update', listener);
+  }, [dispatch, geofences, refreshGeofences]);
+
+  useEffect(() => {
+    draw.deleteAll();
+    Object.values(geofences).forEach((geofence) => {
+      draw.add(geofenceToFeature(geofence));
+    });
+  }, [geofences]);
+
+  return null;
+};
+
+export default MapGeofenceEdit;
diff --git a/modern/src/map/MapPositions.js b/modern/src/map/MapPositions.js
new file mode 100644
index 00000000..170a6b11
--- /dev/null
+++ b/modern/src/map/MapPositions.js
@@ -0,0 +1,142 @@
+import { useCallback, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+import { map } from './core/Map';
+import { getStatusColor } from '../common/util/formatter';
+import usePersistedState from '../common/util/usePersistedState';
+
+const MapPositions = ({ positions, onClick }) => {
+  const id = 'positions';
+  const clusters = `${id}-clusters`;
+
+  const devices = useSelector((state) => state.devices.items);
+
+  const [mapCluster] = usePersistedState('mapCluster', true);
+
+  const createFeature = (devices, position) => {
+    const device = devices[position.deviceId];
+    return {
+      id: position.id,
+      deviceId: position.deviceId,
+      name: device.name,
+      category: device.category || 'default',
+      color: getStatusColor(device.status),
+    };
+  };
+
+  const onMouseEnter = () => map.getCanvas().style.cursor = 'pointer';
+  const onMouseLeave = () => map.getCanvas().style.cursor = '';
+
+  const onMarkerClick = useCallback((event) => {
+    const feature = event.features[0];
+    if (onClick) {
+      onClick(feature.properties.id, feature.properties.deviceId);
+    }
+  }, [onClick]);
+
+  const onClusterClick = useCallback((event) => {
+    const features = map.queryRenderedFeatures(event.point, {
+      layers: [clusters],
+    });
+    const clusterId = features[0].properties.cluster_id;
+    map.getSource(id).getClusterExpansionZoom(clusterId, (error, zoom) => {
+      if (!error) {
+        map.easeTo({
+          center: features[0].geometry.coordinates,
+          zoom,
+        });
+      }
+    });
+  }, [clusters]);
+
+  useEffect(() => {
+    map.addSource(id, {
+      type: 'geojson',
+      data: {
+        type: 'FeatureCollection',
+        features: [],
+      },
+      cluster: mapCluster,
+      clusterMaxZoom: 14,
+      clusterRadius: 50,
+    });
+    map.addLayer({
+      id,
+      type: 'symbol',
+      source: id,
+      filter: ['!', ['has', 'point_count']],
+      layout: {
+        'icon-image': '{category}-{color}',
+        'icon-allow-overlap': true,
+        'text-field': '{name}',
+        'text-allow-overlap': true,
+        'text-anchor': 'bottom',
+        'text-offset': [0, -2],
+        'text-font': ['Roboto Regular'],
+        'text-size': 12,
+      },
+      paint: {
+        'text-halo-color': 'white',
+        'text-halo-width': 1,
+      },
+    });
+    map.addLayer({
+      id: clusters,
+      type: 'symbol',
+      source: id,
+      filter: ['has', 'point_count'],
+      layout: {
+        'icon-image': 'background',
+        'text-field': '{point_count_abbreviated}',
+        'text-font': ['Roboto Regular'],
+        'text-size': 14,
+      },
+    });
+
+    map.on('mouseenter', id, onMouseEnter);
+    map.on('mouseleave', id, onMouseLeave);
+    map.on('mouseenter', clusters, onMouseEnter);
+    map.on('mouseleave', clusters, onMouseLeave);
+    map.on('click', id, onMarkerClick);
+    map.on('click', clusters, onClusterClick);
+
+    return () => {
+      Array.from(map.getContainer().getElementsByClassName('maplibregl-popup')).forEach((el) => el.remove());
+
+      map.off('mouseenter', id, onMouseEnter);
+      map.off('mouseleave', id, onMouseLeave);
+      map.off('mouseenter', clusters, onMouseEnter);
+      map.off('mouseleave', clusters, onMouseLeave);
+      map.off('click', id, onMarkerClick);
+      map.off('click', clusters, onClusterClick);
+
+      if (map.getLayer(id)) {
+        map.removeLayer(id);
+      }
+      if (map.getLayer(clusters)) {
+        map.removeLayer(clusters);
+      }
+      if (map.getSource(id)) {
+        map.removeSource(id);
+      }
+    };
+  }, [mapCluster, clusters, onMarkerClick, onClusterClick]);
+
+  useEffect(() => {
+    map.getSource(id).setData({
+      type: 'FeatureCollection',
+      features: positions.filter((it) => devices.hasOwnProperty(it.deviceId)).map((position) => ({
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: [position.longitude, position.latitude],
+        },
+        properties: createFeature(devices, position),
+      })),
+    });
+  }, [devices, positions]);
+
+  return null;
+};
+
+export default MapPositions;
diff --git a/modern/src/map/MapReplayPath.js b/modern/src/map/MapReplayPath.js
new file mode 100644
index 00000000..be0fcb98
--- /dev/null
+++ b/modern/src/map/MapReplayPath.js
@@ -0,0 +1,65 @@
+import maplibregl from 'maplibre-gl';
+import { useEffect } from 'react';
+import { map } from './core/Map';
+
+const MapReplayPath = ({ positions }) => {
+  const id = 'replay';
+
+  useEffect(() => {
+    map.addSource(id, {
+      type: 'geojson',
+      data: {
+        type: 'Feature',
+        geometry: {
+          type: 'LineString',
+          coordinates: [],
+        },
+      },
+    });
+    map.addLayer({
+      source: id,
+      id,
+      type: 'line',
+      layout: {
+        'line-join': 'round',
+        'line-cap': 'round',
+      },
+      paint: {
+        'line-color': '#3bb2d0',
+        'line-width': 2,
+      },
+    });
+
+    return () => {
+      if (map.getLayer(id)) {
+        map.removeLayer(id);
+      }
+      if (map.getSource(id)) {
+        map.removeSource(id);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    const coordinates = positions.map((item) => [item.longitude, item.latitude]);
+    map.getSource(id).setData({
+      type: 'Feature',
+      geometry: {
+        type: 'LineString',
+        coordinates,
+      },
+    });
+    if (coordinates.length) {
+      const bounds = coordinates.reduce((bounds, item) => bounds.extend(item), new maplibregl.LngLatBounds(coordinates[0], coordinates[0]));
+      map.fitBounds(bounds, {
+        padding: {
+          top: 50, bottom: 250, left: 25, right: 25,
+        },
+      });
+    }
+  }, [positions]);
+
+  return null;
+};
+
+export default MapReplayPath;
diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js
deleted file mode 100644
index 2e152d34..00000000
--- a/modern/src/map/PositionsMap.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import { useCallback, useEffect } from 'react';
-import { useSelector } from 'react-redux';
-
-import { map } from './core/Map';
-import { getStatusColor } from '../common/util/formatter';
-import usePersistedState from '../common/util/usePersistedState';
-
-const PositionsMap = ({ positions, onClick }) => {
-  const id = 'positions';
-  const clusters = `${id}-clusters`;
-
-  const devices = useSelector((state) => state.devices.items);
-
-  const [mapCluster] = usePersistedState('mapCluster', true);
-
-  const createFeature = (devices, position) => {
-    const device = devices[position.deviceId];
-    return {
-      id: position.id,
-      deviceId: position.deviceId,
-      name: device.name,
-      category: device.category || 'default',
-      color: getStatusColor(device.status),
-    };
-  };
-
-  const onMouseEnter = () => map.getCanvas().style.cursor = 'pointer';
-  const onMouseLeave = () => map.getCanvas().style.cursor = '';
-
-  const onMarkerClick = useCallback((event) => {
-    const feature = event.features[0];
-    if (onClick) {
-      onClick(feature.properties.id, feature.properties.deviceId);
-    }
-  }, [onClick]);
-
-  const onClusterClick = useCallback((event) => {
-    const features = map.queryRenderedFeatures(event.point, {
-      layers: [clusters],
-    });
-    const clusterId = features[0].properties.cluster_id;
-    map.getSource(id).getClusterExpansionZoom(clusterId, (error, zoom) => {
-      if (!error) {
-        map.easeTo({
-          center: features[0].geometry.coordinates,
-          zoom,
-        });
-      }
-    });
-  }, [clusters]);
-
-  useEffect(() => {
-    map.addSource(id, {
-      type: 'geojson',
-      data: {
-        type: 'FeatureCollection',
-        features: [],
-      },
-      cluster: mapCluster,
-      clusterMaxZoom: 14,
-      clusterRadius: 50,
-    });
-    map.addLayer({
-      id,
-      type: 'symbol',
-      source: id,
-      filter: ['!', ['has', 'point_count']],
-      layout: {
-        'icon-image': '{category}-{color}',
-        'icon-allow-overlap': true,
-        'text-field': '{name}',
-        'text-allow-overlap': true,
-        'text-anchor': 'bottom',
-        'text-offset': [0, -2],
-        'text-font': ['Roboto Regular'],
-        'text-size': 12,
-      },
-      paint: {
-        'text-halo-color': 'white',
-        'text-halo-width': 1,
-      },
-    });
-    map.addLayer({
-      id: clusters,
-      type: 'symbol',
-      source: id,
-      filter: ['has', 'point_count'],
-      layout: {
-        'icon-image': 'background',
-        'text-field': '{point_count_abbreviated}',
-        'text-font': ['Roboto Regular'],
-        'text-size': 14,
-      },
-    });
-
-    map.on('mouseenter', id, onMouseEnter);
-    map.on('mouseleave', id, onMouseLeave);
-    map.on('mouseenter', clusters, onMouseEnter);
-    map.on('mouseleave', clusters, onMouseLeave);
-    map.on('click', id, onMarkerClick);
-    map.on('click', clusters, onClusterClick);
-
-    return () => {
-      Array.from(map.getContainer().getElementsByClassName('maplibregl-popup')).forEach((el) => el.remove());
-
-      map.off('mouseenter', id, onMouseEnter);
-      map.off('mouseleave', id, onMouseLeave);
-      map.off('mouseenter', clusters, onMouseEnter);
-      map.off('mouseleave', clusters, onMouseLeave);
-      map.off('click', id, onMarkerClick);
-      map.off('click', clusters, onClusterClick);
-
-      if (map.getLayer(id)) {
-        map.removeLayer(id);
-      }
-      if (map.getLayer(clusters)) {
-        map.removeLayer(clusters);
-      }
-      if (map.getSource(id)) {
-        map.removeSource(id);
-      }
-    };
-  }, [mapCluster, clusters, onMarkerClick, onClusterClick]);
-
-  useEffect(() => {
-    map.getSource(id).setData({
-      type: 'FeatureCollection',
-      features: positions.filter((it) => devices.hasOwnProperty(it.deviceId)).map((position) => ({
-        type: 'Feature',
-        geometry: {
-          type: 'Point',
-          coordinates: [position.longitude, position.latitude],
-        },
-        properties: createFeature(devices, position),
-      })),
-    });
-  }, [devices, positions]);
-
-  return null;
-};
-
-export default PositionsMap;
diff --git a/modern/src/map/ReplayPathMap.js b/modern/src/map/ReplayPathMap.js
deleted file mode 100644
index 224502f1..00000000
--- a/modern/src/map/ReplayPathMap.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import maplibregl from 'maplibre-gl';
-import { useEffect } from 'react';
-import { map } from './core/Map';
-
-const ReplayPathMap = ({ positions }) => {
-  const id = 'replay';
-
-  useEffect(() => {
-    map.addSource(id, {
-      type: 'geojson',
-      data: {
-        type: 'Feature',
-        geometry: {
-          type: 'LineString',
-          coordinates: [],
-        },
-      },
-    });
-    map.addLayer({
-      source: id,
-      id,
-      type: 'line',
-      layout: {
-        'line-join': 'round',
-        'line-cap': 'round',
-      },
-      paint: {
-        'line-color': '#3bb2d0',
-        'line-width': 2,
-      },
-    });
-
-    return () => {
-      if (map.getLayer(id)) {
-        map.removeLayer(id);
-      }
-      if (map.getSource(id)) {
-        map.removeSource(id);
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    const coordinates = positions.map((item) => [item.longitude, item.latitude]);
-    map.getSource(id).setData({
-      type: 'Feature',
-      geometry: {
-        type: 'LineString',
-        coordinates,
-      },
-    });
-    if (coordinates.length) {
-      const bounds = coordinates.reduce((bounds, item) => bounds.extend(item), new maplibregl.LngLatBounds(coordinates[0], coordinates[0]));
-      map.fitBounds(bounds, {
-        padding: {
-          top: 50, bottom: 250, left: 25, right: 25,
-        },
-      });
-    }
-  }, [positions]);
-
-  return null;
-};
-
-export default ReplayPathMap;
diff --git a/modern/src/map/main/AccuracyMap.js b/modern/src/map/main/AccuracyMap.js
deleted file mode 100644
index 870df38f..00000000
--- a/modern/src/map/main/AccuracyMap.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import circle from '@turf/circle';
-
-import { map } from '../core/Map';
-
-const AccuracyMap = () => {
-  const id = 'accuracy';
-
-  const positions = useSelector((state) => ({
-    type: 'FeatureCollection',
-    features: Object.values(state.positions.items).filter((position) => position.accuracy > 0).map((position) => circle([position.longitude, position.latitude], position.accuracy * 0.001)),
-  }));
-
-  useEffect(() => {
-    map.addSource(id, {
-      type: 'geojson',
-      data: {
-        type: 'FeatureCollection',
-        features: [],
-      },
-    });
-    map.addLayer({
-      source: id,
-      id,
-      type: 'fill',
-      filter: [
-        'all',
-        ['==', '$type', 'Polygon'],
-      ],
-      paint: {
-        'fill-color': '#3bb2d0',
-        'fill-outline-color': '#3bb2d0',
-        'fill-opacity': 0.25,
-      },
-    });
-
-    return () => {
-      if (map.getLayer(id)) {
-        map.removeLayer(id);
-      }
-      if (map.getSource(id)) {
-        map.removeSource(id);
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    map.getSource(id).setData(positions);
-  }, [positions]);
-
-  return null;
-};
-
-export default AccuracyMap;
diff --git a/modern/src/map/main/CurrentPositionsMap.js b/modern/src/map/main/CurrentPositionsMap.js
deleted file mode 100644
index 76a0a0b9..00000000
--- a/modern/src/map/main/CurrentPositionsMap.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { useCallback } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-
-import { devicesActions } from '../../store';
-import PositionsMap from '../PositionsMap';
-
-const CurrentPositionsMap = () => {
-  const dispatch = useDispatch();
-
-  const onClick = useCallback((_, deviceId) => {
-    dispatch(devicesActions.select(deviceId));
-  }, [dispatch]);
-
-  const positions = useSelector((state) => state.positions.items);
-  return (<PositionsMap positions={Object.values(positions)} onClick={onClick} />);
-};
-
-export default CurrentPositionsMap;
diff --git a/modern/src/map/main/DefaultCameraMap.js b/modern/src/map/main/DefaultCameraMap.js
deleted file mode 100644
index 256fbd04..00000000
--- a/modern/src/map/main/DefaultCameraMap.js
+++ /dev/null
@@ -1,52 +0,0 @@
-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';
-
-const DefaultCameraMap = () => {
-  const selectedDeviceId = useSelector((state) => state.devices.selectedId);
-  const positions = useSelector((state) => state.positions.items);
-
-  const defaultLatitude = usePreference('latitude');
-  const defaultLongitude = usePreference('longitude');
-  const defaultZoom = usePreference('zoom');
-
-  const [initialized, setInitialized] = useState(false);
-
-  useEffect(() => {
-    if (selectedDeviceId) {
-      setInitialized(true);
-    } else if (!initialized) {
-      if (defaultLatitude && defaultLongitude) {
-        map.jumpTo({
-          center: [defaultLongitude, defaultLatitude],
-          zoom: defaultZoom,
-        });
-        setInitialized(true);
-      } else {
-        const coordinates = Object.values(positions).map((item) => [item.longitude, item.latitude]);
-        if (coordinates.length > 1) {
-          const bounds = coordinates.reduce((bounds, item) => bounds.extend(item), new maplibregl.LngLatBounds(coordinates[0], coordinates[0]));
-          const canvas = map.getCanvas();
-          map.fitBounds(bounds, {
-            duration: 0,
-            padding: Math.min(canvas.width, canvas.height) * 0.1,
-          });
-          setInitialized(true);
-        } else if (coordinates.length) {
-          const [individual] = coordinates;
-          map.jumpTo({
-            center: individual,
-            zoom: Math.max(map.getZoom(), 10),
-          });
-          setInitialized(true);
-        }
-      }
-    }
-  }, [selectedDeviceId, initialized, defaultLatitude, defaultLongitude, defaultZoom, positions]);
-
-  return null;
-};
-
-export default DefaultCameraMap;
diff --git a/modern/src/map/main/GeofenceMap.js b/modern/src/map/main/GeofenceMap.js
deleted file mode 100644
index c0912cb2..00000000
--- a/modern/src/map/main/GeofenceMap.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { useEffect } from 'react';
-import { useSelector } from 'react-redux';
-
-import { map } from '../core/Map';
-import { geofenceToFeature } from '../core/mapUtil';
-
-const GeofenceMap = () => {
-  const id = 'geofences';
-
-  const geofences = useSelector((state) => state.geofences.items);
-
-  useEffect(() => {
-    map.addSource(id, {
-      type: 'geojson',
-      data: {
-        type: 'FeatureCollection',
-        features: [],
-      },
-    });
-    map.addLayer({
-      source: id,
-      id: 'geofences-fill',
-      type: 'fill',
-      filter: [
-        'all',
-        ['==', '$type', 'Polygon'],
-      ],
-      paint: {
-        'fill-color': '#3bb2d0',
-        'fill-outline-color': '#3bb2d0',
-        'fill-opacity': 0.1,
-      },
-    });
-    map.addLayer({
-      source: id,
-      id: 'geofences-line',
-      type: 'line',
-      paint: {
-        'line-color': '#3bb2d0',
-        'line-width': 2,
-      },
-    });
-    map.addLayer({
-      source: id,
-      id: 'geofences-title',
-      type: 'symbol',
-      layout: {
-        'text-field': '{name}',
-        'text-font': ['Roboto Regular'],
-        'text-size': 12,
-      },
-      paint: {
-        'text-halo-color': 'white',
-        'text-halo-width': 1,
-      },
-    });
-
-    return () => {
-      if (map.getLayer('geofences-fill')) {
-        map.removeLayer('geofences-fill');
-      }
-      if (map.getLayer('geofences-line')) {
-        map.removeLayer('geofences-line');
-      }
-      if (map.getLayer('geofences-title')) {
-        map.removeLayer('geofences-title');
-      }
-      if (map.getSource(id)) {
-        map.removeSource(id);
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    map.getSource(id).setData({
-      type: 'FeatureCollection',
-      features: Object.values(geofences).map(geofenceToFeature),
-    });
-  }, [geofences]);
-
-  return null;
-};
-
-export default GeofenceMap;
diff --git a/modern/src/map/main/LiveRoutesMap.js b/modern/src/map/main/LiveRoutesMap.js
deleted file mode 100644
index 5c629d86..00000000
--- a/modern/src/map/main/LiveRoutesMap.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { useSelector } from 'react-redux';
-import { map } from '../core/Map';
-import { usePrevious } from '../../reactHelper';
-
-const LiveRoutesMap = () => {
-  const id = 'liveRoute';
-
-  const selectedDeviceId = useSelector((state) => state.devices.selectedId);
-  const currentDeviceId = usePrevious(selectedDeviceId);
-
-  const position = useSelector((state) => state.positions.items[selectedDeviceId]);
-
-  const [route, setRoute] = useState([]);
-
-  useEffect(() => {
-    map.addSource(id, {
-      type: 'geojson',
-      data: {
-        type: 'Feature',
-        geometry: {
-          type: 'LineString',
-          coordinates: [],
-        },
-      },
-    });
-    map.addLayer({
-      source: id,
-      id,
-      type: 'line',
-      layout: {
-        'line-join': 'round',
-        'line-cap': 'round',
-      },
-      paint: {
-        'line-color': '#3bb2d0',
-        'line-width': 2,
-      },
-    });
-
-    return () => {
-      if (map.getLayer(id)) {
-        map.removeLayer(id);
-      }
-      if (map.getSource(id)) {
-        map.removeSource(id);
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    if (selectedDeviceId !== currentDeviceId) {
-      if (!selectedDeviceId) {
-        setRoute([]);
-      } else if (position) {
-        setRoute([position]);
-      }
-    } else if (position) {
-      const last = route.at(-1);
-      if (!last || (last.latitude !== position.latitude && last.longitude !== position.longitude)) {
-        setRoute([...route.slice(-9), position]);
-      }
-    }
-  }, [selectedDeviceId, currentDeviceId, position, route]);
-
-  useEffect(() => {
-    map.getSource(id).setData({
-      type: 'Feature',
-      geometry: {
-        type: 'LineString',
-        coordinates: route.map((item) => [item.longitude, item.latitude]),
-      },
-    });
-  }, [route]);
-
-  return null;
-};
-
-export default LiveRoutesMap;
diff --git a/modern/src/map/main/MapAccuracy.js b/modern/src/map/main/MapAccuracy.js
new file mode 100644
index 00000000..11ea64ed
--- /dev/null
+++ b/modern/src/map/main/MapAccuracy.js
@@ -0,0 +1,55 @@
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import circle from '@turf/circle';
+
+import { map } from '../core/Map';
+
+const MapAccuracy = () => {
+  const id = 'accuracy';
+
+  const positions = useSelector((state) => ({
+    type: 'FeatureCollection',
+    features: Object.values(state.positions.items).filter((position) => position.accuracy > 0).map((position) => circle([position.longitude, position.latitude], position.accuracy * 0.001)),
+  }));
+
+  useEffect(() => {
+    map.addSource(id, {
+      type: 'geojson',
+      data: {
+        type: 'FeatureCollection',
+        features: [],
+      },
+    });
+    map.addLayer({
+      source: id,
+      id,
+      type: 'fill',
+      filter: [
+        'all',
+        ['==', '$type', 'Polygon'],
+      ],
+      paint: {
+        'fill-color': '#3bb2d0',
+        'fill-outline-color': '#3bb2d0',
+        'fill-opacity': 0.25,
+      },
+    });
+
+    return () => {
+      if (map.getLayer(id)) {
+        map.removeLayer(id);
+      }
+      if (map.getSource(id)) {
+        map.removeSource(id);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    map.getSource(id).setData(positions);
+  }, [positions]);
+
+  return null;
+};
+
+export default MapAccuracy;
diff --git a/modern/src/map/main/MapCurrentPositions.js b/modern/src/map/main/MapCurrentPositions.js
new file mode 100644
index 00000000..ff05d2d1
--- /dev/null
+++ b/modern/src/map/main/MapCurrentPositions.js
@@ -0,0 +1,18 @@
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { devicesActions } from '../../store';
+import MapPositions from '../MapPositions';
+
+const MapCurrentPositions = () => {
+  const dispatch = useDispatch();
+
+  const onClick = useCallback((_, deviceId) => {
+    dispatch(devicesActions.select(deviceId));
+  }, [dispatch]);
+
+  const positions = useSelector((state) => state.positions.items);
+  return (<MapPositions positions={Object.values(positions)} onClick={onClick} />);
+};
+
+export default MapCurrentPositions;
diff --git a/modern/src/map/main/MapDefaultCamera.js b/modern/src/map/main/MapDefaultCamera.js
new file mode 100644
index 00000000..24296c2f
--- /dev/null
+++ b/modern/src/map/main/MapDefaultCamera.js
@@ -0,0 +1,52 @@
+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';
+
+const MapDefaultCamera = () => {
+  const selectedDeviceId = useSelector((state) => state.devices.selectedId);
+  const positions = useSelector((state) => state.positions.items);
+
+  const defaultLatitude = usePreference('latitude');
+  const defaultLongitude = usePreference('longitude');
+  const defaultZoom = usePreference('zoom');
+
+  const [initialized, setInitialized] = useState(false);
+
+  useEffect(() => {
+    if (selectedDeviceId) {
+      setInitialized(true);
+    } else if (!initialized) {
+      if (defaultLatitude && defaultLongitude) {
+        map.jumpTo({
+          center: [defaultLongitude, defaultLatitude],
+          zoom: defaultZoom,
+        });
+        setInitialized(true);
+      } else {
+        const coordinates = Object.values(positions).map((item) => [item.longitude, item.latitude]);
+        if (coordinates.length > 1) {
+          const bounds = coordinates.reduce((bounds, item) => bounds.extend(item), new maplibregl.LngLatBounds(coordinates[0], coordinates[0]));
+          const canvas = map.getCanvas();
+          map.fitBounds(bounds, {
+            duration: 0,
+            padding: Math.min(canvas.width, canvas.height) * 0.1,
+          });
+          setInitialized(true);
+        } else if (coordinates.length) {
+          const [individual] = coordinates;
+          map.jumpTo({
+            center: individual,
+            zoom: Math.max(map.getZoom(), 10),
+          });
+          setInitialized(true);
+        }
+      }
+    }
+  }, [selectedDeviceId, initialized, defaultLatitude, defaultLongitude, defaultZoom, positions]);
+
+  return null;
+};
+
+export default MapDefaultCamera;
diff --git a/modern/src/map/main/MapGeofence.js b/modern/src/map/main/MapGeofence.js
new file mode 100644
index 00000000..ee1bc884
--- /dev/null
+++ b/modern/src/map/main/MapGeofence.js
@@ -0,0 +1,84 @@
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+import { map } from '../core/Map';
+import { geofenceToFeature } from '../core/mapUtil';
+
+const MapGeofence = () => {
+  const id = 'geofences';
+
+  const geofences = useSelector((state) => state.geofences.items);
+
+  useEffect(() => {
+    map.addSource(id, {
+      type: 'geojson',
+      data: {
+        type: 'FeatureCollection',
+        features: [],
+      },
+    });
+    map.addLayer({
+      source: id,
+      id: 'geofences-fill',
+      type: 'fill',
+      filter: [
+        'all',
+        ['==', '$type', 'Polygon'],
+      ],
+      paint: {
+        'fill-color': '#3bb2d0',
+        'fill-outline-color': '#3bb2d0',
+        'fill-opacity': 0.1,
+      },
+    });
+    map.addLayer({
+      source: id,
+      id: 'geofences-line',
+      type: 'line',
+      paint: {
+        'line-color': '#3bb2d0',
+        'line-width': 2,
+      },
+    });
+    map.addLayer({
+      source: id,
+      id: 'geofences-title',
+      type: 'symbol',
+      layout: {
+        'text-field': '{name}',
+        'text-font': ['Roboto Regular'],
+        'text-size': 12,
+      },
+      paint: {
+        'text-halo-color': 'white',
+        'text-halo-width': 1,
+      },
+    });
+
+    return () => {
+      if (map.getLayer('geofences-fill')) {
+        map.removeLayer('geofences-fill');
+      }
+      if (map.getLayer('geofences-line')) {
+        map.removeLayer('geofences-line');
+      }
+      if (map.getLayer('geofences-title')) {
+        map.removeLayer('geofences-title');
+      }
+      if (map.getSource(id)) {
+        map.removeSource(id);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    map.getSource(id).setData({
+      type: 'FeatureCollection',
+      features: Object.values(geofences).map(geofenceToFeature),
+    });
+  }, [geofences]);
+
+  return null;
+};
+
+export default MapGeofence;
diff --git a/modern/src/map/main/MapLiveRoutes.js b/modern/src/map/main/MapLiveRoutes.js
new file mode 100644
index 00000000..6e79d7af
--- /dev/null
+++ b/modern/src/map/main/MapLiveRoutes.js
@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react';
+
+import { useSelector } from 'react-redux';
+import { map } from '../core/Map';
+import { usePrevious } from '../../reactHelper';
+
+const MapLiveRoutes = () => {
+  const id = 'liveRoute';
+
+  const selectedDeviceId = useSelector((state) => state.devices.selectedId);
+  const currentDeviceId = usePrevious(selectedDeviceId);
+
+  const position = useSelector((state) => state.positions.items[selectedDeviceId]);
+
+  const [route, setRoute] = useState([]);
+
+  useEffect(() => {
+    map.addSource(id, {
+      type: 'geojson',
+      data: {
+        type: 'Feature',
+        geometry: {
+          type: 'LineString',
+          coordinates: [],
+        },
+      },
+    });
+    map.addLayer({
+      source: id,
+      id,
+      type: 'line',
+      layout: {
+        'line-join': 'round',
+        'line-cap': 'round',
+      },
+      paint: {
+        'line-color': '#3bb2d0',
+        'line-width': 2,
+      },
+    });
+
+    return () => {
+      if (map.getLayer(id)) {
+        map.removeLayer(id);
+      }
+      if (map.getSource(id)) {
+        map.removeSource(id);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (selectedDeviceId !== currentDeviceId) {
+      if (!selectedDeviceId) {
+        setRoute([]);
+      } else if (position) {
+        setRoute([position]);
+      }
+    } else if (position) {
+      const last = route.at(-1);
+      if (!last || (last.latitude !== position.latitude && last.longitude !== position.longitude)) {
+        setRoute([...route.slice(-9), position]);
+      }
+    }
+  }, [selectedDeviceId, currentDeviceId, position, route]);
+
+  useEffect(() => {
+    map.getSource(id).setData({
+      type: 'Feature',
+      geometry: {
+        type: 'LineString',
+        coordinates: route.map((item) => [item.longitude, item.latitude]),
+      },
+    });
+  }, [route]);
+
+  return null;
+};
+
+export default MapLiveRoutes;
diff --git a/modern/src/map/main/MapSelectedDevice.js b/modern/src/map/main/MapSelectedDevice.js
new file mode 100644
index 00000000..ba3bc784
--- /dev/null
+++ b/modern/src/map/main/MapSelectedDevice.js
@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+
+import { useSelector } from 'react-redux';
+import dimensions from '../../common/theme/dimensions';
+import { map } from '../core/Map';
+import { usePrevious } from '../../reactHelper';
+import usePersistedState from '../../common/util/usePersistedState';
+
+const MapSelectedDevice = () => {
+  const selectedDeviceId = useSelector((state) => state.devices.selectedId);
+  const previousDeviceId = usePrevious(selectedDeviceId);
+
+  const position = useSelector((state) => state.positions.items[selectedDeviceId]);
+
+  const [mapFollow] = usePersistedState('mapFollow', false);
+
+  useEffect(() => {
+    if ((selectedDeviceId !== previousDeviceId || mapFollow) && position) {
+      map.easeTo({
+        center: [position.longitude, position.latitude],
+        zoom: Math.max(map.getZoom(), 10),
+        offset: [0, -dimensions.popupMapOffset / 2],
+      });
+    }
+  });
+
+  return null;
+};
+
+export default MapSelectedDevice;
diff --git a/modern/src/map/main/SelectedDeviceMap.js b/modern/src/map/main/SelectedDeviceMap.js
deleted file mode 100644
index 250be372..00000000
--- a/modern/src/map/main/SelectedDeviceMap.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useEffect } from 'react';
-
-import { useSelector } from 'react-redux';
-import dimensions from '../../common/theme/dimensions';
-import { map } from '../core/Map';
-import { usePrevious } from '../../reactHelper';
-import usePersistedState from '../../common/util/usePersistedState';
-
-const SelectedDeviceMap = () => {
-  const selectedDeviceId = useSelector((state) => state.devices.selectedId);
-  const previousDeviceId = usePrevious(selectedDeviceId);
-
-  const position = useSelector((state) => state.positions.items[selectedDeviceId]);
-
-  const [mapFollow] = usePersistedState('mapFollow', false);
-
-  useEffect(() => {
-    if ((selectedDeviceId !== previousDeviceId || mapFollow) && position) {
-      map.easeTo({
-        center: [position.longitude, position.latitude],
-        zoom: Math.max(map.getZoom(), 10),
-        offset: [0, -dimensions.popupMapOffset / 2],
-      });
-    }
-  });
-
-  return null;
-};
-
-export default SelectedDeviceMap;
diff --git a/modern/src/other/EventPage.js b/modern/src/other/EventPage.js
index 7bcf90a8..8174de5a 100644
--- a/modern/src/other/EventPage.js
+++ b/modern/src/other/EventPage.js
@@ -9,7 +9,7 @@ import ContainerDimensions from 'react-container-dimensions';
 import { useEffectAsync } from '../reactHelper';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import Map from '../map/core/Map';
-import PositionsMap from '../map/PositionsMap';
+import MapPositions from '../map/MapPositions';
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -70,7 +70,7 @@ const EventPage = () => {
       <div className={classes.mapContainer}>
         <ContainerDimensions>
           <Map>
-            {position && <PositionsMap positions={[position]} />}
+            {position && <MapPositions positions={[position]} />}
           </Map>
         </ContainerDimensions>
       </div>
diff --git a/modern/src/other/GeofencesPage.js b/modern/src/other/GeofencesPage.js
index 900571e1..1e866de6 100644
--- a/modern/src/other/GeofencesPage.js
+++ b/modern/src/other/GeofencesPage.js
@@ -8,8 +8,8 @@ import ContainerDimensions from 'react-container-dimensions';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import { useHistory } from 'react-router-dom';
 import Map from '../map/core/Map';
-import CurrentLocationMap from '../map/CurrentLocationMap';
-import GeofenceEditMap from '../map/GeofenceEditMap';
+import MapCurrentLocation from '../map/MapCurrentLocation';
+import MapGeofenceEdit from '../map/MapGeofenceEdit';
 import GeofencesList from './GeofencesList';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import dimensions from '../common/theme/dimensions';
@@ -79,8 +79,8 @@ const GeofencesPage = () => {
         <div className={classes.mapContainer}>
           <ContainerDimensions>
             <Map>
-              <CurrentLocationMap />
-              <GeofenceEditMap />
+              <MapCurrentLocation />
+              <MapGeofenceEdit />
             </Map>
           </ContainerDimensions>
         </div>
diff --git a/modern/src/other/ReplayPage.js b/modern/src/other/ReplayPage.js
index c1c56ac1..5e759d7e 100644
--- a/modern/src/other/ReplayPage.js
+++ b/modern/src/other/ReplayPage.js
@@ -13,8 +13,8 @@ import FastRewindIcon from '@material-ui/icons/FastRewind';
 import { useHistory } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import Map from '../map/core/Map';
-import ReplayPathMap from '../map/ReplayPathMap';
-import PositionsMap from '../map/PositionsMap';
+import MapReplayPath from '../map/MapReplayPath';
+import MapPositions from '../map/MapPositions';
 import { formatTime } from '../common/util/formatter';
 import ReportFilter from '../reports/components/ReportFilter';
 import { useTranslation } from '../common/components/LocalizationProvider';
@@ -138,9 +138,9 @@ const ReplayPage = () => {
   return (
     <div className={classes.root}>
       <Map>
-        <ReplayPathMap positions={positions} />
+        <MapReplayPath positions={positions} />
         {index < positions.length && (
-          <PositionsMap positions={[positions[index]]} onClick={onClick} />
+          <MapPositions positions={[positions[index]]} onClick={onClick} />
         )}
       </Map>
       <div className={classes.sidebar}>
-- 
cgit v1.2.3