diff --git a/app/scripts/components/common/map/controls/aoi/reset-aoi-control.tsx b/app/scripts/components/common/map/controls/aoi/reset-aoi-control.tsx
new file mode 100644
index 000000000..158ee0575
--- /dev/null
+++ b/app/scripts/components/common/map/controls/aoi/reset-aoi-control.tsx
@@ -0,0 +1,51 @@
+import React, { useCallback, useContext, useEffect } from 'react';
+import { CollecticonArrowLoop } from '@devseed-ui/collecticons';
+import { Button, createButtonStyles } from '@devseed-ui/button';
+import styled from 'styled-components';
+import { themeVal } from '@devseed-ui/theme-provider';
+import useThemedControl from '../hooks/use-themed-control';
+import useMaps from '../../hooks/use-maps';
+
+const SelectorButton = styled(Button)`
+ &&& {
+ ${createButtonStyles({ variation: 'primary-fill', fitting: 'skinny' })}
+ background-color: ${themeVal('color.surface')};
+ &:hover {
+ background-color: ${themeVal('color.surface')};
+ }
+ & path {
+ fill: ${themeVal('color.base')};
+ }
+ }
+`;
+
+function ResetAoI() {
+ // This doesn't work as this Context is not reachable frome here :()
+ const { main } = useMaps();
+
+ const onReset = useCallback(() => {
+ const mbDraw = (main as any)?.instance?._drawControl;
+ if (!mbDraw) return;
+ mbDraw.trash();
+ }, [main]);
+
+ return (
+ <>
+
+
+
+ >
+ );
+}
+
+export default function ResetAoIControl() {
+ useThemedControl(
+ () => {
+ return ;
+ },
+ {
+ position: 'top-left'
+ }
+ );
+ return null;
+}
diff --git a/app/scripts/components/common/map/hooks/use-maps.ts b/app/scripts/components/common/map/hooks/use-maps.ts
index 3433fa1b8..0ab679a5d 100644
--- a/app/scripts/components/common/map/hooks/use-maps.ts
+++ b/app/scripts/components/common/map/hooks/use-maps.ts
@@ -18,6 +18,6 @@ export default function useMaps() {
return {
main,
compared,
- current
+ current,
};
}
diff --git a/app/scripts/components/exploration/components/map/index.tsx b/app/scripts/components/exploration/components/map/index.tsx
index 67e66da79..3fd3c7db1 100644
--- a/app/scripts/components/exploration/components/map/index.tsx
+++ b/app/scripts/components/exploration/components/map/index.tsx
@@ -21,6 +21,7 @@ import { useBasemap } from '$components/common/map/controls/hooks/use-basemap';
import DrawControl from '$components/common/map/controls/aoi';
import useAois from '$components/common/map/controls/hooks/use-aois';
import CustomAoIControl from '$components/common/map/controls/aoi/custom-aoi-control';
+import ResetAoIControl from '$components/common/map/controls/aoi/reset-aoi-control';
export function ExplorationMap(props: { comparing: boolean }) {
const [projection, setProjection] = useState(projectionDefault);
@@ -89,6 +90,7 @@ export function ExplorationMap(props: { comparing: boolean }) {
customFeatures={customAoIFeatures}
/>
+