require(["esri/smartMapping/symbology/support/colorRamps"], (colorRamps) => { /* code goes here */ });
import * as colorRamps from "@arcgis/core/smartMapping/symbology/support/colorRamps.js";
esri/smartMapping/symbology/support/colorRamps
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. | colorRamps | |
| ColorRamp | Returns the color ramp available in the smartMapping color schemes matching the given name. | colorRamps | |
| ColorRamp[] | Returns the color ramps available in the smartMapping color schemes matching the given tags. | colorRamps | |
| String[] | Returns the names of all color ramps available in the smartMapping color schemes. | colorRamps |
Method Details
-
Returns all color ramps available in smartMapping color schemes.
ReturnsType 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
MethodbyName(name){ColorRamp} -
Returns the color ramp available in the smartMapping color schemes matching the given name.
Parametername StringThe name of the desired color ramp.
ReturnsType 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);
-
Returns the color ramps available in the smartMapping color schemes matching the given tags.
ParametersSpecificationparams ObjectSee the table below for details of each parameter that may be passed to this function.
Specificationoptional 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
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
ReturnsExample// returns all bright red color ramps available in the JS API const ramps = colorRamps.byTag({ includedTags: [ "reds", "bright" ] });
-
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().
ReturnsType 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
-
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 associated with the color ramp.
An array of five colors intended for displaying a continuous color ramp.
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.