From 0fbc13fd8fe7c3130e35b828184ada4afbff30e6 Mon Sep 17 00:00:00 2001 From: David Inga Date: Mon, 18 Mar 2024 13:11:23 +0100 Subject: [PATCH] added planet dates --- .../analysis-eudr/map/basemap/component.tsx | 192 +++++++++++++++--- .../analysis-eudr/map/component.tsx | 42 ++-- client/src/store/features/eudr/index.ts | 41 +++- 3 files changed, 229 insertions(+), 46 deletions(-) diff --git a/client/src/containers/analysis-eudr/map/basemap/component.tsx b/client/src/containers/analysis-eudr/map/basemap/component.tsx index 1889a43d4..a0ab257b7 100644 --- a/client/src/containers/analysis-eudr/map/basemap/component.tsx +++ b/client/src/containers/analysis-eudr/map/basemap/component.tsx @@ -1,43 +1,100 @@ -import { useCallback, useEffect } from 'react'; +import { useCallback, useEffect, useMemo } from 'react'; import Image from 'next/image'; +import { format } from 'date-fns'; import LayersData from '../layers.json'; import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setBasemap, setPlanetCompare } from '@/store/features/eudr'; +import { setBasemap, setPlanetLayer, setPlanetCompareLayer } from '@/store/features/eudr'; import { Switch } from '@/components/ui/switch'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; import InfoModal from '@/components/legend/item/info-modal'; import DefaultImage from '@/components/map/controls/basemap/images/default1.png'; import SatelliteImage from '@/components/map/controls/basemap/images/satellite1.png'; import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; -import type { EUDRState } from '@/store/features/eudr'; +const monthFormatter = (date: string) => format(date, 'MMM'); + +const YEARS = [2020, 2021, 2022, 2023, 2024]; const EUDRBasemapControl = () => { + const currentDate = useMemo(() => new Date(), []); const dispatch = useAppDispatch(); - const { basemap, planetCompare } = useAppSelector((state) => state.eudr); + const { basemap, planetLayer, planetCompareLayer } = useAppSelector((state) => state.eudr); const basemapData = LayersData.find((layer) => layer.id === 'planet-data'); - const handleBasemap = useCallback( - (basemapValue: EUDRState['basemap'], checked: boolean) => { - if (basemapValue === 'light') { - dispatch(setBasemap(checked ? 'light' : 'planet')); - } else if (basemapValue === 'planet') { - dispatch(setBasemap(checked ? 'planet' : 'light')); + const handleLightBasemap = useCallback( + (checked: boolean) => { + if (checked) { + dispatch(setBasemap('light')); + dispatch(setPlanetLayer({ active: !checked })); + } else { + dispatch(setBasemap('planet')); + dispatch(setPlanetLayer({ active: checked })); } }, [dispatch], ); - const handleSetCompare = useCallback( + const handlePlanetLayer = useCallback( + (checked: boolean) => { + dispatch(setBasemap('planet')); + dispatch(setPlanetLayer({ active: checked })); + if (!checked) dispatch(setPlanetCompareLayer({ active: false })); + }, + [dispatch], + ); + + const handlePlanetLayerYear = useCallback( + (year: string) => { + const nextYear = Number(year); + if (nextYear === currentDate.getFullYear()) { + // If the year is the current year, set the month to the previous month + dispatch(setPlanetLayer({ month: currentDate.getMonth() })); + } + dispatch(setPlanetLayer({ year: nextYear })); + }, + [dispatch, currentDate], + ); + + const handlePlanetLayerMonth = useCallback( + (month: string) => { + dispatch(setPlanetLayer({ month: Number(month) })); + }, + [dispatch], + ); + + const handlePlanetCompareLayerYear = useCallback( + (year: string) => { + dispatch(setPlanetCompareLayer({ year: Number(year) })); + }, + [dispatch], + ); + + const handlePlanetCompareLayerMonth = useCallback( + (month: string) => { + dispatch(setPlanetCompareLayer({ month: Number(month) })); + }, + [dispatch], + ); + + const handlePlanetCompareLayer = useCallback( (checked: boolean) => { - dispatch(setPlanetCompare(checked)); + dispatch(setPlanetCompareLayer({ active: checked })); }, [dispatch], ); useEffect(() => { - if (basemap === 'light') dispatch(setPlanetCompare(false)); + if (basemap === 'light') { + dispatch(setPlanetCompareLayer({ active: false })); + } }, [basemap, dispatch]); return ( @@ -82,10 +139,7 @@ const EUDRBasemapControl = () => { />
- handleBasemap('light', checked)} - /> +
@@ -116,24 +170,66 @@ const EUDRBasemapControl = () => { />
- handleBasemap('planet', checked)} - /> +
Monthly high resolution basemaps (tropics)
+ {planetLayer.active && ( +
+
Year
+ +
Month
+ +
+ )}
- {basemap !== 'planet' &&
Select satellite basemap for image comparison option.
} - {basemap === 'planet' && ( + {!planetLayer.active &&
Select satellite basemap for image comparison option.
} + {planetLayer.active && (
@@ -156,13 +252,61 @@ const EUDRBasemapControl = () => { />
- +
Monthly high resolution basemaps (tropics)
+ {planetCompareLayer.active && ( +
+
Year
+ +
Month
+ +
+ )}
)} diff --git a/client/src/containers/analysis-eudr/map/component.tsx b/client/src/containers/analysis-eudr/map/component.tsx index a79a5edce..9131ca3ab 100644 --- a/client/src/containers/analysis-eudr/map/component.tsx +++ b/client/src/containers/analysis-eudr/map/component.tsx @@ -6,6 +6,7 @@ import { MapView } from '@deck.gl/core/typed'; import { TileLayer } from '@deck.gl/geo-layers/typed'; import { CartoLayer, setDefaultCredentials, MAP_TYPES, API_VERSIONS } from '@deck.gl/carto/typed'; import { useParams } from 'next/navigation'; +import { format } from 'date-fns'; import ZoomControl from './zoom'; import LegendControl from './legend'; @@ -18,6 +19,8 @@ import { formatNumber } from '@/utils/number-format'; import type { PickingInfo, MapViewState } from '@deck.gl/core/typed'; +const monthFormatter = (date: string) => format(date, 'MM'); + const DEFAULT_VIEW_STATE: MapViewState = { ...INITIAL_VIEW_STATE, latitude: -8.461844239054608, @@ -35,7 +38,8 @@ setDefaultCredentials({ const EUDRMap = () => { const { basemap, - planetCompare, + planetLayer, + planetCompareLayer, supplierLayer, contextualLayers, filters: { suppliers, materials, origins, plots }, @@ -56,7 +60,7 @@ const EUDRMap = () => { }); // Supplier plot layer - const layer: GeoJsonLayer = new GeoJsonLayer({ + const eudrSupplierLayer: GeoJsonLayer = new GeoJsonLayer({ id: 'full-plots-layer', data: plotGeometries.data, // Styles @@ -75,13 +79,17 @@ const EUDRMap = () => { opacity: supplierLayer.opacity, }); - const planetLayer = new TileLayer({ + const basemapPlanetLayer = new TileLayer({ id: 'top-planet-monthly-layer', - data: 'https://tiles.planet.com/basemaps/v1/planet-tiles/global_monthly_2020_12_mosaic/gmap/{z}/{x}/{y}.png?api_key=PLAK6679039df83f414faf798ba4ad4530db', + data: `https://tiles.planet.com/basemaps/v1/planet-tiles/global_monthly_${ + planetLayer.year + }_${monthFormatter( + planetLayer.month.toString(), + )}_mosaic/gmap/{z}/{x}/{y}.png?api_key=PLAK6679039df83f414faf798ba4ad4530db`, minZoom: 0, maxZoom: 20, tileSize: 256, - visible: true, + visible: planetLayer.active, renderSubLayers: (props) => { const { bbox: { west, south, east, north }, @@ -95,13 +103,17 @@ const EUDRMap = () => { }, }); - const planetCompareLayer = new TileLayer({ + const basemapPlanetCompareLayer = new TileLayer({ id: 'bottom-planet-monthly-layer', - data: 'https://tiles.planet.com/basemaps/v1/planet-tiles/global_monthly_2024_02_mosaic/gmap/{z}/{x}/{y}.png?api_key=PLAK6679039df83f414faf798ba4ad4530db', + data: `https://tiles.planet.com/basemaps/v1/planet-tiles/global_monthly_${ + planetCompareLayer.year + }_${monthFormatter( + planetCompareLayer.month.toString(), + )}_mosaic/gmap/{z}/{x}/{y}.png?api_key=PLAK6679039df83f414faf798ba4ad4530db`, minZoom: 0, maxZoom: 20, tileSize: 256, - visible: true, + visible: planetCompareLayer.active, renderSubLayers: (props) => { const { bbox: { west, south, east, north }, @@ -196,17 +208,19 @@ const EUDRMap = () => { onViewStateChange={({ viewState }) => setViewState(viewState as MapViewState)} controller={{ dragRotate: false }} layers={[ - basemap === 'planet' && !planetCompare ? [planetLayer] : null, - basemap === 'planet' && planetCompare ? [planetLayer, planetCompareLayer] : null, + basemap === 'planet' && !planetCompareLayer.active ? [basemapPlanetLayer] : null, + basemap === 'planet' && planetCompareLayer.active + ? [basemapPlanetLayer, basemapPlanetCompareLayer] + : null, forestCoverLayer, deforestationLayer, raddLayer, - layer, + eudrSupplierLayer, ]} layerFilter={({ layer, viewport }) => { - return !planetCompare || viewport.id.startsWith(layer.id.split('-')[0]); + return !planetCompareLayer.active || viewport.id.startsWith(layer.id.split('-')[0]); }} - {...(planetCompare + {...(planetCompareLayer.active ? { views: [ new MapView({ @@ -234,7 +248,7 @@ const EUDRMap = () => { > - {planetCompare && ( + {planetCompareLayer.active && (
)}
diff --git a/client/src/store/features/eudr/index.ts b/client/src/store/features/eudr/index.ts index ccbdb6390..82b3b0410 100644 --- a/client/src/store/features/eudr/index.ts +++ b/client/src/store/features/eudr/index.ts @@ -13,6 +13,7 @@ type LayerConfiguration = { dateFrom?: string; dateTo?: string; date?: string; + month?: number; year?: number; }; @@ -30,7 +31,8 @@ export type EUDRState = { }; // map basemap: 'light' | 'planet'; - planetCompare: boolean; + planetLayer: LayerConfiguration; + planetCompareLayer: LayerConfiguration; supplierLayer: LayerConfiguration; contextualLayers: Record; }; @@ -48,7 +50,6 @@ export const initialState: EUDRState = { }, }, basemap: 'light', - planetCompare: false, supplierLayer: { active: true, opacity: 1, @@ -70,6 +71,16 @@ export const initialState: EUDRState = { dateTo: '2024-07-27', }, }, + planetLayer: { + active: false, + month: 12, + year: 2020, + }, + planetCompareLayer: { + active: false, + month: 2, + year: 2024, + }, }; export const EUDRSlice = createSlice({ @@ -91,13 +102,12 @@ export const EUDRSlice = createSlice({ ...state, basemap: action.payload, }), - setPlanetCompare: (state, action: PayloadAction) => ({ - ...state, - planetCompare: action.payload, - }), setSupplierLayer: (state, action: PayloadAction) => ({ ...state, - supplierLayer: action.payload, + supplierLayer: { + ...state.supplierLayer, + ...action.payload, + }, }), setContextualLayer: ( state, @@ -112,6 +122,20 @@ export const EUDRSlice = createSlice({ }, }, }), + setPlanetLayer: (state, action: PayloadAction) => ({ + ...state, + planetLayer: { + ...state.planetLayer, + ...action.payload, + }, + }), + setPlanetCompareLayer: (state, action: PayloadAction) => ({ + ...state, + planetCompareLayer: { + ...state.planetCompareLayer, + ...action.payload, + }, + }), }, }); @@ -119,9 +143,10 @@ export const { setViewBy, setFilters, setBasemap, - setPlanetCompare, setSupplierLayer, setContextualLayer, + setPlanetLayer, + setPlanetCompareLayer, } = EUDRSlice.actions; export const eudr = (state: RootState) => state['eudr'];