From 8d32ac6e16c2b9ceb2a23edf0d6254d1e318c31b Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton.tananaev@gmail.com>
Date: Sat, 24 Oct 2020 22:24:23 -0700
Subject: Add geofence editing

---
 modern/package.json           |  1 +
 modern/src/MainPage.js        |  2 +-
 modern/src/map/GeofenceMap.js | 25 +++++++++++++++++++++++++
 3 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 modern/src/map/GeofenceMap.js

diff --git a/modern/package.json b/modern/package.json
index ff701a30..afba6a59 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 ada6c01b..de486b2f 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 00000000..bca4d204
--- /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;
-- 
cgit v1.2.3