Skip to content

Commit 53a8379

Browse files
Merge pull request #92 from Vizzuality/develop
Add layers, fix dataset layers sort and fix layer time options
2 parents 3777ada + 61630d2 commit 53a8379

File tree

12 files changed

+223
-21
lines changed

12 files changed

+223
-21
lines changed

client/src/components/map/provider.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,6 @@ export const useDeckMapboxOverlay = ({
144144
useEffect(() => {
145145
if (!layer) return;
146146
return () => {
147-
console.log("removeLayer", i);
148147
removeLayer(i);
149148
};
150149
}, [i, removeLayer]); // eslint-disable-line react-hooks/exhaustive-deps

client/src/containers/datasets/components/temporal/absolute.tsx

+16-6
Original file line numberDiff line numberDiff line change
@@ -24,20 +24,30 @@ const isCorrectTimeSelect = (timeSelect: unknown): timeSelect is [number, number
2424
timeSelect.every((t) => typeof t === "number")
2525
);
2626
};
27+
28+
const isCorrectTimeValues = (timeValues: unknown): timeValues is number[] => {
29+
return Array.isArray(timeValues) && timeValues.every((t) => typeof t === "number");
30+
};
2731
export const TemporalDatasetItem = ({ layer }: TemporalDatasetItemProps) => {
2832
const timeSelect = (layer?.attributes?.params_config as Record<string, unknown>[])?.find(
2933
(p) => p.key === "time-select",
3034
)?.default;
35+
const timeValues = (layer?.attributes?.params_config as Record<string, unknown>[])?.find(
36+
(p) => p.key === "time-values",
37+
)?.default;
3138
const defaultSelected = (layer?.attributes?.params_config as Record<string, unknown>[])?.find(
32-
(p) => p.key === "year",
39+
(p) => p.key === "startYear",
3340
)?.default;
3441

3542
const [layersSettings, setLayersSettings] = useSyncLayersSettings();
3643
const [layers] = useSyncLayers();
3744

38-
const options = isCorrectTimeSelect(timeSelect)
39-
? Array.from({ length: timeSelect[1] - timeSelect[0] + 1 }, (_, i) => timeSelect[0] + i)
40-
: undefined;
45+
const options =
46+
timeValues && isCorrectTimeValues(timeValues)
47+
? timeValues
48+
: isCorrectTimeSelect(timeSelect)
49+
? Array.from({ length: timeSelect[1] - timeSelect[0] + 1 }, (_, i) => timeSelect[0] + i)
50+
: undefined;
4151

4252
const layerSlug = layer?.attributes?.slug;
4353

@@ -48,13 +58,13 @@ export const TemporalDatasetItem = ({ layer }: TemporalDatasetItemProps) => {
4858
...prev,
4959
[layerSlug]: {
5060
...(prev ? prev[layerSlug] : {}),
51-
year: parseInt(value),
61+
startYear: parseInt(value),
5262
},
5363
};
5464
});
5565
};
5666

57-
const value = layerSlug && (layersSettings?.[layerSlug]?.year as string | undefined);
67+
const value = layerSlug && (layersSettings?.[layerSlug]?.startYear as string | undefined);
5868
const defaultValue = typeof defaultSelected === "number" ? `${defaultSelected}` : undefined;
5969
const isDisabled = !layerSlug || !layers?.includes(layerSlug);
6070

client/src/containers/datasets/components/temporal/changes.tsx

+22-10
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
SelectValue,
88
} from "@/components/ui/select";
99
import { useSyncLayers, useSyncLayersSettings } from "@/store/map";
10-
import { DefaultLayerComponent, LayerListResponseDataItem } from "@/types/generated/strapi.schemas";
10+
import { LayerListResponseDataItem } from "@/types/generated/strapi.schemas";
1111
import { CalendarDaysIcon } from "lucide-react";
1212
import { useTranslations } from "next-intl";
1313
import { useEffect, useMemo } from "react";
@@ -20,6 +20,10 @@ const isCorrectTimeSelect = (timeSelect: unknown): timeSelect is [number, number
2020
);
2121
};
2222

