Hide Table of Contents
esri/dijit/util
esri/layer/pixelFilters
esri/process
esri/support
esri/workers
Class: UniqueValueRenderer

require(["esri/renderers/UniqueValueRenderer"], function(UniqueValueRenderer) { /* code goes here */ });

Description

(Added at v1.4)
A unique value renderer symbolizes groups of graphics that have matching attributes. For more information about renderers, see Symbolizing graphics with renderers.

More information on working with rendering, smart mapping, and using visual variables can be found in the Data Visualization guide topic and the multiple samples referenced within this topic.

Samples

Search for samples that use this class.

Class hierarchy

esri/renderers/Renderer
|_esri/renderers/UniqueValueRenderer

Constructors

NameSummary
new UniqueValueRenderer(defaultSymbol, attributeField, attributeField2?, attributeField3?, fieldDelimeter?)Creates a new UniqueValueRenderer object.
new UniqueValueRenderer(json)Creates a new Unique Value Renderer.

Properties

NameTypeSummary
attributeFieldStringAttribute field renderer uses to match values.
attributeField2StringIf needed, specify an additional attribute field the renderer uses to match values.
attributeField3StringIf needed, specify an additional attribute field the renderer uses to match values.
backgroundFillSymbolFillSymbolA symbol used for polygon features as a background if the renderer uses point symbols, for example for bivariate types & size rendering.
colorInfoObjectDeprecated.
defaultLabelStringLabel for the default symbol used to draw unspecified values.
defaultSymbolSymbolDefault symbol used when a value or break cannot be matched.
fieldDelimiterStringString inserted between the values if multiple attribute fields are specified.
infosObject[]Each element in the array is an object that provides information about the unique values associated with the renderer.
legendOptionsObjectAn object containing a title property that describes the variable driving the visualization.
opacityInfoObjectDeprecated.
rotationInfoObjectDeprecated.
sizeInfoObjectDeprecated.
valueExpressionStringAn Arcade expression evaluating to either a string or a number.
valueExpressionTitleStringThe title identifying and describing the associated Arcade expression as defined in the valueExpression property.
valuesString[]Deprecated at v2.0, use infos instead. An array of values defined for the renderer.
visualVariablesObject[]This property allows you to define how to render values in a layer.

Methods

NameReturn typeSummary
addValue(valueOrInfo, symbol?)NoneAdds a unique value and symbol.
getColor(graphic, options?)ColorGets the color for the Graphic.
getOpacity(graphic, options?)NumberReturns the opacity value for the specified graphic.
getRotationAngle(graphic, options?)NumberReturns the angle of rotation (in degrees) for the graphic calculated using rotationInfo.
getSize(graphic, options?)NumberReturn the symbol size (in pixels) for the graphic, calculated using sizeInfo.
getSymbol(graphic)SymbolGets the symbol for the Graphic.
getUniqueValueInfo(graphic)ObjectReturns rendering and legend information (as defined by the renderer) associated with the given graphic.
getVisualVariablesForType(type)Object[]Returns the visual variable of the specified type.
hasVisualVariables()BooleanIndicates if the renderer has defined visualVariables.
removeValue(value)NoneRemoves a unique value.
setColorInfo(info)RendererDeprecated.
setOpacityInfo(info)RendererDeprecated.
setRotationInfo(info)RendererDeprecated.
setSizeInfo(info)RendererDeprecated.
setVisualVariables(visualParams)NoneSets the renderer with the specified visualVariables.
toJson()ObjectConverts object to its ArcGIS Server JSON representation.
Constructor Details

new UniqueValueRenderer(defaultSymbol, attributeField, attributeField2?, attributeField3?, fieldDelimeter?)

Creates a new UniqueValueRenderer object. Typically features are rendered based on the unique values of one attribute field. However up to three fields can be combined to generate a unique value. For example, if two fields are used which store the values A and B; and X, Y, and Z respectively, then the unique values for the renderer can be A:X, A:Y, A:Z, B:X, B:Y and B:Z, assuming ":" is the field delimiter.

