require(["esri/renderers/smartMapping/creators/color"], function(colorRendererCreator) { /* code goes here */ });
Object: esri/renderers/smartMapping/creators/color
Since: ArcGIS API for JavaScript 4.2

This object contains helper methods for generating data-driven visualizations with continuous color based on a field value or expression from features in a Layer. The createContinuousRenderer() method generates a Renderer object that may be applied directly to a supported layer. This renderer contains a continuous color ramp with optimal colors based on the indicated basemap and mapped to specific break values based on the statistics of the indicated field or expression.

Alternately, you can use the createVisualVariable() method to generate a color visual variable with default stops and colors that are optimally chosen based on the statistics of the indicated field and the desired basemap.

Known Limitations

  • 3D symbols cannot be generated for layers with a polyline or polygon geometry type.
  • Only FeatureLayer, SceneLayer, and PointCloudLayer layer types are supported, except in the following scenarios:
    • FeatureLayers created with source graphics or feature collections.
    • SceneLayers without the supportsRenderer and supportsLayerQuery capabilities enabled, unless a predefined statistics object is passed to the statistics parameter of the method in conjunction with the layer. To check a SceneLayer's capabilities, use the getFieldInfoUsage() method.

Method Overview

NameReturn TypeSummaryObject
Promise<ContinuousRendererResult>

Generates a Renderer that may be applied directly to the layer used to call this method.

more details
more detailscolor
Promise<PCContinuousRendererResult>

Generates a PointCloudStretchRenderer with a color scheme best-suited for the given basemap based on statistics returned from a given field of a PointCloudLayer.

more details
more detailscolor
Promise<PCTrueColorRendererResult>

Generates a PointCloudRGBRenderer based on the RGB field of a given PointCloudLayer.

more details
more detailscolor
Promise<VisualVariableResult>

This method generates a color visual variable with default stops that are optimally chosen based on the statistics queried for the indicated field or expression and colors based on the input basemap.

more details
more detailscolor

Method Details

createContinuousRenderer(params){Promise<ContinuousRendererResult>}

Generates a Renderer that may be applied directly to the layer used to call this method. The renderer contains a continuous color visual variable that maps optimal colors based on the indicated basemap to specific stop values based on queried statistics from the indicated field or expression.

In most cases you will provide a layer, basemap, field, and theme to generate this renderer. This is a scenario in which the statistics of the data aren't well known and the user doesn't know what colors to use in the visualization.

The other options are provided for convenience for more involved custom visualization authoring applications. For example, if you already generated statistics in another operation, you can pass the statistics object to the statistics parameter to avoid making an extra call to the server.

Parameters:
params Object

Input parameters for generating a continuous color visualization based on data returned from a given field or expression. See the table below for details of each parameter.

Specification:

The layer for which the visualization is generated.

field String

The name of the field whose data will be queried for statistics and used for the basis of the data-driven visualization.

normalizationField String
optional

The name of the field to normalize the values of the given field. Providing a normalization field helps minimize some visualization errors and standardizes the data so all features are visualized with minimal bias due to area differences or count variation. This option is commonly used when visualizing densities.

basemap String|Basemap
optional

The named string of the Esri basemap or basemap object that will be paired with the output visualization.

Default Value: gray

theme String
optional

Determines which values will be emphasized in the continuous ramp and the map. Valid values are listed below.

ValueDescriptionExample
high-to-lowHigh values are emphasized with strong colors.high-to-low
above-and-belowValues centered around a given point (e.g. the average) are visualized with weak colors while other values are emphasized with strong colors.above-and-below
centered-onValues centered around a given point (e.g. the average) are emphasized with strong colors while other values are visualized with weak colors.centered-on
extremesHigh and low values are emphasized with strong colors. All others are visualized with weak colors.extremes
colorScheme ColorScheme
optional

In authoring apps, the user may select a pre-defined color scheme. Pass the scheme object to this property to avoid getting one based on a theme and the basemap.

legendOptions Object
optional

Provides options for setting a title to a field when an expression is provided instead of a field name. This title will represent the field in the Legend.

Specification:
title String

The title used to represent the given field or expression in the Legend.

optional

A statistics object generated from the summaryStatistics function. If statistics for the field have already been generated, then pass the object here to avoid making a second statistics query to the server.

minValue Number
optional

A custom minimum value set by the user. Use this in conjunction with maxValue to generate statistics between lower and upper bounds. This will be the lowest stop in the returned color visual variable.

