nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

Find more posts tagged with

Accepted answers

BillMitchell

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

All comments

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

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

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

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.