Sunday, February 22, 2009

Line Style With Arrows

A colleague of mine asked me if there was a way to put arrows at the end of drawn polylines. My answer was "Not out of the box directly :-( but you can create your own line style subclass :-) And here is an implementation in action. Check out the source code here.

6 comments:

Marseyas said...

This is awesome. I was just tasking a developer to code this for an Auto Theft Location/Recovery Tool.

Any chance you have a dual map with one control implementation?

Thanks and keep up the innovation.

- marseyas

kbonney354 said...

I been working with your ArrowApp but when I bring up ArrowApp.html none of the arrow heads are placed properly. The arrow heads are not attached to the line as expected. If I zoom in or out on the map the arrow heads are again displayed incorrectly. The same problem occurs when I create a graphic programatically and set its symbol to an ArrowLineStyle object and add it to the GraphicsLayer. To get the arrow heads to display properly I have to pan the map or resize my browser window. When I view the hosted example you have everything shows up properly. I suspect you are using a previous version of the ESRI Flex library. I am using agslib-1.2-2009-05-15.swc. Any Ideas? Any help is appreciated.

I had previously downloaded ArrowApp from the Best Practices code bundle in the ESRI Flex Code Gallery, and posted to their forum about the same issue. They directed me to you. See my forum post here.

ThunderHead said...

Yeap - looks like there were mods to the final swc to make the sample not display the arrows at the correct location - try the following:
public override function draw(sprite:Sprite, geometry:Geometry, attributes:Object, map:Map):void
{
super.draw(sprite, geometry, attributes, map);
if (geometry is Polyline)
{
sprite.graphics.lineStyle(width, color, alpha);
const polyline:Polyline = Polyline(geometry);
for each (var path:Array in polyline.paths)
{
if (path.length > 1)
{
drawPath(sprite, path, map);
}
}
}
}
Note how the super call is moved to the top ? hope this helps

kbonney354 said...

I updated ArrowLineStyle.as the way you've suggested and it worked like a charm. Thanks! Much appreciated!

kbonney354 said...

I updated ArrowLineStyle.as the way you've suggested and it worked like a charm. Thanks! Much appreciated!

work said...

It works GREAT....thank you for the hard work...