require(["esri/smartMapping/symbology/color"], (colorSchemes) => { /* code goes here */ });
import * as colorSchemes from "@arcgis/core/smartMapping/symbology/color.js";
esri/smartMapping/symbology/color
Object containing helper methods for generating optimal symbols for data-driven color visualizations. The getSchemes() method is used to generate symbol properties best suited to the given geometry type and basemap.
Method Overview
Name | Return Type | Summary | Object |
---|---|---|---|
Clones a color scheme object. | color | ||
Flips the colors in reverse order of the input color scheme. | color | ||
Returns all schemes matching the given color ramp. | color | ||
Returns a color scheme with the provided name. | color | ||
Returns a primary scheme and secondary schemes defining symbol properties for data-driven color visualizations in a FeatureLayer. | color | ||
Returns an array of color schemes with the provided tags. | color | ||
Returns metadata for the available themes. | color |
Method Details
-
cloneScheme
cloneScheme(scheme){ColorScheme}
-
Clones a color scheme object.
Parameterscheme ColorSchemeThe color scheme object to clone.
ReturnsType Description ColorScheme Returns a clone of the given color scheme object. Example// clones the primary scheme returned from the getSchemes() method let colorScheme = primaryScheme.clone();
-
flipColors
flipColors(scheme){ColorScheme}
-
Flips the colors in reverse order of the input color scheme.
Parameterscheme ColorSchemeThe color scheme to reverse.
ReturnsType Description ColorScheme Returns the input color scheme with its colors in reverse order. Example// reverses the order of colors in a primary scheme // obtained from the getSchemes() method let flippedScheme = colorSchemes.flipColors(primaryScheme);
-
getMatchingSchemes
getMatchingSchemes(params){ColorScheme[]}
Since: ArcGIS Maps SDK for JavaScript 4.9color since 4.2, getMatchingSchemes added at 4.9. -
Returns all schemes matching the given color ramp.
ParametersSpecificationparams ObjectSee the table below for details of each parameter that may be passed to this function.
Specificationtheme StringThe name of the theme from which to get color schemes.
Possible Values:"high-to-low"|"above-and-below"|"centered-on"|"extremes"
An array of colors used to match with schemes for the given theme.
geometryType StringThe geometry type of the layer for which the color scheme will be applied.
worldScale BooleanoptionalIndicates whether 3D volumetric symbols will be used in the visualization.
view SceneViewoptionalThe SceneView instance used to calculate the suggested sizes of the symbols. This is required for 3D visualizations.
ReturnsType Description ColorScheme[] An array of color schemes that match the given colors.
-
getSchemeByName
getSchemeByName(params){ColorScheme}
Since: ArcGIS Maps SDK for JavaScript 4.12color since 4.2, getSchemeByName added at 4.12. -
Returns a color scheme with the provided name.
ParametersSpecificationparams ObjectSee the table below for details of each parameter that may be passed to this function.
Specificationname StringThe name of the scheme to retrieve.
optional The basemap to pair with the visualization. This value indicates the best symbol colors for visualizing features against the given basemap.
basemapTheme StringoptionalIf you have a non-Esri basemap (e.g. a VectorTileLayer basemap with a custom style) or no basemap at all, use this parameter to indicate whether the background of the visualization is
light
ordark
.Possible Values:"light"|"dark"
geometryType StringThe geometry type of the features to visualize.
Possible Values:"point"|"multipoint"|"polyline"|"polygon"|"mesh"|"multipatch"
theme StringThe theme determines which values will be emphasized in the continuous ramp and the map. Possible values are listed below.
Value Description Example high-to-low High values are emphasized with strong colors. above-and-below Values centered around a given point (e.g. the average) are visualized with weak colors while other values are emphasized with strong colors. centered-on Values centered around a given point (e.g. the average) are emphasized with strong colors while other values are visualized with weak colors. extremes High and low values are emphasized with strong colors. All others are visualized with weak colors. Possible Values:"high-to-low"|"above-and-below"|"centered-on"|"extremes"
view SceneViewoptionalThe SceneView instance in which the scheme will be used. This property is only applicable when the scheme will be used in conjunction with 3D symbols.
worldScale BooleanoptionalIndicates if the size units of the scheme will be in meters. This should be
true
when the scheme is intended for 3D volumetric symbology. Aview
must be provided if this property is set totrue
.ReturnsType Description ColorScheme Returns the color scheme with the given name. Example// Returns the Red Extremes 1 scheme const redExtremesScheme = colorSchemes.getSchemeByName({ basemapTheme: "light", geometryType: featureLayer.geometryType, theme: "extremes", name: "Red Extremes 1" });
-
getSchemes
getSchemes(params){ColorSchemes}
-
Returns a primary scheme and secondary schemes defining symbol properties for data-driven color visualizations in a FeatureLayer. The
basemap
parameter determines the color schemes of the graphics used to visualize each feature. ThegeometryType
determines which type of symbol to return.ParametersSpecificationparams ObjectSee the table below for details of each parameter that may be passed to this function.
Specificationoptional The Esri basemap to pair with the visualization. This value indicates the best symbol colors for visualizing features against the given basemap. If you have a non-Esri basemap (e.g. a VectorTileLayer basemap with a custom style) or no basemap at all, then use the
basemapTheme
parameter instead of this parameter.basemapTheme StringoptionalIf you have a non-Esri basemap (e.g. a VectorTileLayer basemap with a custom style) or no basemap at all, use this parameter to indicate whether the background of the visualization is
light
ordark
.Possible Values:"light"|"dark"
geometryType StringThe geometry type of the features to visualize.
Possible Values:"point"|"multipoint"|"polyline"|"polygon"|"mesh"|"multipatch"
theme StringThe theme determines which values will be emphasized in the continuous ramp and the map. Possible values are listed below.
Value Description Example high-to-low High values are emphasized with strong colors. above-and-below Values centered around a given point (e.g. the average) are visualized with weak colors while other values are emphasized with strong colors. centered-on Values centered around a given point (e.g. the average) are emphasized with strong colors while other values are visualized with weak colors. extremes High and low values are emphasized with strong colors. All others are visualized with weak colors. Possible Values:"high-to-low"|"above-and-below"|"centered-on"|"extremes"
view SceneViewoptionalThe SceneView instance in which the scheme will be used. This property is only applicable when the scheme will be used in conjunction with 3D symbols.
worldScale BooleanoptionalIndicates if the size units of the scheme will be in meters. This should be
true
when the scheme is intended for 3D volumetric symbology. Aview
must be provided if this property is set totrue
.ReturnsType Description ColorSchemes Returns an object containing the optimal color scheme to use for the given basemap and secondary schemes that may also be used. Example// gets the primary scheme for the features of the given geometry type and basemap let schemes = colorSchemes.getSchemes({ basemap: map.basemap, geometryType: featureLayer.geometryType, theme: "extremes" }); // the best default scheme for the layer, basemap, and theme let primaryScheme = schemes.primaryScheme;
-
getSchemesByTag
getSchemesByTag(params){ColorScheme[]}
Since: ArcGIS Maps SDK for JavaScript 4.12color since 4.2, getSchemesByTag added at 4.12. -
Returns an array of color schemes with the provided tags. These schemes define symbol properties for data-driven color visualizations in any layer that can be rendered with a Renderer.
ParametersSpecificationparams ObjectSee the table below for details of each parameter that may be passed to this function.
Specificationoptional When provided, only schemes 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 | 3d
optional When provided, only schemes 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 | 3d
optional The basemap to pair with the visualization. This value indicates the best symbol colors for visualizing features against the given basemap.
basemapTheme StringoptionalIf you have a non-Esri basemap (e.g. a VectorTileLayer basemap with a custom style) or no basemap at all, use this parameter to indicate whether the background of the visualization is
light
ordark
.Possible Values:"light"|"dark"
geometryType StringThe geometry type of the features to visualize.
Possible Values:"point"|"multipoint"|"polyline"|"polygon"|"mesh"|"multipatch"
theme StringThe theme determines which values will be emphasized in the continuous ramp and the map. Possible values are listed below.
Value Description Example high-to-low High values are emphasized with strong colors. above-and-below Values centered around a given point (e.g. the average) are visualized with weak colors while other values are emphasized with strong colors. centered-on Values centered around a given point (e.g. the average) are emphasized with strong colors while other values are visualized with weak colors. extremes High and low values are emphasized with strong colors. All others are visualized with weak colors. Possible Values:"high-to-low"|"above-and-below"|"centered-on"|"extremes"
view SceneViewoptionalThe SceneView instance in which the scheme will be used. This property is only applicable when the scheme will be used in conjunction with 3D symbols.
worldScale BooleanoptionalIndicates if the size units of the scheme will be in meters. This should be
true
when the scheme is intended for 3D volumetric symbology. Aview
must be provided if this property is set totrue
.ReturnsType Description ColorScheme[] Returns an array of color schemes either including or excluding the provided tags. Example// Returns all the red color schemes that are color-blind friendly let schemes = colorSchemes.getSchemesByTag({ basemap: map.basemap, geometryType: featureLayer.geometryType, theme: "extremes", includedTags: [ "reds", "colorblind-friendly" ] });
-
Returns metadata for the available themes. If a basemap is provided, returns themes that work best with the given basemap.
Parameteroptional The Esri basemap string or object that will be used with the returned theme(s).
Returns
Type Definitions
-
ColorScheme
ColorScheme ColorSchemeForPoint |ColorSchemeForPolyline |ColorSchemeForPolygon |ColorSchemeForMesh
-
Properties defining the symbology scheme used to visualize features with attribute data-driven color.
-
Properties defining the symbology scheme used to visualize mesh features with attribute data-driven color.
- Properties
-
name String
The unique name of the scheme.
Tags associated with the scheme.
id StringThe unique id of the color scheme to use in the visualization. The id is assigned based on the following template:
<themeName>/<basemapName>/<schemeName>
.theme StringIndicates which values will be emphasized in the continuous ramp and the map. Possible values are listed below.
Value Description Example high-to-low High values are emphasized with strong colors. above-and-below Values centered around a given point (e.g. the average) are visualized with weak colors while other values are emphasized with strong colors. centered-on Values centered around a given point (e.g. the average) are emphasized with strong colors while other values are visualized with weak colors. extremes High and low values are emphasized with strong colors. All others are visualized with weak colors. The continuous color ramp that will be applied to the visualization.
noDataColor ColorThe color of the symbol used to indicate features with no data and features that are out of range.
Predefined classed color schemes to use for the visualization.
opacity NumberThe opacity of the symbol.
-
Properties defining the symbology scheme used to visualize point features with attribute data-driven color.
- Properties
-
name String
The unique name of the scheme.
Tags associated with the scheme.
id StringThe unique id of the color scheme to use in the visualization. The id is assigned based on the following template:
<themeName>/<basemapName>/<schemeName>
.theme StringIndicates which values will be emphasized in the continuous ramp and the map. Possible values are listed below.
Value Description Example high-to-low High values are emphasized with strong colors. above-and-below Values centered around a given point (e.g. the average) are visualized with weak colors while other values are emphasized with strong colors. centered-on Values centered around a given point (e.g. the average) are emphasized with strong colors while other values are visualized with weak colors. extremes High and low values are emphasized with strong colors. All others are visualized with weak colors. The continuous color ramp that will be applied to the visualization.
noDataColor ColorThe color of the symbol used to indicate features with no data and features that are out of range.
Predefined classed color schemes to use for the visualization.
outline ObjectProperties for defining the outline of the symbol.
size NumberThe default size of the symbol in pixels or points.
opacity NumberThe opacity of the symbol.
-
Properties defining the symbology scheme used to visualize polygon features with attribute data-driven color.
- Properties
-
name String
The unique name of the scheme.
Tags associated with the scheme.
id StringThe unique id of the color scheme to use in the visualization. The id is assigned based on the following template:
<themeName>/<basemapName>/<schemeName>
.theme StringIndicates which values will be emphasized in the continuous ramp and the map. Possible values are listed below.
Value Description Example high-to-low High values are emphasized with strong colors. above-and-below Values centered around a given point (e.g. the average) are visualized with weak colors while other values are emphasized with strong colors. centered-on Values centered around a given point (e.g. the average) are emphasized with strong colors while other values are visualized with weak colors. extremes High and low values are emphasized with strong colors. All others are visualized with weak colors. The continuous color ramp that will be applied to the visualization.
noDataColor ColorThe color of the symbol used to indicate features with no data and features that are out of range.
Predefined classed color schemes to use for the visualization.
outline ObjectProperties for defining the outline of the symbol.
opacity NumberThe opacity of the symbol.
-
Properties defining the symbology scheme used to visualize polyline features with attribute data-driven color.
- Properties
-
name String
The unique name of the scheme.
Tags associated with the scheme.
id StringThe unique id of the color scheme to use in the visualization. The id is assigned based on the following template:
<themeName>/<basemapName>/<schemeName>
.theme StringIndicates which values will be emphasized in the continuous ramp and the map. Possible values are listed below.
Value Description Example high-to-low High values are emphasized with strong colors. above-and-below Values centered around a given point (e.g. the average) are visualized with weak colors while other values are emphasized with strong colors. centered-on Values centered around a given point (e.g. the average) are emphasized with strong colors while other values are visualized with weak colors. extremes High and low values are emphasized with strong colors. All others are visualized with weak colors. The continuous color ramp that will be applied to the visualization.
noDataColor ColorThe color of the symbol used to indicate features with no data and features that are out of range.
Predefined classed color schemes to use for the visualization.
width NumberThe default width of the symbol in pixels or points.
opacity NumberThe opacity of the symbol.
-
The return object of the getSchemes() method.
- Properties
-
primaryScheme ColorScheme
The color scheme best suited for the given basemap and geometry type.
secondarySchemes ColorScheme[]Additional color schemes that may be used to visualize data of the given geometry type overlaid on the given basemap.
basemapId StringThe ID of the basemap associated with the given schemes.
basemapTheme StringIndicates whether the average basemap color is
light
ordark
.
-
Describes a theme that pairs well with the given basemaps. See the table below for more details of the properties in this object.