DrawTool - Different symbols for points

[ShaunWeston]

I'm trying to create a new drawing tool, which is all points with different symbology. I'm using a button bar and have got the code below to select the icon that has been selected and add it to the map where the user clicks. This works fine, but if more that one point is added, the symbols for that point are all the same as the last one clicked.

[ATTACH=CONFIG]12426[/ATTACH]

    if (clickedButton == "0") {      var Pic:PictureMarkerSymbol = new PictureMarkerSymbol();      Pic.source = RoadImages.TW0Icon;         roadImageTool.activate(DrawTool.MAPPOINT);      roadImageTool.graphicsLayer = symbolGraphicsLayer;          symbolGraphicsLayer.symbol = Pic;      map.addLayer(symbolGraphicsLayer);           }     if (clickedButton == "1") {      var Pic1:PictureMarkerSymbol = new PictureMarkerSymbol();      Pic1.source = RoadImages.TW1Icon;         roadImageTool.activate(DrawTool.MAPPOINT);      roadImageTool.graphicsLayer = symbolGraphicsLayer;          symbolGraphicsLayer.symbol = Pic1;      map.addLayer(symbolGraphicsLayer);          }  

So how can I add different symbology for MAPPOINT to the same graphicsLayer. Hopefully this is understandable.

Cheers

[RobertScheitlin__GISP · Accepted solution]

Shaun,

   So here is a little app that demos that. The sample is a Flex API App as you have posted in the Flex API forum opposed to the Flex Viewer forum.

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"                 xmlns:s="library://ns.adobe.com/flex/spark"                 xmlns:mx="library://ns.adobe.com/flex/mx"                xmlns:esri="http://www.esri.com/2008/ags"                minWidth="955" minHeight="600">     <fx:Declarations>         <esri:DrawTool id="roadImageTool" map="{theMap}" drawEnd="roadImageTool_drawEndHandler(event)" />     </fx:Declarations>     <fx:Script>         <![CDATA[             import com.esri.ags.Graphic;             import com.esri.ags.SpatialReference;             import com.esri.ags.events.DrawEvent;             import com.esri.ags.events.MapMouseEvent;             import com.esri.ags.geometry.MapPoint;             import com.esri.ags.symbols.PictureMarkerSymbol;             import com.esri.ags.symbols.SimpleMarkerSymbol;                          import mx.collections.ArrayCollection;             import mx.events.FlexEvent;                          import spark.events.IndexChangeEvent;                          protected function buttonBar_changeHandler(event:IndexChangeEvent):void             {                 var PicMs:PictureMarkerSymbol = new PictureMarkerSymbol();                 PicMs.source = buttonBar.selectedItem.icon;                 roadImageTool.markerSymbol = PicMs;                 roadImageTool.activate(DrawTool.MAPPOINT);                             }                          protected function roadImageTool_drawEndHandler(event:DrawEvent):void             {                 pointGraphicsLayer.add(event.graphic);             }                      ]]>     </fx:Script>          <esri:Map id="theMap">         <esri:ArcGISTiledMapServiceLayer id="roads" visible="true"                                          url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>         <esri:GraphicsLayer id="pointGraphicsLayer" />     </esri:Map>     <s:ButtonBar id="buttonBar" change="buttonBar_changeHandler(event)" requireSelection="true"                  focusEnabled="false" skinClass="myButtonBarSkin"                  creationComplete="buttonBar_changeHandler(null);">         <s:dataProvider>             <s:ArrayList>                 <fx:Object label="circle"                            icon="@Embed('assets/images/i_draw_circle.png')" />                 <fx:Object label="line"                            icon="@Embed('assets/images/i_draw_line.png')" />                 <fx:Object label="point"                            icon="@Embed('assets/images/i_draw_point.png')" />                 <fx:Object label="rectangle"                            icon="@Embed('assets/images/i_draw_rect.png')" />             </s:ArrayList>         </s:dataProvider>     </s:ButtonBar> </s:Application>

MyButtonBarSkin:

<?xml version="1.0" encoding="utf-8"?>  <!--      ADOBE SYSTEMS INCORPORATED     Copyright 2008 Adobe Systems Incorporated     All Rights Reserved.      NOTICE: Adobe permits you to use, modify, and distribute this file     in accordance with the terms of the license agreement accompanying it.  -->  <!--- The default skin class for the Spark ButtonBar component. The buttons on the ButtonBar component     use the ButtonBarLastButtonSkin, ButtonBarFirstButtonSkin and ButtonBarMiddleButtonSkin classes.              @see spark.components.ButtonBar       @see spark.components.ButtonBarButton                    @langversion 3.0       @playerversion Flash 10       @playerversion AIR 1.5       @productversion Flex 4 --> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"          alpha.disabled="0.5">      <fx:Metadata>     <![CDATA[         /**           * @copy spark.skins.spark.ApplicationSkin#hostComponent          */         [HostComponent("spark.components.ButtonBar")]     ]]>     </fx:Metadata>       <s:states>         <s:State name="normal" />         <s:State name="disabled" />     </s:states>          <fx:Declarations>         <!---              @copy spark.components.ButtonBar#firstButton             @default spark.skins.spark.ButtonBarFirstButtonSkin             @see spark.skins.spark.ButtonBarFirstButtonSkin         -->         <fx:Component id="firstButton">             <s:ButtonBarButton skinClass="myButtonBarButtonSkin" />         </fx:Component>          <!---              @copy spark.components.ButtonBar#middleButton             @default spark.skins.spark.ButtonBarMiddleButtonSkin             @see spark.skins.spark.ButtonBarMiddleButtonSkin         -->         <fx:Component id="middleButton" >             <s:ButtonBarButton skinClass="myButtonBarButtonSkin" />         </fx:Component>          <!---              @copy spark.components.ButtonBar#lastButton             @default spark.skins.spark.ButtonBarLastButtonSkin             @see spark.skins.spark.ButtonBarLastButtonSkin         -->         <fx:Component id="lastButton" >             <s:ButtonBarButton skinClass="myButtonBarButtonSkin" />         </fx:Component>      </fx:Declarations>      <!--- @copy spark.components.SkinnableDataContainer#dataGroup -->     <s:DataGroup id="dataGroup" width="100%" height="100%">         <s:layout>             <s:ButtonBarHorizontalLayout gap="-1"/>         </s:layout>     </s:DataGroup> </s:Skin>

