• esri/smartMapping
    • symbology/support

colorRamps

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

This module provides convenience methods for querying color ramps (arrays of colors) used in the smart mapping color symbology module.

See also

Method Overview

Name Return Type Summary Object
ColorRamp[]

Returns all color ramps available in smartMapping color schemes.

more details
colorRamps
ColorRamp

Returns the color ramp available in the smartMapping color schemes matching the given name.

more details
colorRamps
ColorRamp[]

Returns the color ramps available in the smartMapping color schemes matching the given tags.

more details
colorRamps
String[]

Returns the names of all color ramps available in the smartMapping color schemes.

more details
colorRamps

Method Details

all(){ColorRamp[]}

Returns all color ramps available in smartMapping color schemes.

Returns
Type Description
ColorRamp[] An array of all color ramps available in the smartMapping color schemes.
Examples
// returns all 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(name){ColorRamp}

Returns the color ramp available in the smartMapping color schemes 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.
Example
// returns the colors of the Flower Field color ramp
const flowerFieldRamp = colorRamps.byName("Flower Field");
const colorRamp = symbolUtils.renderColorRampPreviewHTML(flowerFieldRamp.colors, {
  align: "horizontal"
});
body.appendChild(colorRamp);
byTag(params){ColorRamp[]}

Returns the color ramps available in the smartMapping color schemes matching the given tags.

Parameters
Specification
params Object

See the table below for details of each parameter that may be passed to this function.

Specification
includedTags String[]
optional

When provided, only ramps containing all the matching tags will be returned.

Known Tags: light | dark | reds | yellows | oranges | greens | blues | purples | pinks | browns | grays | bright | subdued | colorblind-friendly | diverging | sequential | categorical | heatmap | 3d

excludedTags String[]
optional

When provided, only ramps missing all the provided tags will be returned.

Known Tags: light | dark | reds | yellows | oranges | greens | blues | purples | pinks | browns | grays | bright | subdued | colorblind-friendly | diverging | sequential | categorical | heatmap | 3d

Returns
Type Description
ColorRamp[] The color ramps matching the given tags.
Example
// returns all bright red color ramps available in the JS API
const ramps = colorRamps.byTag({
  includedTags: [ "reds", "bright" ]
});
names(){String[]}

Returns the names of all color ramps available in the smartMapping color schemes. Any of the returned names can be used to query for color schemes using colorSchemes.getSchemeByName() or the color ramp using byName().

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

Type Definitions

ColorRamp

Defines a ramp of colors to use for visualizing data in a chart, Renderer, or ColorVariable.

Properties
name String

The unique name of the color ramp.

tags String[]

Tags associated with the color ramp.

colors Color[]

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

colorsForClassBreaks Object[]

Contains an array of ramps ranging in size from 1 color to 10 colors. All ramps are part of the same color scheme, but provide a different number of colors depending on the requirements of the ramp needed for the visualization.

Specification
colors Color[]

An array of 1 to 10 colors intended for displaying as a ramp with distinct or unique colors.

numClasses Number

The number of classes or colors used in the ramp of discrete colors.

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