1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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 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);
}
}
}
}, [selectedDeviceId, initialized, defaultLatitude, defaultLongitude, defaultZoom, positions]);
return null;
};
export default DefaultCameraMap;
|
