diff options
author | Anton Tananaev <anton@traccar.org> | 2022-05-22 09:57:51 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2022-05-22 09:57:51 -0700 |
commit | 67d7ce8e0f428c521d3d032e8145108c9b2a5f45 (patch) | |
tree | 9f350497ebc64951ce2070723ab2b66e1a0f5472 /modern/src/map/main/MapDefaultCamera.js | |
parent | 111347e3f40640aa4c43c0bc2666d7a92ce03bb2 (diff) | |
download | trackermap-web-67d7ce8e0f428c521d3d032e8145108c9b2a5f45.tar.gz trackermap-web-67d7ce8e0f428c521d3d032e8145108c9b2a5f45.tar.bz2 trackermap-web-67d7ce8e0f428c521d3d032e8145108c9b2a5f45.zip |
Rename map plugins
Diffstat (limited to 'modern/src/map/main/MapDefaultCamera.js')
-rw-r--r-- | modern/src/map/main/MapDefaultCamera.js | 52 |
1 files changed, 52 insertions, 0 deletions
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; |