topic Re: Use pre-defined color ramps with Raster (Stretch Renderer) in ArcGIS JavaScript Maps SDK Questions

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

BillMitchell — Mon, 31 Mar 2025 15:28:04 GMT

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?

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

Noah-Sager — Mon, 31 Mar 2025 16:40:15 GMT

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.html

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#renderer

Hope this helps!

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

BillMitchell — Mon, 31 Mar 2025 18:01:40 GMT

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.html#stretchType).

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

UndralBatsukh — Tue, 01 Apr 2025 15:24:39 GMT

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.

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

BillMitchell — Tue, 01 Apr 2025 17:12:52 GMT

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, });