maxValue Number
optional

A custom maximum value set by the user. Use this in conjunction with minValue to generate statistics between lower and upper bounds. This will be the uppermost stop in the returned color visual variable.

defaultSymbolEnabled Boolean
optional

Enables the defaultSymbol on the renderer and assigns it to features with no value and features that do not fall within the configured data range.

optional

The SceneView instance in which the visualization will be rendered. This parameter is required if symbolType = "3d-volumetric", but isn't required for layers with a mesh geometry type.

symbolType String
optional

The type of symbol to generate. This depends on the view in which you are working and the desired visualization. This parameter does not need to be specified for layers with a mesh geometry type. Known values are described below.

Default Value: 2d

ValueDescription
2dGenerates a visualization using 2D symbols such as SimpleMarkerSymbol, SimpleLineSymbol, or SimpleFillSymbol. Use this option if generating a visualization for data in a MapView.
3d-flatGenerates a visualization using 3D symbols with flat symbol layers such as IconSymbol3DLayer, LineSymbol3DLayer, or FillSymbol3DLayer. Use this option if generating a 2D visualization for data in a SceneView.
3d-volumetricGenerates a visualization using 3D symbols with volumetric symbol layers such as ObjectSymbol3DLayer, PathSymbol3DLayer, or ExtrudeSymbol3DLayer. Use this option if generating a 3D visualization for data in a SceneView. A SceneView instance must be provided to the view parameter if this option is used.
colorMixMode String
optional

This option only applies to generating renderers for mesh SceneLayers. Specifies how the symbol's color is applied to the geometry color/texture. See the documentation in FillSymbol3DLayer.material for more context. See the table below for possible values.

ValueDescription
tintApplies the symbol color to the desaturated geometry/texture color.
replaceRemoves the geometry/texture color and applies the symbol color.
multiplyMultiplies geometry/texture color value with the symbol color value. The result is a darker color. Multiplying with white keeps the geometry color the same.

Default value: replace

Returns:
TypeDescription
Promise< ContinuousRendererResult>Resolves to an instance of ContinuousRendererResult.
Example:
var layer = new FeatureLayer({
  url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0"
});

// visualization based on field and normalization field
var colorParams = {
  layer: layer,
  basemap: map.basemap,  // "gray"
  field: "POP_POVERTY",
  normalizationField: "TOTPOP_CY",
  theme: "above-and-below"
};

// when the promise resolves, apply the renderer to the layer
colorRendererCreator.createContinuousRenderer(colorParams)
  .then(function(response){
    layer.renderer = response.renderer;
  });

createPCContinuousRenderer(params){Promise<PCContinuousRendererResult>}

Since: ArcGIS API for JavaScript 4.5

Generates a PointCloudStretchRenderer with a color scheme best-suited for the given basemap based on statistics returned from a given field of a PointCloudLayer. All that's required is a layer instance, field name, and basemap ID. You can optionally set the size and density of the points to suit the needs of the desired visualization.

Parameters:
params Object

Input parameters for generating a renderer based on the given field of the input layer. See the table below for details of each parameter.

Specification:

The layer for which the visualization is generated.

field String

The name of the field whose data will be queried for statistics and used for the basis of the data-driven visualization. The only field names used for this renderer type are elevation and intensity.

basemap String|Basemap
optional

The named string of the Esri basemap or basemap object that will be paired with the output visualization.

Default Value: gray

size String
optional

The size of each point expressed as a percentage. This value will determine point sizes scaled based on the given density of points. When the value is 100%, the size of each point is set so that it minimizes the number of gaps between neighboring points. Any value above 100% will allow for points to overlap neighboring points scaled to the given value. Values below 100% scale point sizes smaller so there appear to be more gaps between points.

Default Value: "100%"

density Number
optional

The number of points per inch in the view.

Default Value: 25

colorScheme ColorScheme
optional

In authoring apps, the user may select a pre-defined color scheme. Pass the scheme object to this property to avoid getting one based on the basemap.

optional

A statistics object generated from the summaryStatistics function. If statistics for the field have already been generated, then pass the stats object here to avoid making a second statistics query to the server.

Returns:
TypeDescription
Promise< PCContinuousRendererResult>Resolves to an object containing the renderer to set on the input layer. See PCContinuousRendererResult for more details.
Example:
var layer = new PointCloudLayer({
  url: "https://tiles.arcgis.com/tiles/V6ZHFr6zdgNZuVG0/arcgis/rest/services/BARNEGAT_BAY_LiDAR_UTM/SceneServer"
});

