Skip to content

Commit

Permalink
added planet dates
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidsingal
davidsingal committed Mar 18, 2024
1 parent 2a8fe8a commit 0fbc13f
Show file tree
Hide file tree
Showing 3 changed files with 229 additions and 46 deletions.
192 changes: 168 additions & 24 deletions client/src/containers/analysis-eudr/map/basemap/component.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down Expand Up @@ -82,10 +139,7 @@ const EUDRBasemapControl = () => {
/>
</div>
<div className="flex items-center pl-1">
<Switch
checked={basemap === 'light'}
onCheckedChange={(checked) => handleBasemap('light', checked)}
/>
<Switch checked={basemap === 'light'} onCheckedChange={handleLightBasemap} />
</div>
</div>
</div>
Expand Down Expand Up @@ -116,24 +170,66 @@ const EUDRBasemapControl = () => {
/>
</div>
<div className="flex items-center pl-1">
<Switch
checked={basemap === 'planet'}
onCheckedChange={(checked) => handleBasemap('planet', checked)}
/>
<Switch checked={planetLayer.active} onCheckedChange={handlePlanetLayer} />
</div>
</div>
</div>
<div className="text-xs text-gray-500">
Monthly high resolution basemaps (tropics)
</div>
{planetLayer.active && (
<div className="flex items-center space-x-1 text-xs text-gray-500">
<div>Year</div>
<Select
defaultValue={planetLayer.year.toString()}
value={planetLayer.year.toString()}
onValueChange={handlePlanetLayerYear}
>
<SelectTrigger className="h-auto w-auto rounded-sm border border-navy-400 py-1 pl-2 pr-1 text-xs text-navy-400">
<SelectValue />
</SelectTrigger>
<SelectContent>
{YEARS.map((year) => (
<SelectItem key={`planet-year-option-${year}`} value={year.toString()}>
{year}
</SelectItem>
))}
</SelectContent>
</Select>
<div>Month</div>
<Select
defaultValue={planetLayer.month.toString()}
value={planetLayer.month.toString()}
onValueChange={handlePlanetLayerMonth}
>
<SelectTrigger className="h-auto w-auto rounded-sm border border-navy-400 py-1 pl-2 pr-1 text-xs text-navy-400">
<SelectValue />
</SelectTrigger>
<SelectContent>
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(
(month) =>
(planetLayer.year < currentDate.getFullYear() ||
month <= currentDate.getMonth()) && (
<SelectItem
key={`planet-year-option-${month}`}
value={month.toString()}
>
{monthFormatter(month.toString())}
</SelectItem>
),
)}
</SelectContent>
</Select>
</div>
)}
</div>
</div>
</div>
</div>

<div className="bg-gray-100 p-4 text-xs">
{basemap !== 'planet' && <div>Select satellite basemap for image comparison option.</div>}
{basemap === 'planet' && (
{!planetLayer.active && <div>Select satellite basemap for image comparison option.</div>}
{planetLayer.active && (
<div className="flex items-start space-x-2">
<div className="aspect-square shrink-0 cursor-pointer rounded-lg border border-white bg-white shadow-lg transition-colors duration-200 ease-in-out hover:border-navy-400 hover:bg-green-50">
<div className="pointer-events-none h-full w-full p-px">
Expand All @@ -156,13 +252,61 @@ const EUDRBasemapControl = () => {
/>
</div>
<div className="flex items-center pl-1">
<Switch checked={planetCompare} onCheckedChange={handleSetCompare} />
<Switch
checked={planetCompareLayer.active}
onCheckedChange={handlePlanetCompareLayer}
/>
</div>
</div>
</div>
<div className="text-xs text-gray-500">
Monthly high resolution basemaps (tropics)
</div>
{planetCompareLayer.active && (
<div className="flex items-center space-x-1 text-xs text-gray-500">
<div>Year</div>
<Select
defaultValue={planetCompareLayer.year.toString()}
value={planetCompareLayer.year.toString()}
onValueChange={handlePlanetCompareLayerYear}
>
<SelectTrigger className="h-auto w-auto rounded-sm border border-navy-400 py-1 pl-2 pr-1 text-xs text-navy-400">
<SelectValue />
</SelectTrigger>
<SelectContent>
{YEARS.map((year) => (
<SelectItem key={`planet-year-option-${year}`} value={year.toString()}>
{year}
</SelectItem>
))}
</SelectContent>
</Select>
<div>Month</div>
<Select
defaultValue={planetCompareLayer.month.toString()}
value={planetCompareLayer.month.toString()}
onValueChange={handlePlanetCompareLayerMonth}
>
<SelectTrigger className="h-auto w-auto rounded-sm border border-navy-400 py-1 pl-2 pr-1 text-xs text-navy-400">
<SelectValue />
</SelectTrigger>
<SelectContent>
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(
(month) =>
(planetCompareLayer.year < currentDate.getFullYear() ||
month <= currentDate.getMonth()) && (
<SelectItem
key={`planet-year-option-${month}`}
value={month.toString()}
>
{monthFormatter(month.toString())}
</SelectItem>
),
)}
</SelectContent>
</Select>
</div>
)}
</div>
</div>
)}
Expand Down
42 changes: 28 additions & 14 deletions client/src/containers/analysis-eudr/map/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand All @@ -35,7 +38,8 @@ setDefaultCredentials({
const EUDRMap = () => {
const {
basemap,
planetCompare,
planetLayer,
planetCompareLayer,
supplierLayer,
contextualLayers,
filters: { suppliers, materials, origins, plots },
Expand All @@ -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
Expand All @@ -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 },
Expand All @@ -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 },
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -234,7 +248,7 @@ const EUDRMap = () => {
>
<Map reuseMaps mapStyle={MAP_STYLES.terrain} styleDiffing={false} />
</DeckGL>
{planetCompare && (
{planetCompareLayer.active && (
<div className="pointer-events-none absolute left-0 top-1/2 z-20 h-[2px] w-full bg-white" />
)}
</div>
Expand Down
Loading

0 comments on commit 0fbc13f

Please sign in to comment.