InfoSymbol and InfoRenderer

Version 3.7

Working with InfoSymbols

InfoSymbols are small windows containing user interface (UI) controls and data that provide information about a point feature on a map. Unlike InfoWindows, multiple InfoSymbols can be displayed on a map at one time.

InfoSymbol has two properties, infoPlacement and infoRenderer. The infoPlacement property determines the orientation of the symbol. Refer to the InfoPlacement class for the list of possible values.

The infoRenderer property is of type IFactory and can be defined as either inline or external. The infoRenderer contains the definition of UI controls to add to the InfoSymbol and the data that determines its appearance. Once the InfoSymbol has been created, it can be assigned as a graphic symbol, similar to a MarkerSymbol.

Defining inline infoRenderer

You can define infoRenderer as inline (in other words, defined in the same file as InfoSymbol).

To define an inline infoRenderer, do the following:

  1. Insert InfoSymbol and infoRenderer tags.
  2. Define UI controls within the <fx:Component>tag. These will be the contents of InfoSymbol.
  3. If necessary, use outerDocument to include variables and methods outside <fx:Component>.
<esri:InfoSymbol id="infoSymbol1">
                <mx:Panel id="myPanel" height="100%"
                          width="100%" backgroundAlpha="0"
                <mx:Button id="myButton" height="100%"

Defining external infoRenderer

Defined in a separate file from InfoSymbol, external infoRenderers are preferred because of their modular, reusable design. The external infoRenderer is defined by taking all the content that would be contained between the <fx:Component> tags and placing it in a discrete MXML or ActionScript file. An example of an infoRenderer in a separate MXML file called MyInfoRenderer.mxml will look like below:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:s="library://"
    <mx:Label text="State Fips: {data.STATE_FIPS}"/>
    <mx:Label text="Abbreviation: {data.STATE_ABBR}"/>
    <mx:Label text="Area: {data.AREA}"/>

Once defined, the infoRenderer can be used by any InfoSymbol in ActionScript or MXML. To set the infoRenderer in ActionScript, construct your code similarly to the following:

var mySymbol:InfoSymbol = new InfoSymbol();
mySymbol.infoRenderer = new ClassFactory(MyInfoRenderer);
myGraphic.symbol = mySymbol;

To set the infoRenderer in MXML, construct your code similarly to the following:

<esri:InfoSymbol id="infoSymbol1" infoRenderer="MyInfoRenderer"/>


InfoSymbol can only be assigned to points. To add InfoSymbols to multipoints, convert them to points. To add InfoSymbols to lines or polygons, you can find a label point of the line or polygon and either change the graphic's geometry to center point or create a new point graphic at the location of the center point.

For example:

var polygon: Polygon;
var centerPt: MapPoint;

polygon = myGraphic.geometry as Polygon;
centerPt =;

myGraphic.geometry = centerPt;