Added reset button

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 (
+    <>
+      <SelectorButton onClick={onReset}>
+        <CollecticonArrowLoop title='Upload geoJSON' meaningful />
+      </SelectorButton>
+    </>
+  );
+}
+
+export default function ResetAoIControl() {
+  useThemedControl(
+    () => {
+      return <ResetAoI />;
+    },
+    {
+      position: 'top-left'
+    }
+  );
+  return null;
+}

app/scripts/components/common/map/hooks/use-maps.ts

@@ -18,6 +18,6 @@ export default function useMaps() {
   return {
     main,
     compared,
-    current
+    current,
   };
 }

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}
       />
       <CustomAoIControl onConfirm={onCustomAoIConfirm} />
+      <ResetAoIControl />
       <GeocoderControl />
       <MapOptionsControl
         projection={projection}