require(["esri/smartMapping/renderers/color"], (colorRendererCreator) => { /* code goes here */ });
import * as colorRendererCreator from "@arcgis/core/smartMapping/renderers/color.js";
esri/smartMapping/renderers/color
This object contains helper methods for generating data-driven visualizations with continuous color or class breaks based on a field value or expression from features in a Layer. The methods in this module generate renderer or visual variable objects that may be applied directly to a supported layer. The renderers specify how features should be visualized based on data values and colors compatible with the view's background.
Known Limitations
- SceneLayers must have the
supportsRenderer
andsupportsLayerQuery
capabilities enabled unless a predefined statistics object is provided to thestatistics
parameter of the method. To check a SceneLayer's capabilities, use the getFieldInfoUsage() method. - You cannot generate renderers and visual variables using SQL expressions for client-side FeatureLayers in a SceneView.
- See also
Method Overview
Name | Return Type | Summary | Object |
---|---|---|---|
Promise<AgeRendererResult> | Generates a continuous color Renderer representing the age of features based on one or more fields. | color | |
Promise<ClassBreaksRendererResult> | Generates a ClassBreaksRenderer that may be applied directly to the layer used to call this method. | color | |
Promise<ContinuousRendererResult> | Generates a Renderer that may be applied directly to the layer used to call this method. | color | |
Promise<PCContinuousRendererResult> | Generates a PointCloudStretchRenderer with a color scheme best-suited for the view's background based on statistics returned from a given field of a PointCloudLayer. | color | |
Promise<PCTrueColorRendererResult> | Generates a PointCloudRGBRenderer based on the | color | |
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 determined by the view's background. | color |
Method Details
-
createAgeRenderer
createAgeRenderer(params){Promise<AgeRendererResult>}
Since: ArcGIS Maps SDK for JavaScript 4.9color since 4.2, createAgeRenderer added at 4.9. -
Generates a continuous color Renderer representing the age of features based on one or more fields. The age of a feature is calculated based on a given
startTime
andendTime
, one of which must be a date field in the inputlayer
. This method generates an Arcade expression and calculates statistics on the output of the expression to accomplish this. The resulting renderer contains a continuous color visual variable that maps optimal colors based on the view's background to data values based on the resulting statistics of the expression.You are required to provide a
layer
,view
,startTime
, andendTime
to generate this renderer. Optionally, you can set aunit
and atheme
for the visualization. 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 thestatistics
parameter to avoid making an extra call to the server.ParametersSpecificationparams ObjectInput parameters for generating a continuous color visualization of age for time data returned from start and/or end date field(s). See the table below for details of each parameter.
Specificationlayer FeatureLayer|SceneLayer|CSVLayer|GeoJSONLayer|WFSLayer|OGCFeatureLayer|StreamLayer|OrientedImageryLayer|CatalogFootprintLayer|KnowledgeGraphSublayer|SubtypeGroupLayer|SubtypeSublayerThe layer for which the visualization is generated.
view ViewThe view where the input layer is rendered. This method inspects the view's background (i.e. basemap, web map background, or view container) to determine optimal colors for the output renderer.
The name of the field, or a date value representing the start time in the age calculation. If a date value is specified, then the
endTime
parameter must reference a Date field in the layer.The name of the field, or a date value representing the end time in the age calculation. If a date value is specified, then the
startTime
parameter must reference a Date field in the layer.unit StringoptionalThe time unit used to calculate the difference between
endTime
andstartTime
. If a unit is not specified, then a suggested unit is determined based on the spread and distribution of the data.Possible Values:"years"|"months"|"days"|"hours"|"minutes"|"seconds"
maxValue NumberoptionalSets a maximum age for the visualization. Even if data exists above this value, only statistics will be calculated for values between the
minValue
andmaxValue
. Added at version 4.15.minValue NumberoptionalSets a minimum age for the visualization. Even if data exists below this value, only statistics will be calculated for values between the
minValue
andmaxValue
. Added at version 4.15.theme StringoptionalDefault Value: high-to-lowDetermines 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. The data values above one standard deviation from the mean are assigned the strongest color. Data values below one standard deviation from the mean are assigned the weakest color. All other values are interpolated. above High values are emphasized with strong colors. The max data value is assigned the strongest color. The middle or average data value is assigned the weakest color. All other values are interpolated. below Low values are emphasized with strong colors. The min data value is assigned the strongest color. The middle or average data value is assigned the weakest color. All other values are interpolated. above-and-below Values centered on a meaningful data value (e.g. the average) are visualized with weak colors while other values are emphasized with strong colors. All other values are interpolated. centered-on Values centered on a meaningful data value (e.g. the average) are emphasized with strong colors while other values are visualized with weak colors. All other values are interpolated. extremes High and low values are emphasized with strong colors. All others are visualized with weak colors. All other values are interpolated. Possible Values:"high-to-low"|"above"|"below"|"above-and-below"|"centered-on"|"extremes"
filter FeatureFilteroptionalSince 4.31 When defined, only features included in the filter are considered in the attribute and spatial statistics calculations when determining the final renderer. This is useful when a lot of variation exists in the data that could result in undesired data ranges. A common use case would be to set a filter that only includes features in the current extent of the view where the data is most likely to be viewed. Currently, only geometry filters with an
intersects
spatial relationship are supported. All other filter types (includingwhere
) are ignored.outlineOptimizationEnabled BooleanoptionalDefault Value: falseFor polygon layers only. Indicates whether the polygon outline width should vary based on view scale. When set, a valid MapView instance must be provided in the
view
parameter. This option is not supported for 3D SceneViews.sizeOptimizationEnabled BooleanoptionalDefault Value: falseFor point and polyline layers only. Indicates whether symbol sizes should vary based on view scale. When set, a valid MapView instance must be provided in the
view
parameter. This option is not supported for 3D SceneViews.legendOptions ObjectoptionalProvides options for modifying Legend properties describing the visualization.
statistics SummaryStatisticsResultoptionalA statistics object generated from the summaryStatistics function. The
createAgeRenderer()
method generates an Arcade expression and executes a statistics query against the layer for the result of the expression. If statistics for the expression have already been generated, then pass the object here to avoid making a second statistics query.colorScheme ColorSchemeoptionalIn 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 view's background.symbolType StringoptionalDefault Value: 2dThe 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. Possible values are described below.Value Description 2d Generates a visualization using 2D symbols such as SimpleMarkerSymbol, SimpleLineSymbol, or SimpleFillSymbol. Use this option if generating a visualization for data in a MapView. 3d-flat Generates 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-volumetric Generates 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.3d-volumetric-uniform Generates a visualization using uniformly sized 3D symbols with volumetric symbol layers. Use this option if generating a 3D visualization for data in a SceneView and the symbol should be sizes uniformly, for example with spheres. A SceneView instance must be provided to the view
parameter if this option is used.Possible Values:"2d"|"3d-flat"|"3d-volumetric"|"3d-volumetric-uniform"
defaultSymbolEnabled BooleanoptionalDefault Value: trueEnables the
defaultSymbol
on the renderer and assigns it to features with no value.colorMixMode StringoptionalDefault Value: replaceThis 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.
Value Description tint Applies the symbol color
to the desaturated geometry/texture color.replace Removes the geometry/texture color and applies the symbol color
.multiply Multiplies geometry/texture color value with the symbol color
value. The result is a darker color. Multiplying with white keeps the geometry color the same.signal AbortSignaloptionalAllows for cancelable requests. If canceled, the promise will be rejected with an error named
AbortError
. See also AbortController.ReturnsType Description Promise<AgeRendererResult> Resolves to an instance of AgeRendererResult. Examplesconst layer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/311_Service_Requests_from_2015_50k/FeatureServer/0" }); // visualization based age of incidents closed passed their due date // or the number of days an incident was overdue at the time of closure. const ageParams = { layer: layer, view: view, startTime: "Due_Date", endTime: "Closed_Date", unit: "days", theme: "above-and-below" }; // when the promise resolves, apply the renderer to the layer colorRendererCreator.createAgeRenderer(ageParams) .then(function(response){ layer.renderer = response.renderer; });
const layer = new CSVLayer({ url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv", copyright: "USGS Earthquakes" }); // visualization based off current age of incident const ageParams = { layer: layer, view: view, startTime: "time", endTime: Date.now(), legendOptions: { title: "Time since earthquake struck" } }; // when the promise resolves, apply the renderer to the layer colorRendererCreator.createAgeRenderer(ageParams) .then(function(response){ layer.renderer = response.renderer; });
-
createClassBreaksRenderer
createClassBreaksRenderer(params){Promise<ClassBreaksRendererResult>}
Since: ArcGIS Maps SDK for JavaScript 4.6color since 4.2, createClassBreaksRenderer added at 4.6. -
Generates a ClassBreaksRenderer that may be applied directly to the layer used to call this method. The resulting renderer defines the symbol color of each feature based on the value of the given
field
value. A default color scheme is determined based on the view's background. Depending on theclassificationMethod
, class breaks (or data ranges) are generated based on the statistics of the data. Each feature is assigned a color based on the class break in which the value of thefield
falls.In most cases you will provide a
layer
,view
,field
, andclassificationMethod
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. You can also use avalueExpression
instead of afield
to visualize features based on a value returned from a script executed at runtime.The other options are provided for convenience for more involved custom visualization authoring applications.
ParametersSpecificationparams ObjectInput parameters for generating a classed color visualization based on data returned from a given field or expression. See the table below for details of each parameter.
Specificationlayer FeatureLayer|SceneLayer|CSVLayer|GeoJSONLayer|WFSLayer|OGCFeatureLayer|StreamLayer|OrientedImageryLayer|CatalogFootprintLayer|KnowledgeGraphSublayer|SubtypeGroupLayer|SubtypeSublayerThe layer for which the visualization is generated.
view ViewoptionalThe view where the input layer is rendered. This method inspects the view's background (i.e. basemap, web map background, or view container) to determine optimal colors for the output renderer. This parameter should always be set in practice, but if not provided this method will assume the generated renderer will display on a light background. This parameter is required when creating renderers using a
valueExpression
or for renderers intended for display in a SceneView.field StringoptionalThe name of the field whose data will be queried for statistics and classified. This property is ignored if a
valueExpression
is used.normalizationField StringoptionalThe 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.normalizationType StringoptionalIndicates how the data is normalized. The data value obtained from the
field
is normalized in one of the following ways before it is compared with the class breaks. See the table below for a list of possible values.Possible Value Description field Divides the field
value by the value ofnormalizationField
. This value is set by default if thenormalizationField
is provided.log Computes the base 10 logarithm of the data value. This can be a useful approach for some data distributions because it reduces the influence of very large data values. percent-of-total Divides the data value by the sum of all data values then multiplies by 100. Use normalizationTotal
to define the total value by which to normalize. This value is set by default if thenormalizationTotal
is provided.With the exception of
log
normalization, data normalization creates a ratio by dividing two values. When comparing attribute values between features, normalization minimizes the effect of varying map areas and the number of observations. For example, dividing the 18 to 30 year old population by the area of a polygon feature yields a density value that can be compared evenly with other features, regardless of their size.Possible Values:"field"|"log"|"percent-of-total"
normalizationTotal NumberoptionalWhen
normalizationType
ispercent-of-total
, this property contains the total of all data values.classificationMethod StringoptionalDefault Value: equal-intervalThe classification method used for generating breaks. See the table below for a list of possible values.
Possible Value Description equal-interval Divides the range of attribute values into equal-sized subranges. For example, if you specify three classes for a field whose values range from 0 to 300, this method will create three classes with ranges of 0–100, 101–200, and 201–300. Equal interval is best applied to familiar data ranges, such as percentages and temperature. This method emphasizes the amount of an attribute value relative to other values. For example, it could show if a store is part of the group of stores that make up the top one-third of all sales. natural-breaks Groups similar values that maximize the differences between classes. Features are divided into classes whose boundaries are set where there are relatively big differences in the data values. Natural breaks are data-specific classifications and not useful for comparing multiple maps built from different underlying information. quantile Assigns the same number of data values to each class. This is well suited to linearly distributed data. Because features are grouped in equal numbers in each class, the resulting map can often be misleading. Similar features can potentially be placed in adjacent classes, or features with widely different values can be put in the same class. You can minimize this distortion by increasing the number of classes. standard-deviation Creates class breaks with equal value ranges that are a proportion of the standard deviation. This is usually done at intervals of one, one-half, one-third, or one-fourth standard deviations from the mean. Possible Values:"equal-interval"|"natural-breaks"|"quantile"|"standard-deviation"
standardDeviationInterval NumberoptionalDefault Value: 1If a
standard-deviation
classification method is used, then this indicates the interval by which to generate class breaks.Possible Values: 1 | 0.5 | 0.33 | 0.25
numClasses NumberoptionalDefault Value: 5The number of class breaks to generate. This is ignored if a
standard-deviation
classification method is specified.colorScheme ColorSchemeoptionalIn 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 view's background.
valueExpression StringoptionalAn Arcade expression following the specification defined by the Arcade Visualization Profile. Expressions may reference field values using the
$feature
profile variable and must return a number. This property overrides thefield
property and therefore is used instead of an inputfield
value.valueExpressionTitle StringoptionalText describing the value returned from the
valueExpression
. This is used by the Legend widget.sqlExpression StringoptionalA SQL expression evaluating to a number.
sqlWhere StringoptionalA SQL where clause used to filter features for the statistics query. For example, this is useful in situations where you want to avoid dividing by zero as is the case with creating a predominance visualization.
filter FeatureFilteroptionalSince 4.31 When defined, only features included in the filter are considered in the attribute and spatial statistics calculations when determining the final renderer. This is useful when a lot of variation exists in the data that could result in undesired data ranges. A common use case would be to set a filter that only includes features in the current extent of the view where the data is most likely to be viewed. Currently, only geometry filters with an
intersects
spatial relationship are supported. All other filter types (includingwhere
) are ignored.outlineOptimizationEnabled BooleanoptionalDefault Value: falseFor polygon layers only. Indicates whether the polygon outline width should vary based on view scale. When set, a valid MapView instance must be provided in the
view
parameter. This option is not supported for 3D SceneViews.legendOptions ObjectoptionalProvides options for setting a title to describe a field instead of using the field name. This title will represent the field in the Legend.
minValue NumberoptionalA minimum value set by the user. Use this in conjunction with
maxValue
to generate class breaks between lower and upper bounds. This will be the lower bound of the lowest class break.maxValue NumberoptionalA maximum value set by the user. Use this in conjunction with
minValue
to generate class breaks between lower and upper bounds. This will be the upper bound of the highest class break.defaultSymbolEnabled BooleanoptionalDefault Value: trueEnables the
defaultSymbol
on the renderer and assigns it to features with no value and features that do not fall within the configured data range.symbolType StringoptionalDefault Value: 2dThe 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. Possible values are described below.Value Description 2d Generates a visualization using 2D symbols such as SimpleMarkerSymbol, SimpleLineSymbol, or SimpleFillSymbol. Use this option if generating a visualization for data in a MapView. 3d-flat Generates 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-volumetric Generates 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.3d-volumetric-uniform Generates a visualization using uniformly sized 3D symbols with volumetric symbol layers. Use this option if generating a 3D visualization for data in a SceneView and the symbol should be sizes uniformly, for example with spheres. A SceneView instance must be provided to the view
parameter if this option is used.Possible Values:"2d"|"3d-flat"|"3d-volumetric"|"3d-volumetric-uniform"
colorMixMode StringoptionalDefault Value: replaceThis 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.
Value Description tint Applies the symbol color
to the unsaturated geometry/texture color.replace Removes the geometry/texture color and applies the symbol color
.multiply Multiplies geometry/texture color value with the symbol color
value. The result is a darker color. Multiplying with white keeps the geometry color the same.forBinning BooleanoptionalIndicates whether the generated renderer is for a binning visualization. If
true
, then the input field(s) in this method should refer to aggregate fields defined in thefeatureReduction
property of the layer.signal AbortSignaloptionalAllows for cancelable requests. If canceled, the promise will be rejected with an error named
AbortError
. See also AbortController.ReturnsType Description Promise<ClassBreaksRendererResult> Resolves to an instance of ClassBreaksRendererResult. Exampleslet layer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0" }); // visualization based on field and normalization field let colorParams = { layer: layer, view: view, field: "POP_POVERTY", normalizationField: "TOTPOP_CY", classificationMethod: "quantile", numClasses: 4 }; // when the promise resolves, apply the renderer to the layer colorRendererCreator.createClassBreaksRenderer(colorParams) .then(function(response){ layer.renderer = response.renderer; });
let layer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0" }); // visualization based off Arcade expression let colorParams = { layer: layer, valueExpression: "($feature.POP_POVERTY / $feature.TOTPOP_CY) * 100", view: view, sqlWhere: "TOTPOP_CY > 0", legendOptions: { title: "% of people living in poverty" } }; // when the promise resolves, apply the renderer to the layer colorRendererCreator.createClassBreaksRenderer(colorParams) .then(function(response){ layer.renderer = response.renderer; });
-
createContinuousRenderer
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 view's background to specific stop values based on queried statistics from the indicated field or expression.
In most cases you will provide a
layer
,view
,field
, andtheme
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. You can also use avalueExpression
instead of afield
to visualize features based on a value returned from a script executed at runtime.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.ParametersSpecificationparams ObjectInput 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.
Specificationlayer FeatureLayer|SceneLayer|CSVLayer|GeoJSONLayer|WFSLayer|OGCFeatureLayer|StreamLayer|OrientedImageryLayer|CatalogFootprintLayer|KnowledgeGraphSublayer|SubtypeGroupLayer|SubtypeSublayerThe layer for which the visualization is generated.
view ViewoptionalThe view where the input layer is rendered. This method inspects the view's background (i.e. basemap, web map background, or view container) to determine optimal colors for the output renderer. This parameter should always be set in practice, but if not provided this method will assume the generated renderer will display on a light background. This parameter is required when creating renderers using a
valueExpression
or for renderers intended for display in a SceneView.field StringoptionalThe name of the field whose data will be queried for statistics and used for the basis of the data-driven visualization. This property is ignored if a
valueExpression
is used.normalizationField StringoptionalThe 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.theme StringoptionalDefault Value: high-to-lowDetermines 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. The data values above one standard deviation from the mean are assigned the strongest color. Data values below one standard deviation from the mean are assigned the weakest color. All other values are interpolated. above High values are emphasized with strong colors. The max data value is assigned the strongest color. The middle or average data value is assigned the weakest color. All other values are interpolated. below Low values are emphasized with strong colors. The min data value is assigned the strongest color. The middle or average data value is assigned the weakest color. All other values are interpolated. above-and-below Values centered on a meaningful data value (e.g. the average) are visualized with weak colors while other values are emphasized with strong colors. All other values are interpolated. centered-on Values centered on a meaningful data value (e.g. the average) are emphasized with strong colors while other values are visualized with weak colors. All other values are interpolated. extremes High and low values are emphasized with strong colors. All others are visualized with weak colors. All other values are interpolated. Possible Values:"high-to-low"|"above"|"below"|"above-and-below"|"centered-on"|"extremes"
colorScheme ColorSchemeoptionalIn 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 view's background.valueExpression StringoptionalAn Arcade expression following the specification defined by the Arcade Visualization Profile. Expressions may reference field values using the
$feature
profile variable and must return a number. This property overrides thefield
property and therefore is used instead of an inputfield
value.valueExpressionTitle StringoptionalText describing the value returned from the
valueExpression
. This is used by the Legend widget.sqlExpression StringoptionalA SQL expression evaluating to a number.
sqlWhere StringoptionalA SQL where clause used to filter features for the statistics query. For example, this is useful in situations where you want to avoid dividing by zero as is the case with creating a predominance visualization.
filter FeatureFilteroptionalSince 4.31 When defined, only features included in the filter are considered in the attribute and spatial statistics calculations when determining the final renderer. This is useful when a lot of variation exists in the data that could result in undesired data ranges. A common use case would be to set a filter that only includes features in the current extent of the view where the data is most likely to be viewed. Currently, only geometry filters with an
intersects
spatial relationship are supported. All other filter types (includingwhere
) are ignored.outlineOptimizationEnabled BooleanoptionalDefault Value: falseFor polygon layers only. Indicates whether the polygon outline width should vary based on view scale. When set, a valid MapView instance must be provided in the
view
parameter. This option is not supported for 3D SceneViews.sizeOptimizationEnabled BooleanoptionalDefault Value: falseFor point and polyline layers only. Indicates whether symbol sizes should vary based on view scale. When set, a valid MapView instance must be provided in the
view
parameter. This option is not supported for 3D SceneViews.legendOptions ObjectoptionalProvides 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.
statistics SummaryStatisticsResultoptionalA 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 NumberoptionalA 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 NumberoptionalA 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 BooleanoptionalDefault Value: trueEnables the
defaultSymbol
on the renderer and assigns it to features with no value and features that do not fall within the configured data range.symbolType StringoptionalDefault Value: 2dThe 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. Possible values are described below.Value Description 2d Generates a visualization using 2D symbols such as SimpleMarkerSymbol, SimpleLineSymbol, or SimpleFillSymbol. Use this option if generating a visualization for data in a MapView. 3d-flat Generates 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-volumetric Generates 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.3d-volumetric-uniform Generates a visualization using uniformly sized 3D symbols with volumetric symbol layers. Use this option if generating a 3D visualization for data in a SceneView and the symbol should be sizes uniformly, for example with spheres. A SceneView instance must be provided to the view
parameter if this option is used.Possible Values:"2d"|"3d-flat"|"3d-volumetric"|"3d-volumetric-uniform"
colorMixMode StringoptionalDefault Value: replaceThis 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.
Value Description tint Applies the symbol color
to the unsaturated geometry/texture color.replace Removes the geometry/texture color and applies the symbol color
.multiply Multiplies geometry/texture color value with the symbol color
value. The result is a darker color. Multiplying with white keeps the geometry color the same.forBinning BooleanoptionalIndicates whether the generated renderer is for a binning visualization. If
true
, then the input field(s) in this method should refer to aggregate fields defined in thefeatureReduction
property of the layer.signal AbortSignaloptionalAllows for cancelable requests. If canceled, the promise will be rejected with an error named
AbortError
. See also AbortController.ReturnsType Description Promise<ContinuousRendererResult> Resolves to an instance of ContinuousRendererResult. Exampleslet layer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0" }); // visualization based on field and normalization field let colorParams = { layer: layer, view: view, 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; });
let layer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0" }); // visualization based off Arcade expression let colorParams = { layer: layer, valueExpression: "($feature.POP_POVERTY / $feature.TOTPOP_CY) * 100", view: view, sqlWhere: "TOTPOP_CY > 0", legendOptions: { title: "% of people living in poverty" } }; // when the promise resolves, apply the renderer to the layer colorRendererCreator.createContinuousRenderer(colorParams) .then(function(response){ layer.renderer = response.renderer; });
-
createPCContinuousRenderer
createPCContinuousRenderer(params){Promise<PCContinuousRendererResult>}
Since: ArcGIS Maps SDK for JavaScript 4.5color since 4.2, createPCContinuousRenderer added at 4.5. -
Generates a PointCloudStretchRenderer with a color scheme best-suited for the view's background 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.
ParametersSpecificationparams ObjectInput parameters for generating a renderer based on the given field of the input layer. See the table below for details of each parameter.
Specificationlayer PointCloudLayerThe layer for which the visualization is generated.
field StringThe 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
andintensity
.optional Default Value: grayThe named string or basemap object of the Esri basemap that will be paired with the output visualization.
size StringoptionalDefault Value: 100%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 is100%
, the size of each point is set so that it minimizes the number of gaps between neighboring points. Any value above100%
will allow for points to overlap neighboring points scaled to the given value. Values below100%
scale point sizes smaller so there appear to be more gaps between points.density NumberoptionalDefault Value: 25The number of points per inch in the view.
colorScheme ColorSchemeoptionalIn 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
.statistics SummaryStatisticsResultoptionalA 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
signal AbortSignaloptionalAllows for cancelable requests. If canceled, the promise will be rejected with an error named
AbortError
. See also AbortController. query to the server.ReturnsType Description Promise<PCContinuousRendererResult> Resolves to an object containing the renderer to set on the input layer. See PCContinuousRendererResult for more details. Examplelet layer = new PointCloudLayer({ url: "https://tiles.arcgis.com/tiles/V6ZHFr6zdgNZuVG0/arcgis/rest/services/BARNEGAT_BAY_LiDAR_UTM/SceneServer" }); let 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
createPCTrueColorRenderer(params){Promise<PCTrueColorRendererResult>}
Since: ArcGIS Maps SDK for JavaScript 4.5color since 4.2, createPCTrueColorRenderer added at 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.ParametersSpecificationparams ObjectInput 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.Specificationlayer PointCloudLayerThe layer for which the visualization is generated.
size StringoptionalDefault Value: 100%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 is100%
, the size of each point is set so that it minimizes the number of gaps between neighboring points. Any value above100%
will allow for points to overlap neighboring points scaled to the given value. Values below100%
scale point sizes smaller so there appear to be more gaps between points.density NumberoptionalDefault Value: 25The number of points per inch in the view.
signal AbortSignaloptionalAllows for cancelable requests. If canceled, the promise will be rejected with an error named
AbortError
. See also AbortController.ReturnsType Description Promise<PCTrueColorRendererResult> Resolves to an object containing the renderer to set on the input layer. See PCTrueColorRendererResult for more details. Exampleslet 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; });
let 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 let 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
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 determined by the view's background.
There are two different ways this method may be called. The most common case is by providing a
layer
,view
,field
, andtheme
. This is the scenario where the statistics of the data aren't well known and the user doesn't know what colors to use. You can optionally use avalueExpression
instead of a field to visualize features based on a numeric value returned from a script executed at runtime.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 acolorScheme
if you don't want one picked for you. In this case theview
andtheme
options would be ignored.ParametersSpecificationparams ObjectInput 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.
Specificationlayer FeatureLayer|SceneLayer|CSVLayer|GeoJSONLayer|WFSLayer|OGCFeatureLayer|StreamLayer|OrientedImageryLayer|CatalogFootprintLayer|KnowledgeGraphSublayer|SubtypeGroupLayer|SubtypeSublayerThe layer for which the visual variable is generated.
view ViewoptionalThe view where the input layer is rendered. This method inspects the view's background (i.e. basemap, web map background, or view container) to determine optimal colors for the output renderer. This parameter should always be set in practice, but if not provided this method will assume the generated renderer will display on a light background. This parameter is required when creating renderers using a
valueExpression
or for renderers intended for display in a SceneView.field StringoptionalThe name of the field whose data will be queried for statistics and used for the basis of the data-driven visualization. This property is ignored if a
valueExpression
is used.normalizationField StringoptionalThe 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.theme StringoptionalDefault Value: high-to-lowDetermines 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. The data values above one standard deviation from the mean are assigned the strongest color. Data values below one standard deviation from the mean are assigned the weakest color. All other values are interpolated. above High values are emphasized with strong colors. The max data value is assigned the strongest color. The middle or average data value is assigned the weakest color. All other values are interpolated. below Low values are emphasized with strong colors. The min data value is assigned the strongest color. The middle or average data value is assigned the weakest color. All other values are interpolated. above-and-below Values centered on a meaningful data value (e.g. the average) are visualized with weak colors while other values are emphasized with strong colors. All other values are interpolated. centered-on Values centered on a meaningful data value (e.g. the average) are emphasized with strong colors while other values are visualized with weak colors. All other values are interpolated. extremes High and low values are emphasized with strong colors. All others are visualized with weak colors. All other values are interpolated. Possible Values:"high-to-low"|"above"|"below"|"above-and-below"|"centered-on"|"extremes"
colorScheme ColorSchemeoptionalIn 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 view's background.valueExpression StringoptionalAn Arcade expression following the specification defined by the Arcade Visualization Profile. Expressions may reference field values using the
$feature
profile variable and must return a number. This property overrides thefield
property and therefore is used instead of an inputfield
value.valueExpressionTitle StringoptionalText describing the value returned from the
valueExpression
. This is used by the Legend widget.sqlExpression StringoptionalA SQL expression evaluating to a number.
sqlWhere StringoptionalA SQL where clause used to filter features for the statistics query. For example, this is useful in situations where you want to avoid dividing by zero as is the case with creating a predominance visualization.
filter FeatureFilteroptionalSince 4.31 When defined, only features included in the filter are considered in the attribute and spatial statistics calculations when determining the final renderer. This is useful when a lot of variation exists in the data that could result in undesired data ranges. A common use case would be to set a filter that only includes features in the current extent of the view where the data is most likely to be viewed. Currently, only geometry filters with an
intersects
spatial relationship are supported. All other filter types (includingwhere
) are ignored.legendOptions ObjectoptionalProvides 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.
statistics SummaryStatisticsResultoptionalA 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 NumberoptionalA 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 NumberoptionalA 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.worldScale BooleanoptionalIndicates 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 amesh
geometry type. Aview
must be provided if this property is set totrue
.forBinning BooleanoptionalIndicates whether the generated renderer is for a binning visualization. If
true
, then the input field(s) in this method should refer to aggregate fields defined in thefeatureReduction
property of the layer.signal AbortSignaloptionalAllows for cancelable requests. If canceled, the promise will be rejected with an error named
AbortError
. See also AbortController.ReturnsType Description Promise<VisualVariableResult> Resolves to an instance of VisualVariableResult. Exampleslet layer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0" }); // visualization based on field and normalization field let colorParams = { layer: layer, view: view, 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){ let renderer = layer.renderer.clone(); renderer.visualVariables = [ response.visualVariable ]; layer.renderer = renderer; });
let layer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0" }); // visualization based off Arcade expression let colorParams = { layer: layer, view: view, valueExpression: "($feature.POP_POVERTY / $feature.TOTPOP_CY) * 100", sqlWhere: "TOTPOP_CY > 0", legendOptions: { title: "% of people living in poverty" } }; // when the promise resolves, apply the visual variable to the renderer colorRendererCreator.createVisualVariable(colorParams) .then(function(response){ let renderer = layer.renderer.clone(); renderer.visualVariables = [ response.visualVariable ]; layer.renderer = renderer; });
Type Definitions
-
Since: ArcGIS Maps SDK for JavaScript 4.9color since 4.2, AgeRendererResult added at 4.9. -
The result object of the createAgeRenderer() method. See the table below for details of each property.
- Properties
-
renderer ClassBreaksRenderer
The renderer object configured to best match the background of the view and the spread of the data. Set this on a layer's
renderer
property to update its visualization.visualVariable ColorVariableA color visual variable configured based on the statistics of the data and the background of the view.
unit StringThe time unit used to represent age in the output
renderer
.colorScheme ColorSchemeThe color scheme used by the visual variable.
defaultValuesUsed BooleanIndicates 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.
statistics SummaryStatisticsResultBasic statistics returned from a query to the service for data from the given field name or expression.
basemapId StringThe ID of the basemap used to determine the optimal fill color of the features.
basemapTheme StringIndicates whether the average color of the input view's basemap is
light
ordark
.
-
Since: ArcGIS Maps SDK for JavaScript 4.6color since 4.2, ClassBreaksRendererResult added at 4.6. -
The result object of the createClassBreaksRenderer() method. See the table below for details of each property.
- Properties
-
renderer ClassBreaksRenderer
The renderer object configured to best match the background of the view and the spread of the data. Set this on a layer's
renderer
property to update its visualization.classBreaksResult ClassBreaksResultThis object describes class breaks generated from data in a layer for a given field with a specified classification method.
colorScheme ColorSchemeThe color scheme used for the class breaks.
defaultValuesUsed BooleanIndicates 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 StringThe ID of the basemap used to determine the optimal fill color of the features.
basemapTheme StringIndicates whether the average color of the input view's basemap is
light
ordark
.
-
The result object of the createContinuousRenderer() method. See the table below for details of each property.
- Properties
-
renderer ClassBreaksRenderer
The renderer object configured to best match the view's background and the spread of the data. Set this on a layer's
renderer
property (or thefeatureReduction.renderer
property to update its visualization.visualVariable ColorVariableA color visual variable configured based on the statistics of the data and the view's background.
colorScheme ColorSchemeThe color scheme used by the visual variable.
defaultValuesUsed BooleanIndicates 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.
statistics SummaryStatisticsResultBasic statistics returned from a query to the service for data from the given field name or expression.
basemapId StringThe ID of the basemap used to determine the optimal fill color of the features.
basemapTheme StringIndicates whether the average color of the input view's basemap is
light
ordark
.
-
The result object of the createPCContinuousRenderer() method. See the table below for details of each property.
- Properties
-
renderer PointCloudStretchRenderer
The renderer object configured to best match the background of the view and the spread of the data. Set this object on the input layer's
renderer
property to update its visualization.colorScheme ColorSchemeThe color scheme used by the renderer.
defaultValuesUsed BooleanIndicates 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.
statistics SummaryStatisticsResultBasic statistics returned from a query to the service for data from the given field name.
basemapId StringThe ID of the basemap used to determine the optimal color scheme for the output renderer.
basemapTheme StringIndicates whether the average color of the input view's basemap is
light
ordark
.
-
The result object of the createPCTrueColorRenderer() method. See the table below for details of each property.
- Property
-
renderer PointCloudRGBRenderer
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.
-
The result object of the createVisualVariable() method. See the table below for details of each property.
- Properties
-
visualVariable ColorVariable
A color visual variable configured based on the statistics of the data and the view's background.
colorScheme ColorSchemeThe color scheme used by the visual variable.
statistics SummaryStatisticsResultBasic statistics returned from a query to the service for the given field or expression.
defaultValuesUsed BooleanIndicates 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 StringThe ID of the basemap used to determine the optimal fill color of the features.
basemapTheme StringIndicates whether the average color of the input view's basemap is
light
ordark
.authoringInfo AuthoringInfoAuthoring information related to the creation of the visual variable. This includes information related to UI inputs from sliders and selected themes.