From e3cacc4570637c690213b2f5db2d228a97557a2b Mon Sep 17 00:00:00 2001 From: mluena Date: Tue, 16 Jan 2024 11:24:22 +0100 Subject: [PATCH 1/3] protected areas map fly --- src/containers/map/location-pop-up/index.tsx | 25 ++++++++++++++++++-- src/containers/map/mobile/legend/index.tsx | 8 ------- 2 files changed, 23 insertions(+), 10 deletions(-) diff --git a/src/containers/map/location-pop-up/index.tsx b/src/containers/map/location-pop-up/index.tsx index de7159d03..3fad6ad64 100644 --- a/src/containers/map/location-pop-up/index.tsx +++ b/src/containers/map/location-pop-up/index.tsx @@ -60,6 +60,23 @@ const LocationPopUP = ({ } }, [setLocationBounds, push, queryParams, locations, feature]); + const handleClickProtectedArea = useCallback(() => { + const { ISO3, NAME } = info.protectedArea; + const location = locations.data?.find((l) => { + return l.iso === ISO3 && l.location_type === 'wdpa' && l.name === NAME; + }); + + if (location) { + const bbox = turfBbox(location.bounds); + + if (bbox) { + setLocationBounds(bbox as typeof locationBounds); + } + + push(`/wpda/${location.iso}/${queryParams ? `?${queryParams}` : ''}`, null); + } + }, [setLocationBounds, push, queryParams, locations, info]); + return (
{info.protectedArea && (
-
+
+ {info.protectedArea.ORIG_NAME} diff --git a/src/containers/map/mobile/legend/index.tsx b/src/containers/map/mobile/legend/index.tsx index 6faf26b8a..20789046c 100644 --- a/src/containers/map/mobile/legend/index.tsx +++ b/src/containers/map/mobile/legend/index.tsx @@ -1,7 +1,5 @@ import { useCallback, useState } from 'react'; -import { useRouter } from 'next/router'; - import cn from 'lib/classnames'; import { activeLayersAtom } from 'store/layers'; @@ -11,8 +9,6 @@ import { FaArrowDown, FaArrowUp } from 'react-icons/fa6'; import { useRecoilState } from 'recoil'; import { MAP_LEGENDS, WIDGETS } from 'containers/datasets'; -import { useLocation } from 'containers/datasets/locations/hooks'; -import type { LocationTypes } from 'containers/datasets/locations/types'; import Helper from 'containers/guide/helper'; import { LAYERS } from 'containers/layers/constants'; import WidgetWrapper from 'containers/widget'; @@ -33,10 +29,6 @@ import OPACITY_SVG from 'svgs/legend/opacity.svg?sprite'; import SHOW_SVG from 'svgs/legend/show.svg?sprite'; const Legend = () => { - const { - query: { params }, - } = useRouter(); - const [activeLayers, setActiveLayers] = useRecoilState(activeLayersAtom); const [isOpen, setIsOpen] = useState(false); From 53a62df5d67d4351377b329a4db690b4879ee3eb Mon Sep 17 00:00:00 2001 From: mluena Date: Wed, 17 Jan 2024 12:10:58 +0100 Subject: [PATCH 2/3] drawing test --- src/containers/datasets/restoration/overview/hooks.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/containers/datasets/restoration/overview/hooks.tsx b/src/containers/datasets/restoration/overview/hooks.tsx index 76ed98303..0ce9b79f1 100644 --- a/src/containers/datasets/restoration/overview/hooks.tsx +++ b/src/containers/datasets/restoration/overview/hooks.tsx @@ -1,5 +1,3 @@ -import type { SourceProps, LayerProps } from 'react-map-gl'; - import { useRouter } from 'next/router'; import { numberFormat } from 'lib/format'; From 5a85efdbc5bdd3a7ba0512f52e9c35bebb265bb0 Mon Sep 17 00:00:00 2001 From: mluena Date: Wed, 17 Jan 2024 15:14:38 +0100 Subject: [PATCH 3/3] drawing test --- src/containers/map/index.tsx | 1 + src/containers/map/location-pop-up/index.tsx | 60 +++++++++++++------- 2 files changed, 42 insertions(+), 19 deletions(-) diff --git a/src/containers/map/index.tsx b/src/containers/map/index.tsx index e939aff14..730065f4f 100644 --- a/src/containers/map/index.tsx +++ b/src/containers/map/index.tsx @@ -400,6 +400,7 @@ const MapContainer = ({ mapId }: { mapId: string }) => { isEmpty(iucnEcoregionPopUp?.popupInfo) && isEmpty(restorationPopUp?.popupInfo), })} + onClose={() => removePopup('location')} nonExpansible={ isEmpty(iucnEcoregionPopUp?.popupInfo) && isEmpty(restorationPopUp?.popupInfo) } diff --git a/src/containers/map/location-pop-up/index.tsx b/src/containers/map/location-pop-up/index.tsx index 3fad6ad64..8fda3ce80 100644 --- a/src/containers/map/location-pop-up/index.tsx +++ b/src/containers/map/location-pop-up/index.tsx @@ -13,13 +13,17 @@ import { useRecoilState } from 'recoil'; import { useLocations } from 'containers/datasets/locations/hooks'; +import Icon from 'components/icon'; import { WIDGET_SUBTITLE_STYLE } from 'styles/widgets'; import type { LocationPopUp } from 'types/map'; +import CLOSE_SVG from 'svgs/ui/close.svg?sprite'; + const LocationPopUP = ({ locationPopUpInfo, nonExpansible, className, + onClose, }: { locationPopUpInfo: { info: LocationPopUp; @@ -27,6 +31,7 @@ const LocationPopUP = ({ }; nonExpansible: boolean; className?: string; + onClose: () => void; }) => { const [open, setOpen] = useState(nonExpansible); const [locationBounds, setLocationBounds] = useRecoilState(locationBoundsAtom); @@ -57,6 +62,7 @@ const LocationPopUP = ({ } push(`/country/${location.iso}/${queryParams ? `?${queryParams}` : ''}`, null); + onClose(); } }, [setLocationBounds, push, queryParams, locations, feature]); @@ -73,19 +79,25 @@ const LocationPopUP = ({ setLocationBounds(bbox as typeof locationBounds); } - push(`/wpda/${location.iso}/${queryParams ? `?${queryParams}` : ''}`, null); + push(`/wdpa/${location.location_id}/${queryParams ? `?${queryParams}` : ''}`, null); + onClose(); } }, [setLocationBounds, push, queryParams, locations, info]); return (
+
{info.protectedArea && ( -
- - - {info.protectedArea.ORIG_NAME} +
+ + Protected area -
+ )} )}