colorRamps

AMD: require(["esri/smartMapping/raster/support/colorRamps"], (rasterColorRamps) => { /* code goes here */ });
ESM: import * as rasterColorRamps from "@arcgis/core/smartMapping/raster/support/colorRamps.js";
Object: esri/smartMapping/raster/support/colorRamps
Since: ArcGIS Maps SDK for JavaScript 4.29

This module provides convenience methods for querying color ramps (arrays of colors) used for raster renderers in the esri/smartMapping/raster/color/renderers modules.

Method Overview

Name Return Type Summary Object

Returns all color ramps designed for raster renderers, each as an array of colors.

colorRamps

Returns the color ramp matching the given name.

colorRamps

Creates a raster color ramp from a list of colors.

colorRamps

Returns a raster color ramp's name.

colorRamps

Returns the names of all raster color ramps.

colorRamps

Method Details

all

Method
all(){ColorRamp[]}

Returns all color ramps designed for raster renderers, each as an array of colors.

Returns
Type Description
ColorRamp[] An array of all color ramps available for visualizing raster data.
Examples
// returns all raster color ramps available in the JS API
const ramps = colorRamps.all();
// Renders all color ramps as continuous color ramps in the body of the html
const ramps = colorRamps.all();

ramps.forEach( ramp => {
  const colorRamp = symbolUtils.renderColorRampPreviewHTML(ramp.colors, {
    align: "horizontal"
  });
  body.appendChild(colorRamp);
});

byName

Method
byName(name){ColorRamp}

Returns the color ramp matching the given name.

Parameter
name String

The name of the desired color ramp.

Returns
Type Description
ColorRamp The color ramp matching the given name.
See also
Example
// returns the colors of the Elevation #1 color ramp
const elevationRamp = colorRamps.byName("Elevation #1");
const colorRampElement = symbolUtils.renderColorRampPreviewHTML(elevationRamp.colors, {
  align: "horizontal"
});
body.appendChild(colorRampElement);

createColorRamp

Method
createColorRamp(options){MultipartColorRamp |AlgorithmicColorRamp}

Creates a raster color ramp from a list of colors.

Parameters
Specification
options

Options for creating a raster color ramp with the following properties:

Specification
colors Color[]

An array of colors to convert to a multi-part or algorithmic color ramp.

algorithm String
optional
Default Value: cie-lab

The algorithm used to interpolate colors between stops.

Possible Value Description
cie-lab Blends the from and to colors without traversing the intervening hue space.
lab-lch The hue, saturation, value (hsv) algorithm is a linear traverse of colors between pairs: Color 1 H to Color 2 H, Color 1 S to Color 2 S, and Color 1 V to Color 2 V.
hsv The lab-lch algorithm is very similar to the cie-lab but does not seek the shortest path between colors.

Possible Values:"cie-lab"|"lab-lch"|"hsv"

Returns
Type Description
MultipartColorRamp | AlgorithmicColorRamp Returns the raster color ramp given an input array of colors.

getColorRampName

Method
getColorRampName(colorRamp){ColorRampName}

Returns a raster color ramp's name.

Parameter

The raster color ramp from which to get the name.

Returns
Type Description
ColorRampName Returns the color ramp name and whether it is inverted.

names

Method
names(){String[]}

Returns the names of all raster color ramps.

Returns
Type Description
String[] An array of all raster color ramp names.
Example
// returns all color ramp names available in the JS API
const rampNames = colorRamps.names();

Type Definitions

ColorRamp

Type Definition
ColorRamp

Defines a ramp of colors to use for visualizing raster data.

Properties
name String

The unique name of the color ramp.

colors Color[]

An array of colors intended for displaying a continuous color ramp.

ColorRampName

Type Definition
ColorRampName

The name of a color ramp and whether it is inverted.

Properties
name String

The unique name of the color ramp.

inverted Boolean

Indicates if the ramp's colors are inverted.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.