Symbols and Renderers

Version 3.7


Symbols define the non-geographic aspects of a graphic's appearance, including color, border width, transparency, and so on. The ArcGIS API for Flex includes many symbol classes, each of which allows you to specify symbology in a unique way. Each symbol type is also specific to one geometry type (that is, point, line, or polygon).

The following table lists the different types of symbols available with the ArcGIS API for Flex.



Symbolizes points with images


Symbolizes points with simple shapes

SimpleLineSymbol and CartographicLineSymbol

Symbolizes lines with pre-defined styles


Symbolizes polygons with a specified fill style


Symbolizes polygons with an image


Symbolizes text at points on a graphics layer


Symbolizes multiple symbols on a single graphic


Symbolizes point data with small window showing UI control and data. For more information, see the topic InfoSymbol and InfoRenderer.

The symbol of a graphic can be determined in the following ways:

  • As the graphic's defined symbol.
  • As a renderer defined in the layer.
  • As a symbol defined in the layer.
  • As a symbol directly on the graphics layer. This works as the default for graphics that do not have a specific symbol or renderer.


A renderer defines a set of symbols that will be used for graphics in a graphics layer. You can use renderers to symbolize features with different colors or sizes based on a particular field attribute.

There are four types of renderers provided with the ArcGIS API for Flex. All of these renderer classes reside in the com.esri.ags.renderers package.


While it is possible to have different geometries (for example, points and lines in the same graphics layer), renderers work best when the layer has only one type of geometry.

Simple renderer

A simple renderer uses the same symbol for every graphic. All you do is specify the symbol to be used by the renderer, then apply the renderer to the graphics layer. This is equivalent to setting the symbol on the graphics layer.

<esri:GraphicsLayer id="graphicsLayer">
        <esri:SimpleRenderer symbol="{smallSym}"/>


<esri:GraphicsLayer id="graphicsLayer" symbol="{smallSym}"/>

Class breaks renderer

A class breaks renderer symbolizes each graphic based on the value of one of its fields. Graphics with field values inside the class break (a.k.a. range) will all use the same symbol. The breaks define the values at which the symbology changes. For example, suppose you have a 'buildings' layer with a field that defines the building's age. You want to symbolize buildings constructed since the year 2000 in green, buildings constructed between 1980 and 2000 in yellow, and buildings built before 1980 with red. This would be a good scenario for a class breaks renderer. To use a class breaks renderer, you simply add one or more breaks. Each break specifies the symbol to use and the minimum and maximum values that will be used for that symbol. The following code example shows how you can explicitly define the breaks.

var smallSym:SimpleMarkerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,6, 0xFF0000, 0.7);
var mediumSym:SimpleMarkerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, 0xFF0000, 0.7);
var largeSym:SimpleMarkerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,16, 0xFF0000, 0.7);

var classBreaksRenderer:ClassBreaksRenderer = new ClassBreaksRenderer();
classBreaksRenderer.field = "BUILD_DATE";
var classBreakInfos:Array = [
    new ClassBreakInfo(smallSym, Number.NEGATIVE_INFINITY, 1980),
    new ClassBreakInfo(mediumSym, 1980, 2000),
    new ClassBreakInfo(largeSym, 2000, Number.POSITIVE_INFINITY)

classBreaksRenderer.infos = classBreakInfos;
graphicsLayer.renderer = classBreaksRenderer;

If there is no maximum limit on a break, you can use "Number.POSITIVE_INFINITY for the maximum value. Similarly, you can use Number.NEGATIVE_INFINITY when there is no minimum.

Any value that is greater than or equal to the minimum will be included in the break. Any value that is less than the maximum will be included in the break. Consequently, if you have two breaks, 0–10 and 10–20, the value 10 would fall in the second break (10–20). Avoid creating overlapping breaks or gaps between breaks. You can also define breaks mathematically. For example, you can do some basic arithmetic to ensure that each break falls an equal distance apart given the input data (sometimes known as an equal interval classification).

var numRanges : int = 10;
var breaks:Number = (max - min) / numRanges;
for (var i:int = 0; i < numRanges; i++)
    classBreakInfos.push(new ClassBreakInfo(
        new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, (i+1)*5, 0xFF0000, 0.7),
        min + (i*breaks),
        min + ((i+1)*breaks)

Unique value renderer

A unique value renderer symbolizes groups of graphics that have matching fields. For example, you can use a unique value renderer to symbolize zoning designations: red for Residential, green for Industrial, blue for Commercial, and so on. To define a unique value renderer, you specify the field on which to base it, and an optional defaultSymbol for values that are not covered by a specific UniqueValueInfo. Each UniqueValueInfo contains the specific value and symbol to use for each unique value.

<esri:SimpleFillSymbol id="rFill" alpha="0.5" color="0xFF0000"/>
<esri:SimpleFillSymbol id="gFill" alpha="0.5" color="0x00FF00"/>
<esri:SimpleFillSymbol id="bFill" alpha="0.5" color="0x0000FF"/>

<esri:UniqueValueRenderer id="uniqueValueRenderer" field="ZONING">
    <esri:UniqueValueInfo value="Residential" symbol="{rFill}"/>
    <esri:UniqueValueInfo value="Industrial" symbol="{gFill}"/>
    <esri:UniqueValueInfo value="Commercial" symbol="{bFill}"/>

The equivalent code with ActionScript:

var rFill:SimpleFillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, 0xFF0000, 0.5);
var gFill:SimpleFillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, 0x00FF00, 0.5);
var bFill:SimpleFillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, 0x0000FF, 0.5);