Note: when using a function, do not specify values for attributeField2 and attributeField3.
Parameters:
<Symbol> defaultSymbol Required Default symbol for the renderer. This symbol is used for unmatched values. This parameter is required but can be null or an empty object.
<String | Function> attributeField Required Specify either the attribute field the renderer uses to match values or starting at version 3.3, a function that returns a value to be compared against unique values. If a function is specified the renderer will call this function once for every graphic drawn on the map. This can be used in cases where you want the unique values to be compared against a computed value that is not available via the attribute fields.
At version 3.0 the Class Breaks renderer can be used to render feature layer tracks. Specify the layer's trackIdField as the attributeField.
<String> attributeField2 Optional If needed, specify an additional attribute field the renderer uses to match values.
<String> attributeField3 Optional If needed, specify an additional attribute field the renderer uses to match values.
<String> fieldDelimeter Optional String inserted between the values of different fields. Applicable only when more than one attribute field is specifed for the renderer.
Sample:
require([
  "esri/renderers/UniqueValueRenderer", ... 
], function(UniqueValueRenderer, ... ) {
  var renderer = new UniqueValueRenderer(defaultSymbol, "SUB_REGION");
  ...
});

require([
  "esri/renderers/UniqueValueRenderer", ... 
], function(UniqueValueRenderer, ... ) {
  var renderer = new UniqueValueRenderer(defaultSymbol, function(feature){
    return feature.attributes.POP07_SQMI;
  });
  ...
});

new UniqueValueRenderer(json)

Creates a new Unique Value Renderer.
Parameters:
<Object> json Required JSON object representing the UniqueValueRenderer.
Sample:
require([
  "esri/renderers/UniqueValueRenderer", ... 
], function(UniqueValueRenderer, ... ) {
  var uvrJson = {"type": "uniqueValue",
    "field1": "SUB_REGION",
    "defaultSymbol": {
      "color": [0, 0, 0, 64],
      "outline": {
        "color": [0, 0, 0, 255],
        "width": 1,
        "type": "esriSLS",
        "style": "esriSLSNull"
      },
      "type": "esriSFS",
      "style": "esriSFSNull"
    },
    "uniqueValueInfos": [{
      "value": "Pacific",
      "symbol": {
        "color": [255, 0, 0, 128],
        "outline": {
          "color": [0, 0, 0, 255],
          "width": 1,
          "type": "esriSLS",
          "style": "esriSLSSolid"
        },
        "type": "esriSFS",
        "style": "esriSFSSolid"
      }
    }, {
      "value": "Mtn",
      "symbol": {
        "color": [0, 255, 0, 128],
        "outline": {
          "color": [0, 0, 0, 255],
          "width": 1,
          "type": "esriSLS",
          "style": "esriSLSSolid"
        },
        "type": "esriSFS",
        "style": "esriSFSSolid"
      }
    }]
  }
  var renderer = new UniqueValueRenderer(uvrJson);
  ...
});
Property Details

<String> attributeField

Attribute field renderer uses to match values. At version 3.0 the Unique Value renderer can be used to render feature layer tracks. Specify the layer's trackIdField as the attributeField

<String> attributeField2

If needed, specify an additional attribute field the renderer uses to match values. (Added at v2.0)

<String> attributeField3

If needed, specify an additional attribute field the renderer uses to match values. (Added at v2.0)

<FillSymbol> backgroundFillSymbol

A symbol used for polygon features as a background if the renderer uses point symbols, for example for bivariate types & size rendering. Only applicable to polygon layers. (Added at v3.7)

<Object> colorInfo

Deprecated. As of v3.13 use visualVariables instead. The object specification table defined here provides the specification for colorInfo objects within the visualVariables property.

An object defining a color ramp used to render the layer. See the following object specifications table for its properties. (Added at v3.8)
Object Specifications:
<colorInfo>
<Color[]> colors Required An array of colors defining the color ramp. The first color will be used to render minimum data value, and the last color will be used to render maximum data value. At least two colors are required. If there are three or more colors, the intermediate colors will be placed proportionally between the first and the last to create a multi-color ramp. Note: Specify either colors or stops to construct the color ramp.
<String> field Required Name of the feature attribute field that contains the data value.
<Object> legendOptions Optional An object providing options for displaying the color ramp in the legend. See the object specification table for legendOptions below.
<Number> maxDataValue Required Maximum data value.
<Number> minDataValue Required Minimum data value.
<String> normalizationField Optional Name of the feature attribute field by which the data value will be normalized.
<Object[]> stops Optional An array of objects defining the color ramp. Each object defines a stop on the color ramp. At least two stops are required.
  • (Required) Value is a number type and indicates the value in the data range.
  • (Required) Color is the color used to render the value.
  • string label property used by the Legend. When at least one stop has a label, only those stops with a label will be marked and labeled, (added at v3.12).
