Merge pull request #2401 from eurodatacube/reccap-layercontrol-xcube

Enable colormap and value stretch selection for RECCAP2 amazon data cube data
eurodatacube · Nov 23, 2023 · 856bbec · 856bbec
2 parents 0043517 + 85f3266
commit 856bbec
Show file tree

Hide file tree

Showing 6 changed files with 203 additions and 61 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@chenfengyuan/vue-countdown": "^1.1.5",
-    "@eox/layercontrol": "^0.9.0",
+    "@eox/layercontrol": "^0.11.1",
     "@turf/difference": "^6.5.0",
     "axios": "^0.21.1",
     "chart.js": "2.9.3",

diff --git a/app/src/components/map/LayerControl.vue b/app/src/components/map/LayerControl.vue
@@ -24,6 +24,7 @@
     <eox-layercontrol
       :for="'#' + mapId "
       :titleProperty.prop="'name'"
+      :tools.prop="['config', 'opacity', 'sort']"
       class="pointerEvents">
     </eox-layercontrol>
   </v-card>

diff --git a/app/src/components/map/layers.js b/app/src/components/map/layers.js
@@ -553,6 +553,7 @@ export function createLayerFromConfig(config, map, _options = {}) {
     minZoom: typeof config.minZoom !== 'undefined' ? config.minZoom : 1,
     visible: config.visible,
     layerControlOptional: config.layerControlOptional,
+    layerConfig: config.layerConfig,
   });
   if (config.drawnAreaLimitExtent || config?.features?.drawnAreaLimitExtent) {
     const areaUpdate = (time, drawnArea, configUpdate, l) => {

diff --git a/app/src/config/layers.js b/app/src/config/layers.js
@@ -216,3 +216,112 @@ export const overlayLayers = Object.freeze({
     },
   },
 });
+
+export const xcubeViewerColormaps = [
+  'magma',
+  'inferno',
+  'plasma',
+  'viridis',
+  'cividis',
+  'Blues',
+  'BuGn',
+  'BuPu',
+  'GnBu',
+  'Greens',
+  'Greys',
+  'OrRd',
+  'Oranges',
+  'PuBu',
+  'PuBuGn',
+  'PuRd',
+  'Purples',
+  'RdPu',
+  'Reds',
+  'YlGn',
+  'YlGnBu',
+  'YlOrBr',
+  'YlOrRd',
+  'Wistia',
+  'afmhot',
+  'autumn',
+  'binary',
+  'bone',
+  'cool',
+  'copper',
+  'gist_gray',
+  'gist_heat',
+  'gist_yarg',
+  'gray',
+  'hot',
+  'pink',
+  'spring',
+  'summer',
+  'winter',
+  'BrBG',
+  'PRGn',
+  'PiYG',
+  'PuOr',
+  'RdBu',
+  'RdGy',
+  'RdYlBu',
+  'RdYlGn',
+  'Spectral',
+  'bwr',
+  'coolwarm',
+  'seismic',
+  'Accent',
+  'Dark2',
+  'Paired',
+  'Pastel1',
+  'Pastel2',
+  'Set1',
+  'Set2',
+  'Set3',
+  'tab10',
+  'tab20',
+  'tab20b',
+  'tab20c',
+  'twilight',
+  'twilight_shifted',
+  'hsv',
+  'reg_map',
+  'thermal',
+  'haline',
+  'solar',
+  'ice',
+  'gray',
+  'oxy',
+  'deep',
+  'dense',
+  'algae',
+  'matter',
+  'turbid',
+  'speed',
+  'amp',
+  'tempo',
+  'rain',
+  'phase',
+  'topo',
+  'balance',
+  'delta',
+  'curl',
+  'diff',
+  'tarn',
+  'turbo',
+  'CMRmap',
+  'brg',
+  'cubehelix',
+  'flag',
+  'gist_earth',
+  'gist_ncar',
+  'gist_rainbow',
+  'gist_stern',
+  'gnuplot',
+  'gnuplot2',
+  'jet',
+  'nipy_spectral',
+  'ocean',
+  'prism',
+  'rainbow',
+  'terrain',
+];
diff --git a/app/src/config/trilateral.js b/app/src/config/trilateral.js
@@ -8,7 +8,7 @@ import { DateTime } from 'luxon';
 import {
   simplifiedshTimeFunction, shTimeFunction, shS2TimeFunction, shWeeklyTimeFunction,
 } from '@/utils';
-import { baseLayers, overlayLayers } from '@/config/layers';
+import { baseLayers, overlayLayers, xcubeViewerColormaps } from '@/config/layers';
 import availableDates from '@/config/data_dates.json';
 import locations from '@/config/locations.json';
 import {
@@ -1076,6 +1076,37 @@ const createRECCAP2Config = (indicatorCode, name, variable, vmin, vmax, cbar, ti
       inputData: [''],
       yAxis,
       display: {
+        layerConfig: {
+          schema: {
+            type: 'object',
+            properties: {
+              vminmax: {
+                title: 'Value stretch',
+                type: 'object',
+                properties: {
+                  vmin: {
+                    type: 'number',
+                    minimum: vmin,
+                    maximum: vmax,
+                    format: 'range',
+                  },
+                  vmax: {
+                    type: 'number',
+                    minimum: vmin,
+                    maximum: vmax,
+                    format: 'range',
+                  },
+                },
+                format: 'minmax',
+              },
+              cbar: {
+                title: 'Colorbar',
+                type: 'string',
+                enum: xcubeViewerColormaps,
+              },
+            },
+          },
+        },
         presetView: {
           type: 'FeatureCollection',
           features: [{