colorRamps | References | ArcGIS Maps SDK for JavaScript

import { all, names, byName, createColorRamp, getColorRampName } from "@arcgis/core/smartMapping/raster/support/colorRamps.js";

const { all, names, byName, createColorRamp, getColorRampName } = await $arcgis.import("@arcgis/core/smartMapping/raster/support/colorRamps.js");

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 module:esri/smartMapping/raster/color/renderers modules.

See also

Sample - ImageryTileLayer - shaded relief renderer

Type definitions

RasterColorRampDefinition

Type definition

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

name

Property

Type: string

The unique name of the color ramp.

colors

Property

Type: Color[]

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

CreateColorRampOptions

Type definition

colors

Property

Type: Color[]

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

algorithm

Property

Type: AlgorithmicColorRamp["algorithm"] | undefined

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.

Default value: cie-lab

RasterColorRampNameInfo

Type definition

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

name

Property

Type: string

The unique name of the color ramp.

inverted

Property

Type: boolean

Indicates if the ramp's colors are inverted.

Functions

all

Function

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

Signature: all (): RasterColorRampDefinition[]

Returns: RasterColorRampDefinition[]
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);
});

names

Function

Returns the names of all raster color ramps.

Signature: names (): string[]

Returns: string[]
An array of all raster color ramp names.

Example

// returns all color ramp names available in the JS API
const rampNames = colorRamps.names();

byName

Function

Returns the color ramp matching the given name.

See also

names()

Signature: byName (name: string): RasterColorRampDefinition | null | undefined

Parameters

Parameter	Type	Description	Required
name	string	The name of the desired color ramp.

Returns: RasterColorRampDefinition | null | undefined
The color ramp matching the given name.

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

Function

Creates a raster color ramp from a list of colors.

See also

Signature: createColorRamp (options: CreateColorRampOptions): MultipartColorRamp | AlgorithmicColorRamp | null | undefined

Parameters

Parameter	Type	Description	Required
options	CreateColorRampOptions	Options for creating a raster color ramp with the following properties:

Returns: MultipartColorRamp | AlgorithmicColorRamp | null | undefined
Returns the raster color ramp given an input array of colors.

getColorRampName

Function

Returns a raster color ramp's name.

Signature: getColorRampName (colorRamp: MultipartColorRamp | AlgorithmicColorRamp): RasterColorRampNameInfo | null | undefined

Parameters

Parameter	Type	Description	Required
colorRamp	MultipartColorRamp \| AlgorithmicColorRamp	The raster color ramp from which to get the name.

Returns: RasterColorRampNameInfo | null | undefined
Returns the color ramp name and whether it is inverted.