aboutsummaryrefslogtreecommitdiff
path: root/src/map/main/MapDefaultCamera.js
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2024-04-06 09:22:10 -0700
committerAnton Tananaev <anton@traccar.org>2024-04-06 09:22:10 -0700
commitf418231b6b2f5e030a0d2dcc390c314602b1f740 (patch)
tree10326adf3792bc2697e06bb5f2b8ef2a8f7e55fe /src/map/main/MapDefaultCamera.js
parentb392a4af78e01c8e0f50aad5468e9583675b24be (diff)
downloadtrackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.tar.gz
trackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.tar.bz2
trackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.zip
Move modern to the top
Diffstat (limited to 'src/map/main/MapDefaultCamera.js')
-rw-r--r--src/map/main/MapDefaultCamera.js52
1 files changed, 52 insertions, 0 deletions
diff --git a/src/map/main/MapDefaultCamera.js b/src/map/main/MapDefaultCamera.js
new file mode 100644
index 00000000..90b3061b
--- /dev/null
+++ b/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/MapView';
+
+const MapDefaultCamera = () => {
+ const selectedDeviceId = useSelector((state) => state.devices.selectedId);
+ const positions = useSelector((state) => state.session.positions);
+
+ const defaultLatitude = usePreference('latitude');
+ const defaultLongitude = usePreference('longitude');
+ const defaultZoom = usePreference('zoom', 0);
+
+ 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[1]));
+ 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;