diff --git a/src/containers/map/index.tsx b/src/containers/map/index.tsx index 1baa425f5..a4e83fdfb 100644 --- a/src/containers/map/index.tsx +++ b/src/containers/map/index.tsx @@ -382,6 +382,7 @@ const MapContainer = ({ mapId }: { mapId: string }) => { {!isEmpty(locationPopUp?.info) ? ( removePopup('location')} className={cn({ '!w-[360px] rounded-3xl pt-6': isEmpty(iucnEcoregionPopUp?.popupInfo) && diff --git a/src/containers/map/location-pop-up/index.tsx b/src/containers/map/location-pop-up/index.tsx index 310e89513..95bae0aa6 100644 --- a/src/containers/map/location-pop-up/index.tsx +++ b/src/containers/map/location-pop-up/index.tsx @@ -13,12 +13,16 @@ 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, + onClose, className, }: { locationPopUpInfo: { @@ -26,6 +30,7 @@ const LocationPopUP = ({ feature: MapboxGeoJSONFeature; }; nonExpansible: boolean; + onClose: () => void; className?: string; }) => { const [open, setOpen] = useState(nonExpansible); @@ -62,12 +67,18 @@ const LocationPopUP = ({ return (
+