NOTE: Specify either colors or stops to construct the color ramp. If you use stops, then you do not need minDataValue and maxDataValue.
{
var stops = [
  {
    value: 50,
    color: new Color([255,0,0]),
    label: "50"
  }
]
}
<String> type Required This value must be colorInfo.
<String> valueExpression Optional An Arcade expression evaluating to a number. This expression can reference field values using the $feature global variable and perform mathematical calculations and logical evaluations at runtime. The values returned from this expression are the data used to drive the visualization. Therefore, this property is typically used as an alternative to field in visual variables.
<String> valueExpressionTitle Optional The title identifying and describing the associated Arcade expression as defined in the valueExpression property. This is displayed as the title of the corresponding color ramp in the Legend in the absence of a provided title in the legendOptions property.
<legendOptions>
<Boolean> showLegend Optional Indicates whether to show the color ramp in the legend.
<String> title Optional Text that describes the visualization. This is displayed as the title of the corresponding color ramp in the Legend and takes precedence over the field alias or valueExpressionTitle.
Sample:
renderer.setColorInfo({
  field: "M086_07",
  minDataValue: 0,
  maxDataValue: 100,
  colors: [
    new Color([255, 255, 255]),
    new Color([127, 127, 0])
  ]
});

<String> defaultLabel

Label for the default symbol used to draw unspecified values. (Added at v2.0)

<Symbol> defaultSymbol

Default symbol used when a value or break cannot be matched.

<String> fieldDelimiter

String inserted between the values if multiple attribute fields are specified. (Added at v2.0)

<Object[]> infos

Each element in the array is an object that provides information about the unique values associated with the renderer. The object has the following properties:

<String> value The unique value.
<Symbol> symbol The symbol used to display the value.
<String> label Label for the symbol used to draw the value.
<String> description Label for the symbol used to draw the value.
(Added at v2.0)

<Object> legendOptions

An object containing a title property that describes the variable driving the visualization. This is displayed as the title of the renderer in the Legend and takes precedence over a given fieldAlias or valueExpressionTitle. (Added at v3.19)

<Object> opacityInfo

Deprecated. As of v3.13 use visualVariables instead. The object specification table defined here provides the specification for opacityInfo objects within the visualVariables property.

An object that describes how opacity of features is calculated. See the object specifications table below for properties of the opacityInfo object. (Added at v3.11)
Object Specifications:
<legendOptions>
<Boolean> showLegend Optional Indicates whether to show the opacity ramp in the legend.
<String> title Optional Text that describes the visualization. This is displayed as the title of the corresponding opacity ramp in the Legend and takes precedence over the field alias or valueExpressionTitle.
<opacityInfo>
<String> field Required Name of the feature attribute field that contains the data value.
<Object> legendOptions Optional An object providing options for displaying the opacity ramp in the legend. See the object specification table for legendOptions above.
<Number> maxDataValue Required Maximum data value.
<Number> minDataValue Required Minimum data value.
<String> normalizationField Optional Name of the feature attribute field used to normalize the data value.
<Number[]> opacityValues Required An array of opacity values. Each value must be a number ranging from 0.0 to 1.0. The first value is used for features with minimum data value (or lower), the last value is used for features with maximum data value (or higher). At least two values are required. If there are three or more, the intermediate ones are applied proportionally between the first and last values. You need to specify either opacityValues or stops.
<Object[]> stops Required An array of objects, each with two properties: value and opacity. At least two stops are required. You need to specify opacityValues or stops. If you specify stops, then you do not need minDataValue and maxDataValue.
<String> type Required This value must be opacityInfo.
<String> valueExpression Optional An Arcade expression evaluating to a number. This expression can reference field values using the $feature global variable and perform mathematical calculations and logical evaluations at runtime. The values returned from this expression are the data used to drive the visualization. Therefore, this property is typically used as an alternative to field in visual variables.
<String> valueExpressionTitle Optional The title identifying and describing the associated Arcade expression as defined in the valueExpression property. This is displayed as the title of the corresponding opacity ramp in the Legend in the absence of a provided title in the legendOptions property.
Sample:
var opacityInfo = {
  field:"fieldname",
  normalizationField: "normalizationField",
  minDataValue:  0,
  maxDataValue:  100,
  // stops: [
  //   { value: 10, opacity: 0   }, 
  //   { value: 39, opacity: 0.5 },  
  //   { value: 68, opacity: 1   }   
  // ]
         
  // OR, you can specify alphaValues using:
  opacityValues:   [ 0, 1 ]
};

