Use pre-defined color ramps with Raster (Stretch Renderer)

[BillMitchell]

I have some cloud-optimized geotiffs (COGs) with elevation data that I'd like to display using the pre-defined color ramps (for instance, "Blue and Brown 1") and using custom min/max values set by the user.

Unfortunately, this type of functionality seems to be completely undocumented---or, where it is documented, the documentation no longer applies.  I was able to find a forum post where they did roughly what I want to do, but that no longer works with the Javascript API v4.32.

In my mind, this should be a relatively simple task:

const renderer = new RasterStretchRenderer({
  colorRampName: "Blue and Brown 1",
  type: "min-max",
  min: 123,
  max: 456,
  layer: myLayer
});

So what's the obvious solution that I'm missing, which isn't pointed out in the ImageryTileLayer documentation?

[Noah-Sager]

Hi @BillMitchell, thanks for posting your question here. In the post you referenced, the solution was to use a specific renderer, the RasterStretchRenderer.
https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-RasterStretchRenderer.h...

In your code, you create a new renderer with an unsupported type:

type: "min-max"

These are the supported renderer type values:
https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-Renderer.html#type

And here is the renderer doc for the layers of interest:
https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-ImageryLayer.html#renderer
https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-ImageryTileLayer.html#rend...

Hope this helps!

[BillMitchell]

Sorry, I was coming up with the properties via pseudo-code.  By 'type' I meant 'stretchType', for which "min-max" is an accepted value (https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-RasterStretchRenderer.h...).

[UndralBatsukh]

Hi there, 

I think you are asking how to set colorRamp on RasterStretchRenderer. Correct me if I am wrong. 

You may find convenience methods found in colorRamps module. For example byName() method returns predefined color ramp based on the one of the system color ramps. You can get the names of predefined color ramps by calling names method. This sample takes advantage of colorRamps module and you can use the same technique to create the colorRamps for the RasterStretchRenderer as shown below. 

function changeColorRamp(name) {
  const colors = colorRamps.byName(name);
  return colorRamps.createColorRamp(colors);
}

let colorRamp = changeColorRamp("Elevation #1");

// set the shaded relief renderer parameters
const renderer = new RasterShadedReliefRenderer({
  altitude: 45,
  azimuth: 315,
  hillshadeType,
  zFactor: 1,
  scalingType: "adjusted",
  colorRamp
});

I definitely agree that the documentation could be better.  We will add a link to colorRamps module in RasterStretchRenderer.colorRamp description and add a code snippet.

[BillMitchell · Accepted solution]

Okay, thanks to the hints from @UndralBatsukh I was able to piece this together.

The sample referred to is this one: https://developers.arcgis.com/javascript/latest/sample-code/layers-imagery-renderer/

There was also an important distinction between the regular (symbology) color ramps module and the raster color ramps module.

Here's the relevant code:

import Color from "@arcgis/core/Color.js";
import * as rasterColorRamps from "@arcgis/core/smartMapping/raster/support/colorRamps.js";
import RasterStretchRenderer from "@arcgis/core/renderers/RasterStretchRenderer.js";

let colors = rasterColorRamps.byName("Blue and Brown 1")?.colors;
// colors could be undefined/null (if name doesn't exist)
// so we need to protect against that with a default
if (!colors){
  colors = [new Color("#6b2600ff"), new Color("#b59273ff"), new Color("#fffee6ff"),
            new Color("#809298ff"), new Color("#002649ff")];
}
const colorRamp = rasterColorRamps.createColorRamp({colors: colors});
const renderer = new RasterStretchRenderer({
  colorRamp: colorRamp,
  stretchType: "min-max",
  dynamicRangeAdjustment: true,
});