Change layer renderer on graphic click

[ab1]

Hi,

The goal is to change the symbol of the clicked graphic, and only the clicked graphic. So, I added a layer click listener to my feature layer:

protected function layer_clickHandler(event:MouseEvent):void    {     selectedGraphic = Graphic(event.target.parent.parent);     editTool.activate(EditTool.MOVE, [selectedGraphic]); // To detect when the graphic is moving          selectedGraphic.graphicsLayer.renderer = getRenderer(0x00FF00); // affects a custom renderer to the graphicsLayer. This is called each time a feature is clicked in order to set the symbol of previously clicked features to the original symbol.                                 // ... And then I change the symbol of the clicked graphic: selectedGraphic.    }

The behaviour I get is a bit awkward. When I click on a feature, its symbol changes. But when I click on a second feature, the symbol of the first feature doesn't change back to the original feature.

Am I missing something?

Regards.

[YannCabon · Accepted solution]

Hi,

This is the normal behavior. To choose the right symbol to use to draw, the Graphic looks in this order:

• its symbol property


• Its owner layer renderer property


• Its owner layer symbol property


• or a default symbol

So to remove the selected symbol you have to explicitely set it to null on the previously selected Graphic.

Another good way to do it may be to create a renderer on the GraphicLayer and to implement the getSymbol function.
See the IRenderer interface.

As an example:

    public function getSymbol(graphic:Graphic):Symbol     {         if (graphic === mySelectedGraphic)         {             return selectedSymbol;         }         return otherSymbol;     }

Once you have changed the mySelectedGraphic value on this renderer, call refresh() on the layer or on the previously and newly selected Graphic.

Hope it helps.

[ab1]

Very useful explanation. Thank you very much!

[IvanBespalov]

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:esri="http://www.esri.com/2008/ags"
      xmlns:s="library://ns.adobe.com/flex/spark"
      initialize="initApp()"
      pageTitle="Example - using Renderers">
 <!--
 Based on this sample http://resources.arcgis.com/en/help/flex-api/samples/index.html#/Using_Renderers/01nq00000052000000/
 -->
 <fx:Script>
  <![CDATA[
   import com.esri.ags.Graphic;
   import com.esri.ags.events.GraphicEvent;
   import com.esri.ags.geometry.MapPoint;
   import com.esri.ags.symbols.Symbol;
   
   private function initApp():void
   {
    var i:int, mapX:Number, mapY:Number, graphic:Graphic;
    // add 100 random graphics to the GraphicsLayer
    for (i; i < 100; i++)
    {
     mapX = Math.random() * 40044000 - 20022000;
     mapY = Math.random() * 40044000 - 20022000;
     
     var attributes:Object = { "ranking": Math.random()};
     graphic = new Graphic(
      new MapPoint(mapX, mapY),
      null,
      attributes
     );
     graphic.toolTip = "Ranking: " + Number(graphic.attributes.ranking).toFixed(3);
     graphicsLayer.add(graphic);
    }
    
    // add 10 random graphics to the GraphicsLayer
    for (i = 0; i < 10; i++)
    {
     mapX = Math.random() * 40044000 - 20022000;
     mapY = Math.random() * 40044000 - 20022000;
     
     graphic = new Graphic(
      new MapPoint(mapX, mapY),
      blueSym
     );
     graphic.toolTip = "Item without ranking";
     graphicsLayer.add(graphic);
    }
   }
   
   protected function onGraphicAdd(event:GraphicEvent):void
   {
    var gr:Graphic = event.graphic;
    gr.addEventListener(MouseEvent.CLICK, onGraphicClick);
   }
   
   private var lastGraphic:Graphic = null;
   private var lastSymbol:Symbol = null;
   
   protected function onGraphicClick(event:MouseEvent):void
   {
    var gr:Graphic = Graphic(event.target);
    // remove listener if needed
    //gr.removeEventListener(MouseEvent.CLICK, onGraphicClick);
    
    restoreLastGraphicSymbol();
    highlightSelectedGraphic(gr);
   }
   
   private function restoreLastGraphicSymbol():void
   {
    if (lastGraphic && lastSymbol)
    {
     // find last clicked graphic
     for each(var gr:Graphic in graphicsLayer.graphicProvider)
     {
      if (gr.id == lastGraphic.id)
      {
       // restore symbol
       gr.symbol = lastSymbol;
       // restore listener if removed
       //gr.addEventListener(MouseEvent.CLICK, onGraphicClick);
       break;
      }
     }
    }
   }
   
   private function highlightSelectedGraphic(graphic:Graphic):void
   {
    // backup graphic
    lastGraphic = graphic;
    // backup its symbol
    if (graphic.symbol)
    {
     lastSymbol = graphic.symbol;
    }
    else
    {
     lastSymbol = graphicsLayer.renderer.getSymbol(graphic);
    }
    
    // set highlight symbol
    graphic.symbol = highlightSym;
   }
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <esri:SimpleMarkerSymbol id="blueSym"
         style="triangle"
         alpha="0.7"
         color="0x0000FF"
         size="14"/>
  
  <esri:SimpleMarkerSymbol id="smallSym"
         alpha="0.7"
         color="0xFF0000"
         size="6"/>
  <esri:SimpleMarkerSymbol id="mediumSym"
         alpha="0.7"
         color="0xFF0000"
         size="10"/>
  <esri:SimpleMarkerSymbol id="largeSym"
         alpha="0.7"
         color="0xFF0000"
         size="16"/>
  
  <esri:SimpleMarkerSymbol id="highlightSym"
         style="diamond"
         alpha="0.7"
         color="0xFFFF00"
         size="16"/>
 </fx:Declarations>
 
 <esri:Map>
  <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
  <esri:GraphicsLayer id="graphicsLayer" graphicAdd="onGraphicAdd(event)">
   <esri:renderer>
    <esri:ClassBreaksRenderer field="ranking">
     <esri:ClassBreakInfo maxValue="0.33" symbol="{smallSym}"/>
     <esri:ClassBreakInfo maxValue="0.67"
           minValue="0.33"
           symbol="{mediumSym}"/>
     <esri:ClassBreakInfo minValue="0.67" symbol="{largeSym}"/>
    </esri:ClassBreaksRenderer>
   </esri:renderer>
  </esri:GraphicsLayer>
 </esri:Map>
 
</s:Application>