Init default map camera

3 files changed, 55 insertions, 0 deletions

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 8c36f621..ebd739d2 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -25,6 +25,7 @@ import PoiMap from './map/PoiMap';
 import MapPadding from './map/MapPadding';
 import StatusCard from './map/StatusCard';
 import { devicesActions } from './store';
+import DefaultCameraMap from './map/DefaultCameraMap';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -138,6 +139,7 @@ const MainPage = () => {
         <GeofenceMap />
         <AccuracyMap />
         <CurrentPositionsMap />
+        <DefaultCameraMap />
         <SelectedDeviceMap />
         <PoiMap />
       </Map>
diff --git a/modern/src/map/DefaultCameraMap.js b/modern/src/map/DefaultCameraMap.js
new file mode 100644
index 00000000..5e30d568
--- /dev/null
+++ b/modern/src/map/DefaultCameraMap.js
@@ -0,0 +1,52 @@
+import maplibregl from 'maplibre-gl';
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { usePreference } from '../common/preferences';
+import { map } from './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);
+        }
+      }
+    }
+  });
+
+  return null;
+};
+
+export default DefaultCameraMap;
diff --git a/modern/src/map/SelectedDeviceMap.js b/modern/src/map/SelectedDeviceMap.js
index 1294085c..bf7e3bcd 100644
--- a/modern/src/map/SelectedDeviceMap.js
+++ b/modern/src/map/SelectedDeviceMap.js
@@ -18,6 +18,7 @@ const SelectedDeviceMap = () => {
     if ((selectedDeviceId !== previousDeviceId || mapFollow) && position) {
       map.easeTo({
         center: [position.longitude, position.latitude],
+        zoom: Math.max(map.getZoom(), 10),
         offset: [0, -dimensions.popupMapOffset / 2],
       });
     }