aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-05-03 17:44:52 -0700
committerAnton Tananaev <anton@traccar.org>2022-05-03 17:44:52 -0700
commitf2f787e56b03c5806f0b7ce872f5450b6f733ae1 (patch)
tree3dd13fede659c41c707c0d57c6bab4366244b778 /modern/src
parent9ac0392dd839f6cb7669ca4a611cdf7be5bcbdd3 (diff)
downloadtrackermap-web-f2f787e56b03c5806f0b7ce872f5450b6f733ae1.tar.gz
trackermap-web-f2f787e56b03c5806f0b7ce872f5450b6f733ae1.tar.bz2
trackermap-web-f2f787e56b03c5806f0b7ce872f5450b6f733ae1.zip
Init default map camera
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/MainPage.js2
-rw-r--r--modern/src/map/DefaultCameraMap.js52
-rw-r--r--modern/src/map/SelectedDeviceMap.js1
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],
});
}