23+
const isCorrectTimeValues = (timeValues: unknown): timeValues is number[] => {
24+
return Array.isArray(timeValues) && timeValues.every((t) => typeof t === "number");
25+
};
26+
2327
type TemporalDatasetItemSelectProps = {
2428
value?: number | undefined;
2529
disabled?: boolean;
@@ -59,19 +63,27 @@ const TemporalDatasetItemSelect = ({
5963
};
6064

6165
const _getOptions = (params_config: unknown, start?: number, end?: number) => {
66+
const timeValues = (params_config as Record<string, unknown>[])?.find(
67+
(p) => p.key === "time-values",
68+
)?.default;
6269
const timeSelect = (params_config as Record<string, unknown>[])?.find(
6370
(p) => p.key === "time-select",
6471
)?.default;
6572

66-
return isCorrectTimeSelect(timeSelect)
67-
? Array.from({ length: timeSelect[1] - timeSelect[0] + 1 }, (_, i) => {
68-
const value = timeSelect[0] + i;
69-
return {
70-
value,
71-
disabled: (!!start && value <= Number(start)) || (!!end && value >= Number(end)),
72-
};
73-
})
74-
: [];
73+
return timeValues && isCorrectTimeValues(timeValues)
74+
? timeValues.map((value) => ({
75+
value,
76+
disabled: (!!start && value <= Number(start)) || (!!end && value >= Number(end)),
77+
}))
78+
: isCorrectTimeSelect(timeSelect)
79+
? Array.from({ length: timeSelect[1] - timeSelect[0] + 1 }, (_, i) => {
80+
const value = timeSelect[0] + i;
81+
return {
82+
value,
83+
disabled: (!!start && value <= Number(start)) || (!!end && value >= Number(end)),
84+
};
85+
})
86+
: [];
7587
};
7688

7789
const selectTypes = ["absolute", "changes"] as const;

client/src/containers/datasets/item.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,12 @@ const DatasetsItem = ({ attributes, className }: DatasetsItemProps) => {
4646
{
4747
query: {
4848
enabled: !!datasetLayers.length,
49+
select: (data) => ({
50+
...data,
51+
data: data.data?.sort(
52+
(a, b) => datasetLayers.indexOf(a.id) - datasetLayers.indexOf(b.id),
53+
),
54+
}),
4955
},
5056
},
5157
);

client/src/containers/map/layer-manager/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ const LayerManager = () => {
8484
*/}
8585
{LAYERS.map((l, i) => {
8686
const beforeId = i === 0 ? baseLayer : `${LAYERS[i - 1]}-layer`;
87+
8788
return (
8889
<LayerManagerItem
8990
key={l}

cloud_functions/earth_engine_tiler/src/geeAssets/common-styles-utils.ts

+15
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,19 @@ export const GriddedLivestockCommonStyles =
1111
'<ColorMapEntry color="#883886" quantity="5000" label="≤ 5,000" />' +
1212
'<ColorMapEntry color="#390147" quantity="300000" label="> 5,000" />' +
1313
'</ColorMap>' +
14+
'</RasterSymbolizer>'
15+
16+
export const GriddedLivestockTotalStyle =
17+
18+
'<RasterSymbolizer>' +
19+
'<ColorMap type="ramp" extended="false">' +
20+
'<ColorMapEntry color="#ffffff" quantity="0" label="0" />' +
21+
'<ColorMapEntry color="#b2ebf2" quantity="500" label="≤ 500" />' +
22+
'<ColorMapEntry color="#80deea" quantity="1000" label="≤ 1,000" />' +
23+
'<ColorMapEntry color="#68b0c3" quantity="5000" label="≤ 5,000" />' +
24+
'<ColorMapEntry color="#3f8b9c" quantity="10000" label="≤ 10,000" />' +
25+
'<ColorMapEntry color="#c766fc" quantity="50000" label="≤ 50,000" />' +
26+
'<ColorMapEntry color="#883886" quantity="100000" label="≤ 100,000" />' +
27+
'<ColorMapEntry color="#390147" quantity="10000000" label="> 100,000" />' +
28+
'</ColorMap>' +
1429
'</RasterSymbolizer>'
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { CategoricalDataset } from './earth-engine-dataset';
2+
import ee from '@google/earthengine';
3+
import { EarthEngineUtils } from "../earth-engine-utils";
4+
import { GriddedLivestockCommonStyles} from "./common-styles-utils";
5+
6+
export const GriddedLivestockChicken: CategoricalDataset = {
7+
assetPath: {
8+
default: "projects/gmvad-grass/assets/5_Ch_2015_Da"
9+
10+
},
11+
12+
bandName: 'b1',
13+
14+
sldStyles: GriddedLivestockCommonStyles,
15+
16+
17+
areYearsValid(startYear?: number, endYear?: number): boolean {
18+
// This Asset is static, and year selector is irrelevant
19+
return true;
20+
},
21+
22+
getEEAsset() {
23+
return ee.Image(this.assetPath.default);
24+
},
25+
26+
async getMapUrl(z, x, y) {
27+
const image = this.getEEAsset().select(this.bandName).sldStyle(this.sldStyles);
28+
const mapId = await EarthEngineUtils.getMapId(image);
29+
return ee.data.getTileUrl(mapId, x, y, z);
30+
},
31+
};
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { CategoricalDataset } from './earth-engine-dataset';
2+
import ee from '@google/earthengine';
3+
import { EarthEngineUtils } from "../earth-engine-utils";
4+
import { GriddedLivestockCommonStyles} from "./common-styles-utils";
5+
6+
export const GriddedLivestockDuck: CategoricalDataset = {
7+
assetPath: {
8+
default: "projects/gmvad-grass/assets/5_Dk_2015_Da"
9+
10+
},
11+
12+
bandName: 'b1',
13+
14+
sldStyles: GriddedLivestockCommonStyles,
15+
16+
17+
areYearsValid(startYear?: number, endYear?: number): boolean {
18+
// This Asset is static, and year selector is irrelevant
19+
return true;
20+
},
21+
22+
getEEAsset() {
23+
return ee.Image(this.assetPath.default);
24+
},
25+
26+
async getMapUrl(z, x, y) {
27+
const image = this.getEEAsset().select(this.bandName).sldStyle(this.sldStyles);
28+
const mapId = await EarthEngineUtils.getMapId(image);
29+
return ee.data.getTileUrl(mapId, x, y, z);
30+
},
31+
};
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { CategoricalDataset } from './earth-engine-dataset';
2+
import ee from '@google/earthengine';
3+
import { EarthEngineUtils } from "../earth-engine-utils";
4+
import { GriddedLivestockCommonStyles} from "./common-styles-utils";
5+
6+
export const GriddedLivestockPig: CategoricalDataset = {
7+
assetPath: {
8+
default: "projects/gmvad-grass/assets/5_Pg_2015_Da"
9+
10+
},
11+
12+
bandName: 'b1',
13+
14+
sldStyles: GriddedLivestockCommonStyles,
15+
16+
17+
areYearsValid(startYear?: number, endYear?: number): boolean {
18+
// This Asset is static, and year selector is irrelevant
19+
return true;
20+
},
21+
22+
getEEAsset() {
23+
return ee.Image(this.assetPath.default);
24+
},
25+
26+
async getMapUrl(z, x, y) {
27+
const image = this.getEEAsset().select(this.bandName).sldStyle(this.sldStyles);
28+
const mapId = await EarthEngineUtils.getMapId(image);
29+
return ee.data.getTileUrl(mapId, x, y, z);
30+
},
31+
};
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { CategoricalDataset } from './earth-engine-dataset';
2+
import ee from '@google/earthengine';
3+
import { EarthEngineUtils } from "../earth-engine-utils";
4+
import { GriddedLivestockBuffalo } from './gridded-livestock-buffalo';
5+
import { GriddedLivestockCattle } from './gridded-livestock-cattle';
6+
import { GriddedLivestockChicken } from './gridded-livestock-chicken';
7+
import { GriddedLivestockDuck } from './gridded-livestock-duck';
8+
import { GriddedLivestockGoat } from './gridded-livestock-goat';
9+
import { GriddedLivestockHorse } from './gridded-livestock-horse';
10+
import { GriddedLivestockPig } from './gridded-livestock-pig';
11+
import { GriddedLivestockSheep } from './gridded-livestock-sheep';
12+
import { GriddedLivestockTotalStyle } from "./common-styles-utils";
13+
14+
export const GriddedLivestockTotal: CategoricalDataset = {
15+
assetPath: {
16+
},
17+
bandName: 'b1',
18+
sldStyles: GriddedLivestockTotalStyle,
19+
20+
areYearsValid(startYear?: number, endYear?: number): boolean {
21+
// This Asset is static, and year selector is irrelevant
22+
return true;
23+
},
24+
25+
// Unmask(0) gives 0 to no data pixels so that they can be included in the sum
26+
getEEAsset() {
27+
const buffaloImage = ee.Image(GriddedLivestockBuffalo.assetPath.default).select(GriddedLivestockBuffalo.bandName).unmask(0);
28+
const cattleImage = ee.Image(GriddedLivestockCattle.assetPath.default).select(GriddedLivestockCattle.bandName).unmask(0);
29+
const chickenImage = ee.Image(GriddedLivestockChicken.assetPath.default).select(GriddedLivestockChicken.bandName).unmask(0);
30+
const duckImage = ee.Image(GriddedLivestockDuck.assetPath.default).select(GriddedLivestockDuck.bandName).unmask(0);
31+
const goatImage = ee.Image(GriddedLivestockGoat.assetPath.default).select(GriddedLivestockGoat.bandName).unmask(0);
32+
const horseImage = ee.Image(GriddedLivestockHorse.assetPath.default).select(GriddedLivestockHorse.bandName).unmask(0);
33+
const pigImage = ee.Image(GriddedLivestockPig.assetPath.default).select(GriddedLivestockPig.bandName).unmask(0);
34+
const sheepImage = ee.Image(GriddedLivestockSheep.assetPath.default).select(GriddedLivestockSheep.bandName).unmask(0);
35+
36+
// Sum all the images
37+
const totalImage = buffaloImage
38+
.add(cattleImage)
39+
.add(chickenImage)
40+
.add(duckImage)
41+
.add(goatImage)
42+
.add(horseImage)
43+
.add(pigImage)
44+
.add(sheepImage);
45+
46+
return totalImage;
47+
},
48+
49+
async getMapUrl(z, x, y) {
50+
const image = this.getEEAsset().sldStyle(this.sldStyles);
51+
const mapId = await EarthEngineUtils.getMapId(image);
52+
return ee.data.getTileUrl(mapId, x, y, z);
53+
},
54+
};

cloud_functions/earth_engine_tiler/src/index.ts

+11-3
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,14 @@ import {ModisNetPrimaryProductionChange} from './geeAssets/modis-net-primary-pro
88
import {AnthropogenicBiomes} from './geeAssets/anthropogenic-biomes';
99
import {LivestockProductionSystems} from './geeAssets/livestock-production-systems';
1010
import {ForestLoss} from './geeAssets/forest-loss';
11+
import {GriddedLivestockTotal} from './geeAssets/gridded-livestock-total';
12+
import {GriddedLivestockBuffalo} from './geeAssets/gridded-livestock-buffalo';
1113
import {GriddedLivestockCattle} from './geeAssets/gridded-livestock-cattle';
14+
import {GriddedLivestockChicken} from './geeAssets/gridded-livestock-chicken';
15+
import {GriddedLivestockDuck} from './geeAssets/gridded-livestock-duck';
1216
import {GriddedLivestockGoat} from './geeAssets/gridded-livestock-goat';
13-
import {GriddedLivestockHorse} from './geeAssets/gridded-livestock-horse';
14-
import {GriddedLivestockBuffalo} from './geeAssets/gridded-livestock-buffalo';
17+
import {GriddedLivestockHorse} from './geeAssets/gridded-livestock-horse';
18+
import {GriddedLivestockPig} from './geeAssets/gridded-livestock-pig';
1519
import {GriddedLivestockSheep} from './geeAssets/gridded-livestock-sheep';
1620
import {EarthEngineDataset} from "./geeAssets/earth-engine-dataset";
1721
import {TileRequestDTO, Tilesets} from "./tile-request.dto";
@@ -26,10 +30,14 @@ const assets: Record<Tilesets, EarthEngineDataset> = {
2630
[Tilesets.anthropogenic_biomes]: AnthropogenicBiomes,
2731
[Tilesets.livestock_production_systems]: LivestockProductionSystems,
2832
[Tilesets.forest_loss]: ForestLoss,
33+
[Tilesets.gridded_livestock_total]: GriddedLivestockTotal,
34+
[Tilesets.gridded_livestock_buffalo]: GriddedLivestockBuffalo,
2935
[Tilesets.gridded_livestock_cattle]: GriddedLivestockCattle,
36+
[Tilesets.gridded_livestock_chicken]: GriddedLivestockChicken,
37+
[Tilesets.gridded_livestock_duck]: GriddedLivestockDuck,
3038
[Tilesets.gridded_livestock_goat]: GriddedLivestockGoat,
3139
[Tilesets.gridded_livestock_horse]: GriddedLivestockHorse,
32-
[Tilesets.gridded_livestock_buffalo]: GriddedLivestockBuffalo,
40+
[Tilesets.gridded_livestock_pig]: GriddedLivestockPig,
3341
[Tilesets.gridded_livestock_sheep]: GriddedLivestockSheep,
3442
}
3543

cloud_functions/earth_engine_tiler/src/tile-request.dto.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,14 @@ export enum Tilesets {
77
anthropogenic_biomes = "anthropogenic_biomes",
88
livestock_production_systems = "livestock_production_systems",
99
forest_loss = "forest_loss",
10+
gridded_livestock_total = "gridded_livestock_total",
11+
gridded_livestock_buffalo = "gridded_livestock_buffalo",
1012
gridded_livestock_cattle = "gridded_livestock_cattle",
13+
gridded_livestock_chicken = "gridded_livestock_chicken",
14+
gridded_livestock_duck = "gridded_livestock_duck",
1115
gridded_livestock_goat = "gridded_livestock_goat",
1216
gridded_livestock_horse = "gridded_livestock_horse",
13-
gridded_livestock_buffalo = "gridded_livestock_buffalo",
17+
gridded_livestock_pig = "gridded_livestock_pig",
1418
gridded_livestock_sheep = "gridded_livestock_sheep"
1519
}
1620

0 commit comments

Comments
 (0)