<Object> rotationInfo

Deprecated. As of v3.13 use visualVariables instead. The object specification table defined here provides the specification for rotationInfo objects within the visualVariables property.

Defines how marker symbols are rotated. Use rotation to depict wind direction, vehicle heading etc. Specify an object with the following properties. (Added at v3.7)
Object Specifications:
<rotationInfo>
<String | Function> field Required

Name of the feature attribute field that contains the angle of rotation. Or a function that returns the angle of rotation.

A function is useful in cases where the angle of rotation is not available in an attribute field but needs to be computed using a mathematical expression or formula. For example, you can specify a function to compute wind or current direction when the underlying data is stored as U or V vectors. View example below.

<String> rotationType Optional

Defines the origin and direction of rotation depending on how the angle of rotation was measured. Can be one of the following:

  • geographic: rotates the symbol from the north in a clockwise direction.
  • arithmetic: rotates the symbol from the east in a counter-clockwise direction.

The default value is "geographic".

<String> type Required This value must be rotationInfo.
<String> valueExpression Optional An Arcade expression evaluating to a number. This expression can reference field values using the $feature global variable and perform mathematical calculations and logical evaluations at runtime. The values returned from this expression are the data used to drive the visualization. Therefore, this property is typically used as an alternative to field in visual variables.
Sample:
// field value contains rotation variable
var rotationInfo = {
  type: "rotationInfo",
  field: "WindDirection",
  rotationType: "geographic"
};

// custom function defines rotation
var rotationInfo = {
  type: "rotationInfo",
  field: function(graphic){
    var U = graphic.attributes.U,
    V = graphic.attributes.V;

    //Oceanographic Convention
    return 360 + (180 / Math.PI) * Math.atan2(U,V);
  }
};

<Object> sizeInfo

Deprecated. As of v3.13 use visualVariables instead. The object specification table defined here provides the specification for sizeInfo objects within the visualVariables property.

Defines the size of the symbol where feature size is proportional to data value. Note: prior to v3.12, this property was known as proportionalSymbolInfo. See the object specifications table below for a list of its available properties.

Symbol size rendering can be applied to two types of data:
  • Data that represents a distance quantity. For example:
    • If you have tree locations defined as points and an attribute field with the radius of tree canopy, you can use proportional symbols to depict the actual ground area covered by each tree.
    • You can use proportionally sized lines to depict the width of water mains.
  • Data that represents a non-distance quantity. For example:
    • Display traffic data like roads and highways as line symbols where stroke width is proportional to the traffic count.
    • Create a census map of proportional marker symbols where the area of each symbol reflects the population of the state.

In addition, regardless of the type of data described above, you can map a range of data values to a range of symbol sizes.

For point features, maker size is varied in proportion to the data value. For line features, stroke width is varied.

