#605 Transform 32bit COGs (#606)

NASA-AMMOS · Dec 24, 2024 · 9e60c25 · 9e60c25
1 parent cf2a8b1
commit 9e60c25
Show file tree

Hide file tree

Showing 8 changed files with 253 additions and 26 deletions.
diff --git a/configure/src/core/Maker.js b/configure/src/core/Maker.js
@@ -602,7 +602,11 @@ const getComponent = (
             }}
           >
             {com.options.map((o) => {
-              return <MenuItem value={o}>{o.toUpperCase()}</MenuItem>;
+              return (
+                <MenuItem value={o}>
+                  {typeof o === "string" ? o.toUpperCase() : o}
+                </MenuItem>
+              );
             })}
           </Select>
         </FormControl>

diff --git a/configure/src/core/calls.js b/configure/src/core/calls.js
@@ -122,6 +122,10 @@ const c = {
     type: "GET",
     url: "titiler/tileMatrixSets",
   },
+  titiler_colormapNames: {
+    type: "GET",
+    url: "titiler/colorMaps",
+  },
 };
 
 function api(call, data, success, error) {

diff --git a/configure/src/core/injectables.js b/configure/src/core/injectables.js
@@ -2,14 +2,17 @@ import { calls } from "./calls";
 
 const injectablesDefaults = {
   TILE_MATRIX_SETS: ["WebMercatorQuad"],
+  COLORMAP_NAMES: ["viridis"],
 };
 // Initialize with reasonable defaults
 const injectables = {
   TILE_MATRIX_SETS: injectablesDefaults["TILE_MATRIX_SETS"],
+  COLORMAP_NAMES: injectablesDefaults["COLORMAP_NAMES"],
 };
 
 export const getInjectables = () => {
   getTileMatrixSets();
+  getColormapNames();
 };
 
 export const inject = (configJson) => {
@@ -62,3 +65,44 @@ function getTileMatrixSets() {
     );
   }
 }