var uniqueValuerenderer:UniqueValueRenderer = new UniqueValueRenderer();
uniqueValuerenderer.field = "ZONING";
var uniqueValueInfos:Array =[];
uniqueValueInfos.push(new UniqueValueInfo(rFill, "Residential"));
uniqueValueInfos.push(new UniqueValueInfo(gFill, "Industrial"));
uniqueValueInfos.push(new UniqueValueInfo(bFill, "Commercial"));
uniqueValuerenderer.infos = uniqueValueInfos;
graphicsLayer.renderer = uniqueValuerenderer;

Values that aren't added to the list are not drawn unless you specify a defaultSymbol on the UniqueValueRenderer, in which case those graphics are drawn with the default symbol.

Temporal renderer


This section specifically discusses temporal rendering. For more information regarding working with time data, see Time-aware layers.

A temporal renderer is a custom renderer where the symbology of a FeatureLayer is displayed based upon the featurelayer's time field. Temporal renderers are useful when visualizing historic or real-time data such as hurricanes or earthquake occurrences.

The observationRenderer property provides a default set of symbology for features in a time-based layer. This default symbology can be overridden by the latestObservationRenderer and the trackRenderer to provide additional ways to graphically represent the features that are returned from a featurelayer. While it is theoretically possible to have any renderer that implements the IRenderer interface be used as the observationRenderer property, it typically makes sense to only use a SimpleRenderer, ClassBreaksRenderer, or UniqueValueRenderer.

The latestObservationRenderer property provides a default set of symbology for the last time-based feature returned per the featurelayer's time field. If no time field has been specified than just the last observation that is returned from the featurelayer will be symbolized. Whatever symbology properties that have been set (for example: a symbol’s color, size, and style) for the latestObservationRenderer will override what was set for the observationRenderer. While it is theoretically possible to have any renderer that implements the IRenderer interface be used as the latestObservationRenderer property, it typically makes sense to only use a SimpleRenderer, ClassBreaksRenderer, or UniqueValueRenderer.

The trackRenderer property provides polyline based symbology that connects markers (i.e. points) for time-based features per the feature layer's time field. If no time field has been specified than all observations that are returned from the feature layer will be symbolized in sequential order using the polyline graphic. The polyline graphic that is drawn begins with the first temporal observation and connects-the-dots as the phenomena moves spatially through time.

The observationAger property is an optional technique to modify a symbol’s size, color, and opacity for the renderers applied to the TemporalRenderer as a feature’s time stamp adjusts. Two observationAger’s are supported: the TimeRampAger and TimeClassBreaksAger. The TimeRampAger will modify the rendering of entire set of features and graduate the symbology based upon the set properties (except for the latestObservationRenderer). The TimeClassBreaksAger will modify the rendering of a specific set of defined groups based upon a range of values. If a specific group has not been defined by the TimeClassBreaksAger than the observationRenderer will take precedence; additionally the latestObservationRenderer takes precedence if set.

To see a working sample that uses a temporal renderer with a TimeRampAger, see Time_rendered_5K_run_(gpx).

In this topic
  1. Symbols
  2. Renderers