(Added at v3.7)
Object Specifications:
<legendOptions>
<Number[]> customValues Optional An array of numbers representing the values to use for the stops in the legend. For example, if the size stops in the legend are 13, 171, 286, 404, and 534, you can adjust the stops in the legend to use more rounded numbers by setting them to this property. For example, sizeInfo.legendOptions.customValues = [10, 150, 300, 400, 500]. See the example snippet below.
<Boolean> showLegend Optional Indicates whether to show the size ramp in the legend.
<String> title Optional Text that describes the visualization. This is displayed as the title of the corresponding size ramp in the Legend and takes precedence over the field alias or valueExpressionTitle.
<sizeInfo>
<String> expression Optional Deprecated. As of v3.19 use valueExpression instead. Allows a size to be defined based on the scale. "view.scale" is the only expression currently supported. Added at 3.14
<String | Function> field Required Required name of the feature attribute field that contains the data value. Or a function that returns the data value.
<Object> legendOptions Optional An object providing options for displaying the size ramp in the legend. See the object specification table for legendOptions above.
<Number> maxDataValue Optional Maximum data value.
<Object> maxSize Required Specifies the largest marker size to use at any given map scale. Note: This is required if valueUnit is set to "unknown". In version 3.13, this could only be set as a number which represented the symbol size in pixels. Beginning with 3.14, it now is an object that contains:
  • expression: (Required) A string value that allows a size to be defined based on the scale. "view.scale" is the only expression currently supported, but is subject to change in future implementations.
  • stops: (Required) An array of objects that define the maximum size of the symbol at various values of the expression. Each object in the array has a numeric size property and a numeric value property. If the value calculated from the expression matches the value of a stop, than the size corresponding to that stop is selected.

    For example, if expression is set to "view.scale", the value corresponds to the map's scale. The size represents the maximum symbol size (in pixels) that corresponds to this scale. If the map scale matches the scale value of a stop, the size corresponding to that stop value is used as the maximum symbol size for the features. If the map scale value falls between two stops, the maximum symbol size is interpolated between the sizes of the two stops.

    The minSize and maxSize stop values are usually the same, although it is possible to have different values depending on how minSize is calculated versus the maxSize.

    The sample snippet below illustrates a scenario where the stops are optimized and minSize and maxSize values are different. In this snippet, all the scales smaller than 288895 have a minSize of 16 and maxSize of 80. This could be optimized by removing the first stop from both minSize and maxSize. The scale values would remain identical even after removing the first stop. This could vary depending on how many consecutive stops have the same size.
    {
      "type": "sizeInfo",
    
      "field": "pop2000",
      "minDataValue": 493782,
      "maxDataValue": 33871648,
      "valueUnit": "unknown",
    
      "minSize": {
        "type": "sizeInfo",
        "expression": "view.scale",
        "stops": [
          { "value": 1128,      "size": 16 },
          { "value": 288895,    "size": 16 },
          { "value": 73957191,  "size": 9 },
          { "value": 591657528, "size": 2 }
        ]
      },
    
      "maxSize": {
        "type": "sizeInfo",
        "expression": "view.scale",
        "stops": [
          { "value": 1128,      "size": 80 },
          { "value": 288895,    "size": 80 },
          { "value": 73957191,  "size": 50 },
          { "value": 591657528, "size": 25 }
        ]
      },
    }
    
  • type: String value indicating the type of rendering, e.g., "sizeInfo".
  • target: String value indicating that the sizeInfo should be applied to the outline of polygons. This value can be "outline" or null.
  "maxSize": {
    "type": "sizeInfo",
    "expression": "view.scale",
    "stops": [
      {"value": 1128, "size": 80},
      {"value": 288895, "size": 80},
      {"value": 73957191, "size": 50},
      {"value": 591657528, "size": 25}
    ]
  }
<Number> minDataValue Required Minimum data value (required if valueUnit is "unknown").
<Object> minSize Required Specifies the smallest marker size to use at any given map scale. Note: This is required if valueUnit is set to "unknown". In version 3.13, this could only be set as a number which represented the symbol size in pixels. Beginning with 3.14, it now is an object that contains:
  • expression: (Required) A string value that allows a size to be defined based on the scale. "view.scale" is the only expression currently supported, but is subject to change in future implementations.
  • stops: (Required) An array of objects that define the minimum size of the symbol at various values of the expression. Each object in the array has a numeric size property and a numeric value property. If the value calculated from the expression matches the value of a stop, than the size corresponding to that stop is selected.

    For example, if expression is set to "view.scale", the value corresponds to the map's scale. The size represents the minimum symbol size (in pixels) that corresponds to this scale. If the map scale matches the scale value of a stop, the size corresponding to that stop value is used as the minimum symbol size for the features. If the map scale value falls between two stops, the minimum symbol size is interpolated between the sizes of the two stops.

    The minSize and maxSize stop values are usually the same, although it is possible to have different values depending on how minSize is calculated versus the maxSize.

    The sample snippet below illustrates a scenario where the stops are optimized and minSize and maxSize values are different. In this snippet, all the scales smaller than 288895 have a minSize of 16 and maxSize of 80. This could be optimized by removing the first stop from both minSize and maxSize. The scale values would remain identical even after removing the first stop. This could vary depending on how many consecutive stops have the same size.
    {
      "type": "sizeInfo",
    
      "field": "pop2000",
      "minDataValue": 493782,
      "maxDataValue": 33871648,
      "valueUnit": "unknown",
    
      "minSize": {
        "type": "sizeInfo",
        "expression": "view.scale",
        "stops": [
          { "value": 1128,      "size": 16 },
          { "value": 288895,    "size": 16 },
          { "value": 73957191,  "size": 9 },
          { "value": 591657528, "size": 2 }
        ]
      },
    
      "maxSize": {
        "type": "sizeInfo",
        "expression": "view.scale",
        "stops": [
          { "value": 1128,      "size": 80 },
          { "value": 288895,    "size": 80 },
          { "value": 73957191,  "size": 50 },
          { "value": 591657528, "size": 25 }
        ]
      },
    }
    
  • type: String value indicating the type of rendering, e.g., "sizeInfo".
  • target: String value indicating that the sizeInfo should be applied to the outline of polygons. This value can be "outline" or null.
  "maxSize": {
    "type": "sizeInfo",
    "expression": "view.scale",
    "stops": [
      {"value": 1128, "size": 80},
      {"value": 288895, "size": 80},
      {"value": 73957191, "size": 50},
      {"value": 591657528, "size": 25}
    ]
  }
