diff options
| -rw-r--r-- | modern/package.json | 1 | ||||
| -rw-r--r-- | modern/src/MainPage.js | 2 | ||||
| -rw-r--r-- | modern/src/map/GeofenceMap.js | 25 |
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; |