How to filter Graphics in a GraphicLayer?

Question

Hi all,

My problem is like this: I have a list of Graphics, divided into two type, that need to be display accordingly and depending on user input. Currently I put them into an ArrayCollection. It would be something like this:[{graph: graphic1, type: 1},
{graph: graphic2, type: 2},
{graph: graphic3, type:2},
{graph: graphic4, type:1},
...]

The list is dynamically updated at runtime. User can select the type from a dropdown list, and the graphic must be updated accordingly. I tried to tie the above array collection to the GraphicLayer.graphicProvider but it failed, due to the object in my ArrayCollection is not a graph.TypeError: Error #1034: Type Coercion failed: cannot convert Object@d2a87c1 to com.esri.ags.Graphic

I would really appriciate if somebody could provide me with some suggestion. The other solution I could think of is create two GraphicLayer and switch between them, but I think there must be a better and simpler way to do this.

Thanks for reading.

Thu_GiangDang · Answer

Thanks Ivan. I'll try out your code.

Edit: It works, thank you 🙂

IvanBespalov · Answer

Try it:
<?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">
    <s:layout>
        <s:VerticalLayout paddingBottom="15"
    paddingLeft="10"
    paddingRight="10"
    paddingTop="15"/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            import com.esri.ags.Graphic;
            import com.esri.ags.events.MapMouseEvent;
            import com.esri.ags.symbols.Symbol;
            import mx.collections.ArrayCollection;
            import spark.events.IndexChangeEvent;
            import spark.filters.GlowFilter;
   
            [Bindable]
            private var graphicsSource:ArrayCollection = new ArrayCollection();
   
            [Bindable]
            private var stateSource:ArrayCollection = new ArrayCollection([0, 1, 2, 3]);
   
            [Bindable]
            private var selectedGraphic:Graphic = null;
   
            protected function myMap_mapClickHandler(event:MapMouseEvent):void
            {
                var state:Number = Math.round(Math.random());
  var date:Date = new Date();
    
  var attributes:Object = new Object();
  attributes.state = state;
  attributes.date = date;
    
  var gr:Graphic = new Graphic();
  gr.geometry = event.mapPoint;
  gr.attributes = attributes;
  graphicsSource.addItem(gr);    
            }
   
   
            protected function list1_changeHandler(event:IndexChangeEvent):void
            {
                animationFilter.stop();
  if (list1.selectedItem is Graphic)
  {
      selectedGraphic = list1.selectedItem as Graphic;
      list2.selectedIndex = selectedGraphic.attributes["state"];
      animationFilter.target = selectedGraphic;
      animationFilter.play();
  }
  else
  {
      selectedGraphic = null;
  }
            }
   
            protected function list2_changeHandler(event:IndexChangeEvent):void
     {
         selectedGraphic.attributes["state"] = event.newIndex;
  var ind:int = list1.selectedIndex;
  graphicsSource.refresh();
  list1.selectedIndex = ind;
     }   
   
     protected function list3_changeHandler(event:IndexChangeEvent):void
     {
         animationFilter.stop();
  selectedGraphic = null;
  if (isFiltered.selected)
  {
      graphicsSource.filterFunction = graphicsFilterFunction;
  }
  else
  {
      graphicsSource.filterFunction = null;
  }
  graphicsSource.refresh();
     }
   
     private function graphicsFilterFunction(item:Object):Boolean
     {
         if (item is Graphic)
  {
      var attributes:Object = Graphic(item).attributes;
      if (attributes.hasOwnProperty("state") && attributes["state"] == list3.selectedIndex)
      {
       return true;
      }
  }
    
  return false;
     }
   
     private function ddlLabelFunction(item:Object):String
     {
         if (item is Graphic)
  {
      var attributes:Object = Graphic(item).attributes;
      if (attributes.hasOwnProperty("date"))
      {
          return attributes["date"];
      }
  }
    
  return null;
     }
   
 ]]>
    </fx:Script>
    <fx:Declarations>
        <esri:SimpleMarkerSymbol id="sms1"
          color="0xFF0000"
   size="16"
   style="diamond" />
 <esri:SimpleMarkerSymbol id="sms0"
          color="0x00FF00"
   size="24"
   style="triangle" />
 <esri:SimpleMarkerSymbol id="sms2"
          color="0xCCCCCC"
   size="36"
   style="circle" />
 <esri:SimpleMarkerSymbol id="sms3"
          color="0xFFFF00"
   size="50"
   style="square" />
 <s:AnimateFilter id="animationFilter"
          repeatCount="0"
   duration="500"
   repeatBehavior="reverse"
   bitmapFilter="{new spark.filters.GlowFilter()}">
  <s:SimpleMotionPath property="color" valueFrom="0x00FF00" valueTo="0x0000FF"/>
   <s:SimpleMotionPath property="blurX" valueFrom="6" valueTo="18"/>
   <s:SimpleMotionPath property="blurY" valueFrom="6" valueTo="18"/>
 </s:AnimateFilter>
    </fx:Declarations>
    <esri:Map id="myMap" mapClick="myMap_mapClickHandler(event)">
        <esri:extent>
     <esri:Extent xmin="2730524.567128713" xmax="2826835.222767905" ymin="8425522.38792159" ymax="8477346.69309887"/>
 </esri:extent>
 <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
 <esri:GraphicsLayer id="myGraphicsLayer"
  graphicProvider="{graphicsSource}">
  <esri:renderer>
      <esri:UniqueValueRenderer attribute="state">
          <esri:UniqueValueInfo value="3" symbol="{sms3}" />
   <esri:UniqueValueInfo value="2" symbol="{sms2}" />
   <esri:UniqueValueInfo value="1" symbol="{sms1}" />
   <esri:UniqueValueInfo value="0" symbol="{sms0}" />
             </esri:UniqueValueRenderer>
  </esri:renderer>
 </esri:GraphicsLayer>
    </esri:Map>
    <s:HGroup width="100%"
        horizontalAlign="center"
 chromeColor="0xCCCCCC">
 <s:Label text="Each map click adds new graphics with random state attribute." 
     fontWeight="bold"/>
    </s:HGroup>
    <s:HGroup gap="25"
        width="100%">
 <s:Label text="Graphics list" />
 <s:DropDownList id="list1"
         width="250"
  dataProvider="{graphicsSource}" 
  change="list1_changeHandler(event)"
  labelFunction="ddlLabelFunction"/>
  
 <s:Label text="Selected graphic state" 
         visible="{selectedGraphic != null}"/>
 <s:DropDownList id="list2"
         change="list2_changeHandler(event)"
  dataProvider="{stateSource}"
  visible="{selectedGraphic != null}"/>
  
 <s:Label text="Filter by state" />
 <s:CheckBox id="isFiltered" 
         selected="false" 
  change="list3_changeHandler(null)"/>
 <s:DropDownList id="list3"
         selectedIndex="0"
  change="list3_changeHandler(event)"
  dataProvider="{stateSource}"/>
    </s:HGroup>

</s:Application>