aboutsummaryrefslogtreecommitdiff
path: root/modern/src/map/MapGeofenceEdit.js
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-06-26 17:24:00 -0700
committerAnton Tananaev <anton@traccar.org>2022-06-26 17:24:00 -0700
commit6c0eece6465ec148ecc5517cfea5522c27a9801f (patch)
treeb509bea3e63847d8b27460f97fca0ea169c93820 /modern/src/map/MapGeofenceEdit.js
parent6721b7c6c70152fe5c6b19ab38b7a9b9c8357a25 (diff)
downloadtrackermap-web-6c0eece6465ec148ecc5517cfea5522c27a9801f.tar.gz
trackermap-web-6c0eece6465ec148ecc5517cfea5522c27a9801f.tar.bz2
trackermap-web-6c0eece6465ec148ecc5517cfea5522c27a9801f.zip
Implement geofence selection
Diffstat (limited to 'modern/src/map/MapGeofenceEdit.js')
-rw-r--r--modern/src/map/MapGeofenceEdit.js19
1 files changed, 18 insertions, 1 deletions
diff --git a/modern/src/map/MapGeofenceEdit.js b/modern/src/map/MapGeofenceEdit.js
index 22f91dfa..045eddc2 100644
--- a/modern/src/map/MapGeofenceEdit.js
+++ b/modern/src/map/MapGeofenceEdit.js
@@ -1,5 +1,6 @@
import 'mapbox-gl/dist/mapbox-gl.css';
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
+import maplibregl from 'maplibre-gl';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import theme from '@mapbox/mapbox-gl-draw/src/lib/theme';
import { useEffect } from 'react';
@@ -35,7 +36,7 @@ const draw = new MapboxDraw({
}],
});
-const MapGeofenceEdit = () => {
+const MapGeofenceEdit = ({ selectedGeofenceId }) => {
const dispatch = useDispatch();
const navigate = useNavigate();
@@ -136,6 +137,22 @@ const MapGeofenceEdit = () => {
});
}, [geofences]);
+ useEffect(() => {
+ if (selectedGeofenceId) {
+ const feature = draw.get(selectedGeofenceId);
+ let { coordinates } = feature.geometry;
+ if (Array.isArray(coordinates[0][0])) {
+ [coordinates] = coordinates;
+ }
+ const bounds = coordinates.reduce(
+ (bounds, coordinate) => bounds.extend(coordinate),
+ new maplibregl.LngLatBounds(coordinates[0], coordinates[0]),
+ );
+ const canvas = map.getCanvas();
+ map.fitBounds(bounds, { padding: Math.min(canvas.width, canvas.height) * 0.1 });
+ }
+ }, [selectedGeofenceId]);
+
return null;
};