[RobertScheitlin__GISP]

Part 2:

myButtonBarButtonSkin:

<?xml version="1.0" encoding="utf-8"?>

<!--
    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.
-->

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
                   minWidth="21" minHeight="21" 
                   alpha.disabledStates="0.5" xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Metadata>[HostComponent("spark.components.ButtonBarButton")]</fx:Metadata>
    
    <!-- host component -->
    <fx:Script>
        <![CDATA[
            import spark.components.ButtonBar;
            import mx.events.FlexEvent;
            import spark.components.ButtonBarButton;
            
            protected function gr_creationCompleteHandler(event:FlexEvent):void
            {
                var dataObj:Object = hostComponent.data;
                img.source = dataObj.icon;
            }

            static private const exclusions:Array = ["labelDisplay","gr"];
            

            override public function get colorizeExclusions():Array {return exclusions;}
            
            override protected function initializationComplete():void
            {
                useChromeColor = true;
                super.initializationComplete();
            }
            
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                var cr:Number = getStyle("cornerRadius");
                
                if (cornerRadius != cr)
                {
                    cornerRadius = cr;
                    shadow.radiusX = cornerRadius;
                    fill.radiusX = cornerRadius;
                    lowlight.radiusX = cornerRadius;
                    highlight.radiusX = cornerRadius;
                    border.radiusX = cornerRadius;
                }
                
                if (highlightStroke) highlightStroke.radiusX = cornerRadius;
                if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
                if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;
                
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
            
            private var cornerRadius:Number = 2;
        ]]>
    </fx:Script>
    
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>
    
    <!-- layer 1: shadow -->
    <!--- @private -->
    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0x000000" 
                                   color.downStates="0xFFFFFF"
                                   alpha="0.01"
                                   alpha.downStates="0" />
                    <s:GradientEntry color="0x000000" 
                                   color.downStates="0xFFFFFF" 
                                   alpha="0.07"
                                   alpha.downStates="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 2: fill -->
    <!--- @private -->
    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" 
                               color.selectedUpStates="0xBBBDBD"
                               color.overStates="0xBBBDBD" 
                               color.downStates="0xAAAAAA" 
                               alpha="0.85" 
                               alpha.overAndSelected="1" />
                <s:GradientEntry color="0xD8D8D8" 
                               color.selectedUpStates="0x9FA0A1"
                               color.over="0x9FA0A1" 
                               color.overAndSelected="0x8E8F90"
                               color.downStates="0x929496" 
                               alpha="0.85"
                               alpha.overAndSelected="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 3: fill lowlight -->
    <!--- @private -->
    <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="270">
                <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
                <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
                <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 4: fill highlight -->
    <!--- @private -->
    <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.0"
                                 alpha="0.33" 
                                 alpha.selectedUpStates="0.22"
                                 alpha.overStates="0.22" 
                                 alpha.downStates="0.12"/>
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.48"
                                 alpha="0.33"
                                 alpha.selectedUpStates="0.22"
                                 alpha.overStates="0.22" 
                                 alpha.downStates="0.12"/>
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.48001"
                                 alpha="0" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 5: highlight stroke (all states except down) -->
    <!--- @private -->
    <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="downStates">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
                <s:GradientEntry color="0xD8D8D8" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
    <!-- layer 6: highlight stroke (down state only) -->
    <!--- @private -->
    <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2"
            includeIn="downStates, selectedUpStates, overAndSelected">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    <!--- @private -->
    <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2"
            includeIn="downStates, selectedUpStates, overAndSelected">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <!--- @private -->
    <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" 
                               alpha="0.5625"
                               alpha.down="0.6375"
                               alpha.selectedStates="0.6375" />
                <s:GradientEntry color="0x000000" 
                               alpha="0.75" 
                               alpha.down="0.85"
                               alpha.selectedStates="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
    <!-- layer 8: text -->
    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             visible="false" includeInLayout="false"
             horizontalCenter="0" verticalCenter="1"
             left="10" right="10" top="2" bottom="2">
    </s:Label>
    <!-- layer 8: icon -->
    <s:Graphic id="gr"
               creationComplete="gr_creationCompleteHandler(event)"
               horizontalCenter="0" verticalCenter="0">
        <s:BitmapImage id="img" />
    </s:Graphic>
</s:SparkSkin>

Don't forget to click the Mark as answer check and to click the top arrow (promote) as shown below:

[EmilyParson]

Thanks a lot!

[ShaunWeston]

Awesome! Thanks for posting that code, I've got it working very similar to that now.

Having the graphic added to the layer when the drawing had finished was what I needed to do!

protected function roadImageTool_drawEndHandler(event:DrawEvent):void
            {
                pointGraphicsLayer.add(event.graphic);
            }