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} /> +