<String> normalizationField Optional Name of the feature attribute field used for data normalization. The data value obtained from field is divided by the value obtained from normalizationField before calculating the symbol size.
<Object[]> stops Required Added at 3.14 An array of objects that define the size of the symbol. It takes the following properties:
  • size: A numeric value indicating the size of the symbol
  • value: A numeric value indicating the value the symbol represents.
var stops = 
 [
   { "value": 1128, "size": 16 },
   { "value": 288895, "size": 16 },
   { "value": 73957191, "size": 9 },
   { "value": 591657528, "size": 2 }
 ]
<String> type Required This value must be sizeInfo.
<String> valueExpression Optional An Arcade expression evaluating to a number. This expression can reference field values using the $feature global variable and perform mathematical calculations and logical evaluations at runtime. The values returned from this expression are the data used to drive the visualization. Therefore, this property is typically used as an alternative to field in visual variables.
<String> valueExpressionTitle Optional The title identifying and describing the associated Arcade expression as defined in the valueExpression property. This is displayed as the title of the corresponding size ramp in the Legend in the absence of a provided title in the legendOptions property.
<String> valueRepresentation Required Specifies what the data value measures if it represents a real world distance (required if valueUnit is not "unknown"). The following values are supported:
  • radius: Data value represents the radius of a circular feature.
  • diameter: Data value represents the diameter of a circular feature.
  • area: Data value represents the area of a feature.
  • width: Data value represents the width of a line.
  • distance: Data value represents the distance from the center line (one half of the width).
<String> valueUnit Required Required unit of measurement if the data represents a real world distance quantity. Valid values are: "unknown","inches", "feet", "yards", "miles", "nautical-miles", "millimeters", "centimeters", "decimeters", "meters", "kilometers", "decimal-degrees".

If the data value represents a non-distance quantity (for example traffic count, census data) then valueUnit should be set to "unknown".
Sample: Data representing distance quantity:
{
  field: "tree_canopy",
  valueUnit: "meters",
  valueRepresentation: "diameter"
}
//ground area covered by trees measured in square feet. 
{
  field: "GroundArea", 
  valueUnit: "feet",
  valueRepresentation: "area"
}
Specify minSize and maxSize to smooth out outliers.

Data representing a non-distance quantity.

{
  field: "avg_daily_traffic",
  valueUnit: "unknown",
  minSize: 1000,
  minDataValue: 8
}
Specify maxSize to smooth out outliers.

Map a range of data values to a range of symbol sizes:

{
  field: "avg_daily_traffic",
  valueUnit: "unknown",
  minSize: 1,
  maxSize: 10,
  minDataValue: 1000,
  maxDataValue: 100000
}
To use legendOptions:
renderer.sizeInfo({
  field: "POP_PER_DOC",
  minSize: 2,
  maxSize: 20,
  minDataValue: 100,
  maxDataValue: 10000,
  valueUnit: "unknown",
  legendOptions: {
    customValues: [100, 200, 300, 10000]
  }
});

<String> valueExpression

An Arcade expression evaluating to either a string or a number. This expression can reference field values using the $feature global variable and perform mathematical calculations and logical evaluations at runtime. This property is typically used as an alternative to attributeField. (Added at v3.19)

<String> valueExpressionTitle

The title identifying and describing the associated Arcade expression as defined in the valueExpression property. This is displayed as the title of the renderer in the Legend in the absence of a provided title in the legendOptions property. (Added at v3.19)

<String[]> values

Deprecated at v2.0, use infos instead. An array of values defined for the renderer.

<Object[]> visualVariables