var params = {
  layer: layer,
  field: "INTENSITY",
  basemap: "satellite"
};

// when the promise resolves, apply the renderer to the layer
colorRendererCreator.createPCContinuousRenderer(params)
  .then(function(response){
    layer.renderer = response.renderer;
  });

createPCTrueColorRenderer(params){Promise<PCTrueColorRendererResult>}

Since: ArcGIS API for JavaScript 4.5

Generates a PointCloudRGBRenderer based on the RGB field of a given PointCloudLayer. This method simplifies the experience of creating a PointCloudRGBRenderer manually. All that's required is a layer instance. You can optionally set the size and density of the points to suit the needs of the desired visualization.

Parameters:
params Object

Input parameters for generating a true color visualization based on the RGB field of the input layer. See the table below for details of each parameter.

Specification:

The layer for which the visualization is generated.

size String
optional

The size of each point expressed as a percentage. This value will determine point sizes scaled based on the given density of points. When the value is 100%, the size of each point is set so that it minimizes the number of gaps between neighboring points. Any value above 100% will allow for points to overlap neighboring points scaled to the given value. Values below 100% scale point sizes smaller so there appear to be more gaps between points.

Default Value: "100%"

density Number
optional

The number of points per inch in the view.

Default Value: 25

Returns:
TypeDescription
Promise< PCTrueColorRendererResult>Resolves to an object containing the renderer to set on the input layer. See PCTrueColorRendererResult for more details.
Examples:
var layer = new PointCloudLayer({
  url: "https://tiles.arcgis.com/tiles/V6ZHFr6zdgNZuVG0/arcgis/rest/services/BARNEGAT_BAY_LiDAR_UTM/SceneServer"
});

// generates an RGB renderer using default values for the given layer.
colorRendererCreator.createPCTrueColorRenderer({
  layer: layer
}).then(function(response){
  layer.renderer = response.renderer;
});
var layer = new PointCloudLayer({
  url: "https://tiles.arcgis.com/tiles/V6ZHFr6zdgNZuVG0/arcgis/rest/services/BARNEGAT_BAY_LiDAR_UTM/SceneServer"
});

// sets options for configuring size of points
var params = {
  layer: layer,
  density: 25,  // points per square inch
  size: "100%"  // minimizes gap between points
};

// when the promise resolves, apply the renderer to the layer
colorRendererCreator.createPCTrueColorRenderer(params)
  .then(function(response){
    layer.renderer = response.renderer;
  });

createVisualVariable(params){Promise<VisualVariableResult>}

This method generates a color visual variable with default stops that are optimally chosen based on the statistics queried for the indicated field or expression and colors based on the input basemap.

There are two different ways this method may be called. The most common case is by providing a layer, basemap, field, and theme. This is the scenario where the statistics of the data aren't well known and the user doesn't know what colors to use.

The other options are provided for convenience for more involved custom visualization authoring applications. For example, if you already generated statistics in another operation, you can pass the object in the statistics parameter to avoid making an extra call to the server. You can also provide a colorScheme if you don't want one picked for you. In this case the basemap and theme options would be ignored.

Parameters:
params Object

Input parameters for generating a color visual variable based on data returned from a given field or expression. See the table below for details of each parameter.

Specification:

The layer for which the visual variable is generated.

field String

The name of the field whose data will be queried for statistics and used for the basis of the data-driven visualization.

normalizationField String
optional

The name of the field to normalize the values of the given field. Providing a normalization field helps minimize some visualization errors and standardizes the data so all features are visualized with minimal bias due to area differences or count variation. This option is commonly used when visualizing densities.

basemap String|Basemap
optional

The named string of the Esri basemap or basemap object that will be paired with the output visualization.

Default Value: gray

theme String
optional

Determines which values will be emphasized in the continuous ramp and the map. Valid values are listed below.

ValueDescriptionExample
high-to-lowHigh values are emphasized with strong colors.high-to-low
above-and-belowValues centered around a given point (e.g. the average) are visualized with weak colors while other values are emphasized with strong colors.above-and-below
centered-onValues centered around a given point (e.g. the average) are emphasized with strong colors while other values are visualized with weak colors.centered-on
extremesHigh and low values are emphasized with strong colors. All others are visualized with weak colors.extremes
colorScheme ColorScheme
optional

