diff options
author | Anton Tananaev <anton@traccar.org> | 2024-04-06 09:22:10 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2024-04-06 09:22:10 -0700 |
commit | f418231b6b2f5e030a0d2dcc390c314602b1f740 (patch) | |
tree | 10326adf3792bc2697e06bb5f2b8ef2a8f7e55fe /src/map/main/MapDefaultCamera.js | |
parent | b392a4af78e01c8e0f50aad5468e9583675b24be (diff) | |
download | trackermap-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.js | 52 |
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; |