This property allows you to define how to render values in a layer. It is composed of an array of objects (called "visual variables"), each of which contains the type of drawing property, the axis the variable is applied to, and additional properties for the variable. Variables (or data values) may be visualized in one of four ways: color, size, opacity, and rotation. The following bullet points outline how each visual variable may be defined:
  • Color - To visualize values by color, set the type property of the visual variable object to colorInfo. Then define the rest of the object using the colorInfo object specification table.NOTE:This does not apply to VectorFieldRenderer.
  • Size - To visualize values by size, set the type property of the visual variable object to sizeInfo. Then define the rest of the object using the sizeInfo object specification table.
  • Opacity - To visualize values by opacity, set the type property of the visual variable object to opacityInfo. Then define the rest of the object using the opacityInfo object specification table.
  • Rotation - Added as a visual variable at version 3.15. To visualize values by rotation, set the type property of the visual variable object to rotationinfo. Then define the rest of the object using the rotationInfo object specification table.
(Added at v3.13)
Sample: Color example:

"visualVariables": [
  {
    "type": "colorInfo",
    "field": "M086_07",
    "normalizationField": "AREA",
    "stops": [
       {
         "value": 0,
         "color": new Color([255,255,255]),
         "label": "< 30.900"
       },
      {
         "value": 100,
         "color": new Color([127,127,0]),
         "label": "37.415"
      }
    ]
 }]

Size example:

"visualVariables": [
  {
    "type": "sizeInfo",
    "field": "pop2000",
    "minDataValue": 493782,
    "maxDataValue": 33871648,
    "valueUnit": "unknown",

    "minSize": {
      "type": "sizeInfo",
      "expression": "view.scale",
      "stops": [
        { "value": 1128, "size": 16 },
        { "value": 288895, "size": 16 },
        { "value": 73957191, "size": 9 },
        { "value": 591657528, "size": 2 }
       ]
      },

     "maxSize": {
     "type": "sizeInfo",
     "expression": "view.scale",
     "stops": [
       { "value": 1128, "size": 80 },
       { "value": 288895, "size": 80 },
       { "value": 73957191, "size": 50 },
       { "value": 591657528, "size": 25 }
      ]
  }
  }]

Opacity example:

{
  "type": "opacityInfo",
  "field": "PCP",
  "stops": [{
    "value": 0,
    "opacity": 100
  }, {
    "value": 10,
    "opacity": 0
  }]
}

Rotation example:

{
  "type": "rotationInfo",
  "field": "Rotate",
  "rotationType": "arithmetic"
}
Method Details

addValue(valueOrInfo, symbol?)

Adds a unique value and symbol. You can provide the value and its associated symbol as individual arguments or as an info object.
Parameters:
<String | Object> valueOrInfo Required Value to match with. The value can be provided as individual arguments or as an info object. See the object specifications table below for the structure of the info object.
<Symbol> symbol Optional Symbol used for the value.
Object Specifications:
<valueOrInfos>
<String> description Required Description for the symbol used to draw the value
<String> label Required Label for the symbol used to draw the value
<Symbol> symbol Required The symbol used to display the value
<String> value Required The unique value.
Sample:
require([
  "esri/renderers/UniqueValueRenderer", "esri/symbols/SimpleFillSymbol", ... 
], function(UniqueValueRenderer, SimpleFillSymbol, ... ) {
  //Specify the value and symbol as individual arguments.
  var renderer = new UniqueValueRenderer( ... );
  renderer.addValue("KS", symbol);

  //Specify the symbol and value using the info object.
  renderer.addValue({
    value: "KS",
    symbol: new SimpleFillSymbol(),
    label: "Kansas",
    description: "The Sunflower State"
  });
  ...
});

getColor(graphic, options?)

Gets the color for the Graphic. (Added at v3.8)
Return type: Color
Parameters:
<Graphic> graphic Required Graphic to get color from.
<Object> options Optional This optional parameter supports colorInfo. If none is provided, the Renderer.colorInfo will be used.

getOpacity(graphic, options?)

Returns the opacity value for the specified graphic. This is calculated using the opacityInfo definition. (Added at v3.11)
Return type: Number
Parameters:
<Graphic> graphic Required Returns the opacity value appropriate for the given graphic. This value is calculated based on the opacityInfo definition.
<Object> options Optional This optional parameter supports opacityInfo. If none is provided, the Renderer.opacityInfo will be used.

getRotationAngle(graphic, options?)

Returns the angle of rotation (in degrees) for the graphic calculated using rotationInfo. (Added at v3.7)
Return type: Number
Parameters:
<Graphic> graphic Required An input graphic for which you want to get the angle of rotation.
<Object> options Optional This optional parameter supports rotationInfo. If none is provided, the Renderer.rotationInfo will be used.

getSize(graphic, options?)

