topic Change layer renderer on graphic click in ArcGIS API for Flex Questions

Change layer renderer on graphic click

ab1 — Thu, 31 Jan 2013 09:29:00 GMT

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.

Re: Change layer renderer on graphic click

YannCabon — Thu, 31 Jan 2013 20:52:07 GMT

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.

Re: Change layer renderer on graphic click

ab1 — Fri, 01 Feb 2013 06:32:22 GMT

Very useful explanation. Thank you very much!

Re: Change graphic symbol on graphic click

IvanBespalov — Sun, 12 Dec 2021 03:45:55 GMT

<?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>