Selected device map plugin

2 files changed, 26 insertions, 0 deletions

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 9f9f744b..ada6c01b 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -8,6 +8,7 @@ import DevicesList from './DevicesList';
 import MainToolbar from './MainToolbar';
 import Map from './map/Map';
 import PositionsMap from './map/PositionsMap';
+import SelectedDeviceMap from './map/SelectedDeviceMap';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -55,6 +56,7 @@ const MainPage = ({ width }) => {
         <div className={classes.mapContainer}>
           <ContainerDimensions>
             <Map>
+              <SelectedDeviceMap />
               <PositionsMap />
             </Map>
           </ContainerDimensions>
diff --git a/modern/src/map/SelectedDeviceMap.js b/modern/src/map/SelectedDeviceMap.js
new file mode 100644
index 00000000..655fca98
--- /dev/null
+++ b/modern/src/map/SelectedDeviceMap.js
@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+import { map } from './Map';
+
+const SelectedDeviceMap = () => {
+  const mapCenter = useSelector(state => {
+    if (state.devices.selectedId) {
+      const position = state.positions.items[state.devices.selectedId] || null;
+      if (position) {
+        return [position.longitude, position.latitude];
+      }
+    }
+    return null;
+  });
+
+  useEffect(() => {
+    map.easeTo({ center: mapCenter });
+  }, [mapCenter]);
+
+  return null;
+}
+
+export default SelectedDeviceMap;