Return the symbol size (in pixels) for the graphic, calculated using sizeInfo. (Added at v3.7)
Return type: Number
Parameters:
<Graphic> graphic Required The graphic for which you want to calculate the symbol size.
<Object> options Optional This optional parameter supports sizeInfo. If none is provided, the Renderer.sizeInfo will be used.

getSymbol(graphic)

Gets the symbol for the Graphic.
Return type: Symbol
Parameters:
<Graphic> graphic Required Graphic to symbolize. Used when creating a custom renderer.

getUniqueValueInfo(graphic)

Returns rendering and legend information (as defined by the renderer) associated with the given graphic. (Added at v3.7)
Return type: Object
Parameters:
<Graphic> graphic Required The graphic whose rendering and legend information will be returned.

getVisualVariablesForType(type)

Returns the visual variable of the specified type. (Added at v3.13)
Return type: Object[]
Parameters:
<String> type Required The type of visual variable desired. Supported Values: colorInfo (does not apply to VectorFieldRenderer) | sizeInfo | opacityInfo
Sample:
var colorVisVar = renderer.getVisualVariablesForType('colorInfo');

hasVisualVariables()

Indicates if the renderer has defined visualVariables. (Added at v3.13)
Return type: Boolean

removeValue(value)

Removes a unique value. After making changes, you must refresh the graphic.
Parameters:
<String> value Required Value to remove.

setColorInfo(info)

Deprecated. As of v3.13 use setVisualVariables() instead.

Sets the colorInfo property. (Added at v3.8)
Return type: Renderer
Parameters:
<Object> info Required An info object that defines the color. It has the same properties as colorInfo.
Sample:
renderer.setColorInfo({
      field:"fieldname",
      minDataValue:  0,
      maxDataValue:  100,
      colors: [
         new Color([255, 255, 255]),
         new Color([127, 127, 0])
      ],
      //stops: [
      //  { value: 10, color: new Color([0, 0, 0, 0]) },     // -1 stddev
      //  { value: 39, color: new Color([0, 128, 64]) },     // average
      //  { value: 68, color: new Color([255, 0, 0, 0.8]) }  // 1 stddev
      //]
 });

setOpacityInfo(info)

Deprecated. As of v3.13 use setVisualVariables() instead.

Sets opacity info for the renderer as defined by the info parameter.

The info parameter is an object with the same properties as opacityInfo.

(Added at v3.11)
Return type: Renderer
Parameters:
<Object> info Required The info parameter is an object with the same properties as opacityInfo.

Sample:
renderer.setOpacityInfo({
      field:"fieldname",
      minDataValue:  0,
      maxDataValue:  100,
      // stops: [
      //   { value: 10, opacity: 0   }, 
      //   { value: 39, opacity: 0.5 },  
      //   { value: 68, opacity: 1   }   
      // ]
         
      // OR, you can specify alphaValues using:
      opacityValues:   [ 0, 1 ]
 });

setRotationInfo(info)

Deprecated. As of v3.13 use setVisualVariables() instead.

Modifies rotation info for the renderer. The info argument has the same properties as rotationInfo. (Added at v3.7)
Return type: Renderer
Parameters:
<Object> info Required An object with the same properties as rotationInfo.
Sample:

renderer.setRotationInfo({
   field: "WIND_DIRECT"
});

setSizeInfo(info)

Deprecated. As of v3.13 use setVisualVariables() instead.

Set size info of the renderer to modify the symbol size based on data value. The info object has the same properties as sizeInfo.

NOTE:
  • Take note that setting type only applies if rendering sizeInfo using visualvariables.
  • Prior to v3.12, this property was known as setProportionalSymbolInfo.
(Added at v3.7)
Return type: Renderer
Parameters:
<Object> info Required An object with the same properties as sizeInfo.
Sample:

renderer.setSizeInfo({
  field:"WIND_SPEED",
  minSize:3,
  maxSize:20,
  minDataValue:5,
  maxDataValue:50
 });

layer.setRenderer(renderer);

setVisualVariables(visualParams)

Sets the renderer with the specified visualVariables. (Added at v3.13)
Parameters:
<Object[]> visualParams Required The specified visualVariables.
Sample:
//This specific example uses sizeInfo.
  renderer.setVisualVariables([{
    type: "sizeInfo",
    field: "TOTPOP_CY",
    minSize: 5,
    maxSize: 50,
    minDataValue: 50,
    maxDataValue: 1000
  }]);

toJson()

Converts object to its ArcGIS Server JSON representation. (Added at v2.1)
Return type: Object
Show Modal