aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-10-24 22:24:23 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2020-10-24 22:24:23 -0700
commit8d32ac6e16c2b9ceb2a23edf0d6254d1e318c31b (patch)
tree751d81e1807a13368b58f9e924fd3d0fd94b2ad3 /modern
parent5b8419500610e9a62a264819d7ed7857ac35ac69 (diff)
downloadetbsa-traccar-web-8d32ac6e16c2b9ceb2a23edf0d6254d1e318c31b.tar.gz
etbsa-traccar-web-8d32ac6e16c2b9ceb2a23edf0d6254d1e318c31b.tar.bz2
etbsa-traccar-web-8d32ac6e16c2b9ceb2a23edf0d6254d1e318c31b.zip
Add geofence editing
Diffstat (limited to 'modern')
-rw-r--r--modern/package.json1
-rw-r--r--modern/src/MainPage.js2
-rw-r--r--modern/src/map/GeofenceMap.js25
3 files changed, 27 insertions, 1 deletions
diff --git a/modern/package.json b/modern/package.json
index ff701a3..afba6a5 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -4,6 +4,7 @@
"private": true,
"dependencies": {
"@craco/craco": "^5.6.4",
+ "@mapbox/mapbox-gl-draw": "^1.2.0",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index ada6c01..de486b2 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -56,8 +56,8 @@ const MainPage = ({ width }) => {
<div className={classes.mapContainer}>
<ContainerDimensions>
<Map>
- <SelectedDeviceMap />
<PositionsMap />
+ <SelectedDeviceMap />
</Map>
</ContainerDimensions>
</div>
diff --git a/modern/src/map/GeofenceMap.js b/modern/src/map/GeofenceMap.js
new file mode 100644
index 0000000..bca4d20
--- /dev/null
+++ b/modern/src/map/GeofenceMap.js
@@ -0,0 +1,25 @@
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import { useEffect } from 'react';
+
+import { map } from './Map';
+
+const draw = new MapboxDraw({
+ displayControlsDefault: false,
+ controls: {
+ polygon: true,
+ trash: true,
+ },
+});
+
+const GeofenceMap = () => {
+ useEffect(() => {
+ const mm = map;
+ map.addControl(draw, 'top-left');
+ return () => map.removeControl(draw);
+ }, []);
+
+ return null;
+}
+
+export default GeofenceMap;