In authoring apps, the user may select a pre-defined color scheme. Pass the scheme object to this property to avoid getting one based on a theme and the basemap.

legendOptions Object
optional

Provides options for setting a title to a field when an expression is provided instead of a field name. This title will represent the field in the Legend.

Specification:
title String

The title used to represent the given field or expression in the Legend.

optional

A statistics object generated from the summaryStatistics function. If statistics for the field have already been generated, then pass the object here to avoid making a second statistics query to the server.

minValue Number
optional

A custom minimum value set by the user. Use this in conjunction with maxValue to generate statistics between lower and upper bounds. This will be the lowest stop in the returned color visual variable.

maxValue Number
optional

A custom maximum value set by the user. Use this in conjunction with minValue to generate statistics between lower and upper bounds. This will be the uppermost stop in the returned color visual variable.

optional

The SceneView instance in which the visualization will be rendered. This property is only applicable to generating visualizations with 3D symbols, except for layers with a mesh geometry type.

worldScale Boolean
optional

Indicates if the size units of the symbols will be in meters. This should be true when generating visualizations with 3D volumetric symbology, except for layers with a mesh geometry type. A view must be provided if this property is set to true.

Returns:
TypeDescription
Promise< VisualVariableResult>Resolves to an instance of VisualVariableResult.
Example:
var layer = new FeatureLayer({
  url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0"
});

// visualization based on field and normalization field
var colorParams = {
  layer: layer,
  basemap: map.basemap,  // "gray"
  field: "POP_POVERTY",
  normalizationField: "TOTPOP_CY",
  theme: "above-and-below"
};

// when the promise resolves, apply the visual variable to the renderer
colorRendererCreator.createVisualVariable(colorParams)
  .then(function(response){
    var renderer = layer.renderer.clone();
    renderer.visualVariables = [ response.visualVariable ];
    layer.renderer = renderer;
  });

Type Definitions

ContinuousRendererResult

The result object of the createContinuousRenderer() method. See the table below for details of each property.

Properties:

The renderer object configured to best match the given basemap and the spread of the data. Set this on a layer's renderer property to update its visualization.

visualVariable ColorVisualVariable

A color visual variable configured based on the statistics of the data and the given basemap and scheme.

colorScheme ColorScheme

The color scheme used by the visual variable.

defaultValuesUsed Boolean

Indicates whether default values are used in the absence of sufficient data and/or statistics from the layer. Default values are typically used when all features have the same field value or no value at all.

Basic statistics returned from a query to the service for data from the given field name or expression.

basemapId String

The ID of the basemap used to determine the optimal fill color of the features.

PCContinuousRendererResult

The result object of the createPCContinuousRenderer() method. See the table below for details of each property.

Properties:

The renderer object configured to best match the given basemap and the spread of the data. Set this object on the input layer's renderer property to update its visualization.

colorScheme ColorScheme

The color scheme used by the renderer.

defaultValuesUsed Boolean

Indicates whether default values are used in the absence of sufficient data and/or statistics from the layer. Default values are typically used when all features have the same field value or no value at all.

Basic statistics returned from a query to the service for data from the given field name.

basemapId String

The ID of the basemap used to determine the optimal color scheme for the output renderer.

PCTrueColorRendererResult

The result object of the createPCTrueColorRenderer() method. See the table below for details of each property.

Property:

The renderer object configured to represent the true color of each point in the point cloud. This gives the PointCloudLayer a realistic visualization of how it looks in the real world. Set this object on the input layer's renderer property to update its visualization.

VisualVariableResult

The result object of the createVisualVariable() method. See the table below for details of each property.

Properties:
visualVariable ColorVisualVariable

A color visual variable configured based on the statistics of the data and the given basemap and scheme.

colorScheme ColorScheme

The color scheme used by the visual variable.

Basic statistics returned from a query to the service for the given field or expression.

defaultValuesUsed Boolean

Indicates whether default values are used in the absence of sufficient data and/or statistics from the layer. Default values are typically used when all features have the same field value or no value at all.

basemapId String

The ID of the basemap used to determine the optimal fill color of the features.

authoringInfo AuthoringInfo

Authoring information related to the creation of the visual variable. This includes information related to UI inputs from sliders and selected themes.

API Reference search results

NameTypeModule

There were no match results from your search criteria.