Thursday, October 2, 2008

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.

11 comments:

Gady said...

When is the Flex API final release (non-beta) going to be available?

ThunderHead said...

Expect something in the next couple of weeks :-)

Prem said...

Really two weeks? Thats awesome , cant wait.

Approximately what percentage of code written for beta is incompatible with the new release?

ThunderHead said...

MXML-wise:95%. AS3, I say about the same :-)

Gady said...

Sounds great!

prem asked my next question: if I have been developing with the beta, how much will I have to rewrite?

Thanks.

No Name Is Unique said...

I was trying to rotate the pie symbol, but I found that it wasn't rotating around the center of the circle, it appeared that the pie symbol was placed to the

No Name Is Unique said...

.. was placed to the lower left of the location.

Slayer said...

Hi, I'm newbie to ArcGIS 10 and Flex, and I've found your post about Symbols. I have to create a pie chart on Flex and add it to the graphicLayer of my Map, but I'm really lost, I know how to creat a pie chart in Flex, but I don't know how to add it to the Layer, as you do in your sample.

Thanks in advance

ThunderHead said...

Check out live sample - http://help.arcgis.com/en/webapi/flex/samples/index.html#/Query_result_as_charts/01nq00000040000000/- hope this helps

Slayer said...

Thank you so much for your previous help. I would like to ask you if you know how to do this. I want to create a layer from a selection of features and publish it so I can create a dynamic layer to add it to my map.

Thanks in advance.

ThunderHead said...

FeatureLayer that is a subclass of graphics layer enables you to select features - these selected features can be "retrieved" an be duplicated to a graphic layer.
hope this helps.