Graphic Custom Symbols

We refactored the Symbol class for the next release of the Flex api for ArcGIS Server so it can be easily customized. Here is a simple custom symbol:

package com.esri.symbol
{
    
import com.esri.ags.Map;
import com.esri.ags.geometry.Geometry;
import com.esri.ags.geometry.MapPoint;
import com.esri.ags.symbol.Symbol;

import flash.display.Sprite;

/**
 * Simple custom class with variable color property.
 */ 
public class CustomSymbol extends Symbol
{
    private var m_color : Number;
   
    /**
     * Constructor
     * @param color optional color.  Default 0xFF0000
     */ 
    public function CustomSymbol( color : Number = 0xFF0000 )
    {
        m_color= color;
    }        
    
    [Bindable]
    /**
     * Bindable color property. dispatch Event.CHANGE on change.
     * Graphic objects are CHANGE event listeners, and will invalidate their display list
     * upon the receipt of the event. 
     */    
    public function get color() : Number
    {
        return m_color;        
    }        
    /**
     * @private
     */ 
    public function set color( value : Number ) : void
    {
        if( value != m_color )
        {
            m_color = value;
            dispatchEventChange();
        }            
    }

    /**
     * Clear the sprite.
     * Recommended that you do this here not in the draw function.
     */    
    override public function clear( sprite : Sprite ) : void
    {
        sprite.graphics.clear();
    }

    /**
     * Draw the geometry.
     * Here we only render MapPoints.
     */    
    override public function draw(
        sprite : Sprite,
        geometry : Geometry,
        attributes : Object,
        map : Map
    ) : void
    {
        if( geometry is MapPoint )
        {
            drawMapPoint( sprite, MapPoint(geometry), map);
        }
    }
    
    /**
     * Draw the map point.
     * Here we position the sprite and use raw flash graphics primitive to draw.
     */
    private function drawMapPoint(
        sprite : Sprite,
        mapPoint : MapPoint,
        map : Map
    ) : void
    {
        sprite.x = toScreenX( map, mapPoint.x );
        sprite.y = toScreenY( map, mapPoint.y );
        
        sprite.graphics.beginFill( m_color, 0.5 );
        sprite.graphics.drawCircle( 0, 0, 10 );
        sprite.graphics.endFill();            
    }            
            
}
}

And here is how it is used:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:esri="http://www.esri.com/2008/ags"
  xmlns:symbol="com.esri.symbol.*"
  layout="vertical"
  >
  <esri:Map openHandCursorVisible="false">
    <esri:ArcGISTiledMapServiceLayer
      url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>  
    <esri:GraphicsLayer>
      <esri:Graphic toolTip="Hello, World!">
        <esri:geometry>
          <esri:MapPoint x="45" y="45"/>
        </esri:geometry>
        <esri:symbol>
          <symbol:CustomSymbol color="{colorPicker.selectedColor}"/>
        </esri:symbol>
      </esri:Graphic>
    </esri:GraphicsLayer>
  </esri:Map>
  <mx:ColorPicker id="colorPicker"/>  
</mx:Application>

You can see it in action here.
Here is another example where I'm using Degrafa's drawing capabilities to create a simple pie chart symbol, where the wedges are proportional to the graphic attribute values. And finally, here is another example, where I'm using embedded and downloaded bitmaps. You can download the source code from here.