+
+function getColormapNames() {
+  const injectableName = "COLORMAP_NAMES";
+  if (window.mmgisglobal.WITH_TITILER === "true") {
+    calls.api(
+      "titiler_colormapNames",
+      null,
+      (res) => {
+        // ... new Set removes duplicates
+        injectables[injectableName] = [
+          ...new Set(
+            injectablesDefaults["COLORMAP_NAMES"].concat(res.colorMaps)
+          ),
+        ];
+      },
+      (res) => {
+        console.warn(`Failed to query for ${injectableName}. Using defaults.`);
+        injectables[injectableName] = [
+          "gist_earth",
+          "gist_earth_r",
+          "gist_gray",
+          "gist_gray_r",
+          "gist_heat",
+          "gist_heat_r",
+          "gist_ncar",
+          "gist_ncar_r",
+          "gist_rainbow",
+          "gist_rainbow_r",
+          "gist_stern",
+          "gist_stern_r",
+          "gist_yarg",
+          "gist_yarg_r",
+          "terrain",
+          "terrain_r",
+          "viridis",
+          "viridis_r",
+        ];
+      }
+    );
+  }
+}
diff --git a/configure/src/metaconfigs/layer-tile-config.json b/configure/src/metaconfigs/layer-tile-config.json
@@ -84,6 +84,38 @@
           ]
         },
         {
+          "components": [
+            {
+              "field": "minZoom",
+              "name": "Minimum Zoom",
+              "description": "The lowest (smallest number) zoom level of the tile set.\nNote: This field can be automatically populate with 'Populate from XML'. 'Populate from XML' uses looks for a tilemapresource.xml in the tileset directory specified by the URL field.",
+              "type": "number",
+              "min": 0,
+              "step": 1,
+              "width": 3
+            },
+            {
+              "field": "maxNativeZoom",
+              "name": "Maximum Native Zoom",
+              "description": "The highest (largest number) zoom level of the tile set.\nNote: This field can be automatically populate with 'Populate from XML'. 'Populate from XML' uses looks for a tilemapresource.xml in the tileset directory specified by the URL field.",
+              "type": "number",
+              "min": 0,
+              "step": 1,
+              "width": 2
+            },
+            {
+              "field": "maxZoom",
+              "name": "Maximum Zoom",
+              "description": "The highest (largest number) zoom level to see in MMGIS. This value is at least as high as Maximum Native Zoom. This allows zooms level higher than that of the tileset. Instead of rendering new tile image, it scales them in instead.",
+              "type": "number",
+              "min": 0,
+              "step": 1,
+              "width": 3
+            }
+          ]
+        },
+        {
+          "name": "Cloud-Optimized GeoTiffs (COG)",
           "components": [
             {
               "field": "throughTileServer",
@@ -106,31 +138,34 @@
         {
           "components": [
             {
-              "field": "minZoom",
-              "name": "Minimum Zoom",
-              "description": "The lowest (smallest number) zoom level of the tile set.\nNote: This field can be automatically populate with 'Populate from XML'. 'Populate from XML' uses looks for a tilemapresource.xml in the tileset directory specified by the URL field.",
-              "type": "number",
-              "min": 0,
-              "step": 1,
-              "width": 3
+              "field": "cogTransform",
+              "name": "Transform COG",
+              "description": "Enable rescaling and coloring 32-bit COGs on the fly.",
+              "type": "switch",
+              "width": 3,
+              "defaultChecked": false
             },
             {
-              "field": "maxNativeZoom",
-              "name": "Maximum Native Zoom",
-              "description": "The highest (largest number) zoom level of the tile set.\nNote: This field can be automatically populate with 'Populate from XML'. 'Populate from XML' uses looks for a tilemapresource.xml in the tileset directory specified by the URL field.",
+              "field": "cogMin",
+              "name": "Minimum Pixel Data Value",
+              "description": "If using TiTiler, STAC and 32-bit COGs, the default minimum value for which to rescale.",
               "type": "number",
-              "min": 0,
-              "step": 1,
-              "width": 2
+              "width": 3
             },
             {
-              "field": "maxZoom",
-              "name": "Maximum Zoom",
-              "description": "The highest (largest number) zoom level to see in MMGIS. This value is at least as high as Maximum Native Zoom. This allows zooms level higher than that of the tileset. Instead of rendering new tile image, it scales them in instead.",
+              "field": "cogMax",
+              "name": "Maximum Pixel Data Value",
+              "description": "If using TiTiler, STAC and 32-bit COGs, the default maximum value for which to rescale.",
               "type": "number",
-              "min": 0,
-              "step": 1,
               "width": 3
+            },
+            {
+              "field": "cogColormap",
+              "name": "Colormap",
+              "description": "",
+              "type": "dropdown",
+              "width": 3,
+              "options": "{{COLORMAP_NAMES}}"
             }
           ]
         },

diff --git a/src/essence/Basics/Layers_/leaflet-tilelayer-middleware.js b/src/essence/Basics/Layers_/leaflet-tilelayer-middleware.js
@@ -22,7 +22,6 @@ var colorFilterExtension = {
 
         if (this.options.splitColonType === 'stac-collection') {
             let datetime
-
             if (this.options.endtime != null) {
                 if (this.options.starttime != null) {
                     datetime = `${this.options.starttime}/${this.options.endtime}`
@@ -38,6 +37,22 @@ var colorFilterExtension = {
                 url += `${
                     url.indexOf('?') === -1 ? '?' : '&'
                 }exitwhenfull=false&skipcovered=false`
+            if (this.options.cogMin != null && this.options.cogMax != null) {
+                url += `${url.indexOf('?') === -1 ? '?' : '&'}rescale=[${
+                    this.options.currentCogMin != null
+                        ? this.options.currentCogMin
+                        : this.options.cogMin
+                },${
+                    this.options.currentCogMax != null
+                        ? this.options.currentCogMax
+                        : this.options.cogMax
+                }]`
+                if (this.options.cogColormap != null) {
+                    url += `${
+                        url.indexOf('?') === -1 ? '?' : '&'
+                    }colormap_name=${this.options.cogColormap}`
+                }
+            }
         }
 
         url = url
@@ -161,7 +176,13 @@ var colorFilterExtension = {
         }
         img.src = url
     },
-    refresh: function (newUrl) {
+    refresh: function (newUrl, force, updateOptions) {
+        if (updateOptions) {
+            Object.keys(updateOptions).forEach((o) => {
+                this.options[o] = updateOptions[o]
+            })
+        }
+
         if (newUrl) this._url = newUrl
         if (this._map == null) return
         for (let key in this._tiles) {
@@ -170,7 +191,7 @@ var colorFilterExtension = {
                 const oldsrc = tile.el.src
                 const newsrc = this.getTileUrl(tile.coords)
 
-                if (oldsrc != newsrc) {
+                if (oldsrc != newsrc || force) {
                     //L.DomEvent.off(tile, 'load', this._tileOnLoad); ... this doesnt work!
                     this._refreshTileUrl(tile, newsrc)
                 }

diff --git a/src/essence/Basics/Map_/Map_.js b/src/essence/Basics/Map_/Map_.js
@@ -956,6 +956,11 @@ async function makeTileLayer(layerObj) {
             typeof layerObj.time === 'undefined'
                 ? null
                 : layerObj.time.customTimes,
+        cogMin: layerObj.cogMin,
+        currentCogMin: layerObj.currentCogMin,
+        cogMax: layerObj.cogMax,
+        currentCogMax: layerObj.currentCogMax,
+        cogColormap: layerObj.cogColormap,
         variables: layerObj.variables || {},
     })
 

diff --git a/src/essence/Tools/Layers/LayersTool.css b/src/essence/Tools/Layers/LayersTool.css
@@ -290,6 +290,28 @@
     top: -9px;
 }
 
+#layersTool .tileCogColormap > div {
+    position: relative;
+    margin-top: 2px;
+}
+#layersTool .tileCogColormap > div > div:first-child {
+    position: absolute;
+    left: 0;
+    mix-blend-mode: difference;
+}
+#layersTool .tileCogColormap > div > div:nth-child(2) {
+    position: absolute;
+    right: 5px;
+    letter-spacing: 1px;
+    text-transform: capitalize;
+    mix-blend-mode: difference;
+}
+#layersTool .tileCogColormap img {
+    width: 325px;
+    height: 28px;
+    margin-left: -12px;
+}
+
 #layersTool #layersToolList > li.download_on,
 #layersTool #layersToolList > li.gears_on {
     height: auto;
@@ -305,6 +327,7 @@
 
 #layersTool .reload,
 #layersTool .reset,
+#layersTool .resetCog,
 #layersTool .layerDownload,
 #layersTool .gears,
 #layersTool .locate,
@@ -333,13 +356,16 @@
 #layersTool .LayersToolInfo:hover {
     background: var(--color-k);
 }
-#layersTool .reset:hover {
+#layersTool .reset:hover,
+#layersTool .resetCog:hover {
     color: white;
 }
-#layersTool .reset {
+#layersTool .reset,
+#layersTool .resetCog {
     display: none;
 }
-#layersTool #layersToolList > li.gears_on .reset {
+#layersTool #layersToolList > li.gears_on .reset,
+#layersTool #layersToolList > li.gears_on .resetCog {
     display: block;
 }