require(["esri/smartMapping/renderers/size"], (sizeRendererCreator) => { /* code goes here */ });
import * as sizeRendererCreator from "@arcgis/core/smartMapping/renderers/size.js";
esri/smartMapping/renderers/size
This object contains helper methods for generating data-driven visualizations with continuous size 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 the view's background.
Known Limitations
- Currently, 3D symbols can only be generated for layers with a
point
geometry type. - SceneLayers with
mesh
geometryType or SceneLayers without thesupportsRenderer
andsupportsLayerQuery
capabilities enabled are not supported unless a predefined statistics object is passed to thestatistics
parameter of the method in conjunction with the layer. 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 |
---|---|---|---|
Generates a continuous size Renderer representing the age of features based on one or more fields. | size | ||
Generates a ClassBreaksRenderer that may be applied directly to the layer used to call this method. | size | ||
Generates a Renderer that may be applied directly to the layer used to call this method. | size | ||
This method generates an array of size visual variables with default stops that are optimally chosen based on the statistics queried for the indicated field or expression and mapped to appropriate sizes. | size | ||
Updates a renderer generated from createContinuousRenderer() that uses a specialty reference size variable (i.e. | size |
Method Details
-
createAgeRenderer
createAgeRenderer(params){Promise<AgeRendererResult>}
Since: ArcGIS Maps SDK for JavaScript 4.9size since 4.2, createAgeRenderer added at 4.9. -
Generates a continuous size 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 size visual variable that maps optimal sizes to data values returned from summary statistics.You are required to provide a
layer
,view
,startTime
, andendTime
to generate this renderer. Optionally, you can set aunit
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 size 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|KnowledgeGraphSublayerThe 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"
theme StringoptionalDefault Value: high-to-lowSets the size stops based on meaningful data values.
Value Description high-to-low The max data value is assigned the max size. The min data value is assigned the min size. All other values are interpolated. above The max data value is assigned the max size. The average data value is assigned the min size. All other values between the max data value and the average are interpolated. This is useful for mapping an increase in a variable over time, like an increase in population, or unemployment between two dates. below The min data value is assigned the max size. The average data value, is assigned the min size. All other values between the min data value and the average are interpolated. This is useful for mapping a decline in a variable over time, like a decrease in population, or unemployment between two dates. Possible Values:"high-to-low"|"above"|"below"
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.outlineOptimizationEnabled BooleanoptionalDefault Value: falseOnly for polygon layers. 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: falseIndicates 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.sizeScheme SizeSchemeoptionalIn authoring apps, the user may select a pre-defined size scheme. Pass the scheme object to this property to avoid getting one based on 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.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" }; // when the promise resolves, apply the renderer to the layer sizeRendererCreator.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 sizeRendererCreator.createAgeRenderer(ageParams) .then(function(response){ layer.renderer = response.renderer; });
-
createClassBreaksRenderer
createClassBreaksRenderer(params){Promise<ClassBreaksRendererResult>}
Since: ArcGIS Maps SDK for JavaScript 4.6size 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 size of each feature based on the value of the given
field
value. A default size scheme is determined based on the background of the view. Depending on theclassificationMethod
, class breaks (or data ranges) are generated based on the statistics of the data. Each feature is assigned a size 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 sizes 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 size 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|KnowledgeGraphSublayerThe 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.sizeScheme SizeSchemeoptionalIn authoring apps, the user may select a pre-defined size 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.
outlineOptimizationEnabled BooleanoptionalDefault Value: falseOnly for polygon layers. 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. 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 and only the symbol's height should be variable, for example with cylinders. 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 sized 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"
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. Examplesconst layer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0" }); // visualization based on field and normalization field const sizeParams = { layer: layer, view: view, field: "POP_POVERTY", normalizationField: "TOTPOP_CY", classificationMethod: "quantile", numClasses: 4 }; // when the promise resolves, apply the renderer to the layer sizeRendererCreator.createClassBreaksRenderer(sizeParams) .then(function(response){ layer.renderer = response.renderer; });
const layer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0" }); // visualization based off Arcade expression const sizeParams = { layer: layer, classificationMethod: "equal-interval", valueExpression: "($feature.POP_POVERTY / $feature.TOTPOP_CY) * 100", view: view, legendOptions: { title: "% of people living in poverty" } }; // when the promise resolves, apply the renderer to the layer sizeRendererCreator.createClassBreaksRenderer(sizeParams) .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 size visual variable that maps marker sizes to specific stop values based on queried statistics from the indicated field or expression.
In most cases you will provide a
layer
,view
, andfield
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 sizes 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 size visual variables 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|KnowledgeGraphSublayerThe layer for which the renderer 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.sizeScheme SizeSchemeoptionalIn authoring apps, the user may select a pre-defined size 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.theme StringoptionalDefault Value: high-to-lowDefines the size theme. For gridded datasets, the default is
reference-size
. For all other datasets, the default ishigh-to-low
.Value Description high-to-low The max data value is assigned the max size. The min data value is assigned the min size. All other values are interpolated. above The max data value is assigned the max size. The average data value is assigned the min size. All other values between the max data value and the average are interpolated. This is useful for mapping an increase in a variable over time, like an increase in population, or unemployment between two dates. below The min data value is assigned the max size. The average data value, is assigned the min size. All other values between the min data value and the average are interpolated. This is useful for mapping a decline in a variable over time, like a decrease in population, or unemployment between two dates. reference-size Since 4.30 When defined, creates a proportional size renderer with an outer ring that functions as a reference line representing the maximum data value (or other threshold). The ring is proportionally filled by an inner dot based on the feature's data value specified in field
(andnormalizationField
if defined). This is a good style for visualizing ratios and percentages. It works best for gridded datasets where geometries don't overlap, such as styles for binning (i.e.forBinning = true
), hexbin layers, or any other layer created with data aggregated to tessellated shapes. This parameter only applies to layers with apolygon
geometry type, or any layer that has binning enabled. This parameter is ignored ifvalueExpression
is specified in lieu of afield
.Possible Values:"high-to-low"|"above"|"below"|"reference-size"
referenceSizeOptions ObjectoptionalSince 4.30 Options for specifying the symbol used in a reference size visualization.
SpecificationsymbolStyle StringoptionalDefault Value: "circle"Defines the symbol shape to use in a reference size visualization. Using a
circle
shape works best across a variety of datasets, but other shape options are available for visualizing layers representing tessellated grids of other shapes.Possible Values:"circle"|"diamond"|"hexagon-flat"|"hexagon-pointy"|"square"
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.
outlineOptimizationEnabled BooleanoptionalDefault Value: falseOnly for polygon layers. 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: falseIndicates 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 size 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 size 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. 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 and only the symbol's height should be variable, for example with cylinders. 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 sized 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"
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. Examplesconst layer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0" }); // visualization based on field and normalization field const sizeParams = { layer: layer, view: view, field: "POP_POVERTY", normalizationField: "TOTPOP_CY" }; // when the promise resolves, apply the renderer to the layer sizeRendererCreator.createContinuousRenderer(sizeParams) .then(function(response){ layer.renderer = response.renderer; });
const layer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0" }); // visualization based off Arcade expression const sizeParams = { layer: layer, valueExpression: "($feature.POP_POVERTY / $feature.TOTPOP_CY) * 100", view: view, legendOptions: { title: "% of people living in poverty" }, theme: "above" }; // when the promise resolves, apply the renderer to the layer sizeRendererCreator.createContinuousRenderer(sizeParams) .then(function(response){ layer.renderer = response.renderer; });
-
createVisualVariables
createVisualVariables(params){Promise<VisualVariableResult>}
-
This method generates an array of size visual variables with default stops that are optimally chosen based on the statistics queried for the indicated field or expression and mapped to appropriate sizes.
There are two different ways this method may be called. The most common case is by providing a
layer
,view
, andfield
. This is the scenario where the statistics of the data aren't well known and the user doesn't know what sizes 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 asizeScheme
if you don't want one picked for you. In this case thetheme
options would be ignored.The resulting array of visual variables will contain exactly one size visual variable unless the
axis
parameter is set to "height".ParametersSpecificationparams ObjectInput parameters for generating size visual variables 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|KnowledgeGraphSublayerThe layer for which the visual variables are 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 StringThe 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.sizeScheme SizeSchemeoptionalIn authoring apps, the user may select a pre-defined size 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.theme StringoptionalDefault Value: high-to-lowSets the size stops based on meaningful data values.
Value Description high-to-low The max data value is assigned the max size. The min data value is assigned the min size. All other values are interpolated. above The max data value is assigned the max size. The average data value is assigned the min size. All other values between the max data value and the average are interpolated. This is useful for mapping an increase in a variable over time, like an increase in population, or unemployment between two dates. below The min data value is assigned the max size. The average data value, is assigned the min size. All other values between the min data value and the average are interpolated. This is useful for mapping a decline in a variable over time, like a decrease in population, or unemployment between two dates. Possible Values:"high-to-low"|"above"|"below"
referenceSizeOptions ObjectoptionalSince 4.30 When defined, creates a proportional size renderer with an outer ring that functions as a reference line representing a maximum data value (or threshold). The ring is proportionally filled by an inner dot based on the feature's data value specified in
field
(andnormalizationField
if defined). This is a good style for visualizing ratios and percentages. It works best for gridded datasets where geometries don't overlap, such as styles for binning (i.e.forBinning = true
), hexbin layers, or any other layer created with data aggregated to tessellated shapes. This parameter only applies to layers with apolygon
geometry type, or any layer that has binning enabled. This parameter is ignored ifvalueExpression
is specified in lieu of afield
.SpecificationsymbolStyle StringoptionalDefines the symbol shape to use in a reference size visualization. Using a
circle
shape works best across a variety of datasets, but other shape options are available for visualizing layers representing tessellated grids of other shapes.Possible Values:"circle"|"diamond"|"hexagon-flat"|"hexagon-pointy"|"square"
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.
sizeOptimizationEnabled BooleanoptionalDefault Value: falseIndicates 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 size 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 size 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.axis StringoptionalDefault Value: allWhen set to
all
, a single size variable that scales uniformly in all dimensions is generated. When set toheight
, the result contains two size visual variables: the first one sizes the height according to the field statistics, while the second defines a constant size for width and depth.Possible Values:"all"|"height"
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. Examplesconst layer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0" }); // visualization based on field and normalization field const sizeParams = { layer: layer, view: view, field: "POP_POVERTY", normalizationField: "TOTPOP_CY", theme: "below" }; // when the promise resolves, apply the visual variables to the renderer sizeRendererCreator.createVisualVariables(sizeParams) .then(function(response){ const renderer = layer.renderer.clone(); renderer.visualVariables = response.visualVariables; layer.renderer = renderer; });
const layer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0" }); // visualization based off Arcade expression const sizeParams = { layer: layer, valueExpression: "($feature.POP_POVERTY / $feature.TOTPOP_CY) * 100", view: view, legendOptions: { title: "% of people living in poverty" } }; // when the promise resolves, apply the visual variables to the renderer sizeRendererCreator.createVisualVariables(sizeParams) .then(function(response){ const renderer = layer.renderer.clone(); renderer.visualVariables = response.visualVariables; layer.renderer = renderer; });
-
updateRendererWithReferenceSize
updateRendererWithReferenceSize(params){Promise<(ClassBreaksRenderer|UniqueValueRenderer)>}
Since: ArcGIS Maps SDK for JavaScript 4.30size since 4.2, updateRendererWithReferenceSize added at 4.30. -
Updates a renderer generated from createContinuousRenderer() that uses a specialty reference size variable (i.e. AuthoringInfoVisualVariable.theme is set to
reference-size
). This would have already been generated in createContinuousRenderer.ParametersSpecificationparams ObjectInput parameters for updating an existing reference size visualization. See the table below for details of each parameter.
Specificationlayer FeatureLayer|SceneLayer|CSVLayer|GeoJSONLayer|WFSLayer|OGCFeatureLayer|StreamLayer|OrientedImageryLayer|CatalogFootprintLayer|KnowledgeGraphSublayerThe layer for which the renderer is updated.
renderer ClassBreaksRenderer|UniqueValueRendereroptionalThe renderer instance to update if not already set on the
layer
.view ViewThe view where the input layer is rendered.
field StringoptionalThe name of a numeric field used to dynamically change the inner dot size.
normalizationField StringoptionalThe name of a numeric field use to normalize the data in the input
field
.The size stops with which to update the reference size visualization. These values typically come from SizeSlider.stops.
referenceSizeOptions ObjectoptionalUpdates the symbol shape used in the reference size visualization.
SpecificationsymbolStyle StringoptionalDefines the symbol shape to use in a reference size visualization. Using a
circle
shape works best across a variety of datasets, but other shape options are available for visualizing layers representing tessellated grids of other shapes.Possible Values:"circle"|"diamond"|"hexagon-flat"|"hexagon-pointy"|"square"
sizeScheme SizeSchemeoptionalUse this property to update the color of the symbols.
typeScheme TypeSchemeoptionalOnly valid for reference size visualizations implemented in a UniqueValueRenderer. The scheme updates the colors of each category.
sizeOptimizationEnabled BooleanoptionalDefault Value: falseIndicates whether symbol sizes should vary based on view scale. When set, a valid MapView instance must be provided in the
view
parameter. For gridded layers (i.e. isGrid istrue
), size optimization is always enabled and therefore this parameter is ignored.forBinning BooleanoptionalIndicates whether the renderer is intended 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.ReturnsType Description Promise<(ClassBreaksRenderer|UniqueValueRenderer)> Resolves to the updated renderer with a specialty reference size variable. ExamplesizeSlider.on(["thumb-change", "thumb-drag"], async () => { // layer.renderer must already have a reference size variable const isReferenceSize = layer.renderer?.authoringInfo?.visualVariables.some( (vv) => vv.theme === "reference-size" ); if(isReferenceSize){ const renderer = await updateRendererWithReferenceSize({ layer, view, sizeStops: sizeSlider.stops }); layer.renderer = renderer; } });
Type Definitions
-
Since: ArcGIS Maps SDK for JavaScript 4.9size 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 view's background and the spread of the data. Set this on a layer's
renderer
property to update its visualization.visualVariables SizeVariable[]Size visual variables configured based on the statistics of the data and the size scheme.
unit StringThe time unit used to represent age in the output
renderer
.sizeScheme SizeSchemeThe size scheme used by the visual variables.
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 for the generated 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.6size 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 view's background 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.
sizeScheme SizeSchemeThe size scheme used by the visual variables.
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 background of the view and the spread of the data. Set this on a layer's
renderer
property to update its visualization.visualVariables SizeVariable[]Size visual variables configured based on the statistics of the data.
sizeScheme SizeSchemeThe size scheme used by the visual variables.
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
.isGrid BooleanSince 4.30 Indicates if the polygon layer used to generate the renderer was determined to be gridded. This is done when
referenceSizeOptions
are set for creating a reference size visualization.
-
The result object of the createVisualVariables() method. See the table below for details of each property.
- Properties
-
visualVariables SizeVariable[]
An array of size visual variables configured based on the statistics of the data and the view scale.
sizeScheme SizeSchemeThe size scheme used by the main visual variable.
defaultValuesUsed BooleanIndicates whether default values were 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 the given field 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
.authoringInfo AuthoringInfoAuthoring information related to the creation of the visual variable. This includes information related to UI inputs from sliders and selected themes.
isGrid BooleanSince 4.30 Indicates if the polygon layer used to generate the renderer was determined to be gridded. This is done when
referenceSizeOptions
are set for creating a reference size visualization.