highlight clusterGraphic or dispatch FlareEvent

[AndrewThomas]

I am trying to somehow indicate to a user a particular graphic on a map.
The trigger for this is the mouse hovering over an item on a list.
This is all pretty trivial until I changed the graphics to clustered graphics.

The basic functionality I have currently is:

I have a graphics layer used purely for highlighting items on a list to the user.
Items in the list (datagrid) have an ID.
Graphics in the graphics layer have this ID in their attributes.
When a user hovers over an item on the list, a function is called which iterates through all graphics in the graphic provider of the graphics layer. If the graphic's attribute's ID matches the list items ID, the graphic's symbol is changed.
On a hover out event, the symbol is changed back to the default symbol. This works well currently.

Now if I additionally add a weightedCluster (with flare symbol) to the graphics layer, I want the cluster that contains the graphic corresponding to the list item to flash/highlight/flare/etc. The highlight function has to work slightly differently because the graphics layer's graphicProvider doesn't know about the cluster, I have to iterate through the graphic layers children, and inspect each graphic, if it is a 'ClusterGraphic', check it's graphics for a match. I can find the correct cluster graphic, but then I'm stuck on what to do.

Changing the ClusterGraphic's Symbol does nothing, assigning it a new Flare Symbol also does nothing.

What I have so far:

var g:graphic = myGraphicOfInterest; for (var j:int = 0, m:int = graLayer.numChildren; j < m; j++) {  var cgraphic:Graphic = graLayer.getChildAt(j) as Graphic;  if (cgraphic is ClusterGraphic){   for each (var cg:Graphic in cgraphic.attributes.graphics){    if (cg.attributes == g.attributes){     //cgraphic.symbol = mySimpleMarkerSymbol;//Does nothing     //dispatchEvent(new AppEvent(FlareEvent.FLARE_IN_START));//Something like this would be ideal     var fs:FlareSymbol = new FlareSymbol();     fs.backgroundColor = 0x0000FF;     fs.size = 40;     cgraphic.symbol = fs;     cgraphic.scaleX = 2;     cgraphic.refresh();     graLayer.refresh();     }              }   } } 

None of these changes above has any effect on the graphic on the map when this is called.
I can change properties of the already assigned FlareSymbol, but this changes ALL clusterGraphics, not just the one I want.

The application if based on the Sample Flex Viewer.

ActionScript code is appreciated over MXML.

Does anyone have any ideas on what to try?

Thanks

Andrew

[IvanBespalov · Accepted solution]

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:text="flash.text.*"
      xmlns:esri="http://www.esri.com/2008/ags"
      pageTitle="Clustering with Flex API">
 <s:layout>
  <s:VerticalLayout />
 </s:layout>
 <fx:Script>
  <![CDATA[
   import com.esri.ags.Graphic;
   import com.esri.ags.clusterers.supportClasses.ClusterGraphic;
   import com.esri.ags.esri_internal;
   import com.esri.ags.events.ExtentEvent;
   import com.esri.ags.events.FlareEvent;
   import com.esri.ags.events.FlareMouseEvent;
   import com.esri.ags.events.GraphicEvent;
   import com.esri.ags.events.LayerEvent;
   import com.esri.ags.events.MapEvent;
   
   import mx.collections.ArrayCollection;
   
   import spark.events.GridEvent;
   import spark.utils.TextFlowUtil;
   
   [Bindable]
   private var gridSource:ArrayCollection;
   
   protected function map_loadHandler(event:MapEvent):void
   {
    featureLayer.addEventListener(FlareMouseEvent.FLARE_CLICK, flareClickHandler);
    featureLayer.addEventListener(FlareEvent.FLARE_IN_START, flareInStartHandler);
   }
   
   private function flareClickHandler(event:FlareMouseEvent):void
   {
    showInfoWindow(event.graphic, event.stageX, event.stageY);
   }
   
   private function flareInStartHandler(event:FlareEvent):void
   {
    map.infoWindow.hide();
   }
   
   private function showInfoWindow(gr:Graphic, stageX:Number, stageY:Number):void
   {
    myTextArea.textFlow = TextFlowUtil.importFromString(
     '<span fontWeight="bold">State Name: </span>' + gr.attributes.STATE_NAME + '<br/>'
     + '<span fontWeight="bold">Age (5-17): </span>' + gr.attributes.AGE_5_17 + '<br/>'
     + '<span fontWeight="bold">Age (18-64): </span>' + gr.attributes.AGE_18_64 + '<br/>'
     + '<span fontWeight="bold">Age (65 and above): </span>' + gr.attributes.AGE_65_UP);
    map.infoWindow.label = gr.attributes.CITY_NAME;
    map.infoWindow.closeButtonVisible = false;
    map.infoWindow.show(map.toMapFromStage(stageX, stageY));
   }
   
   private var activeGraphic:ClusterGraphic;
   
   /**
    * Highlight by object ID
    */
   private function playHiglight(oid:Number):void
   {
    stopHiglight();
    var gr:Graphic = getFeatureById(oid);
    if (gr)
    {
     var clusterGraphic:ClusterGraphic = gr.esri_internal::clusterGraphic;
     if (clusterGraphic != null) // clustered
     {
                                                // this graphic symbol must be resored on roll out
      activeGraphic = clusterGraphic; 
                                                // set highlight symbol
      clusterGraphic.symbol = highlightSymbol;
      animationFilter.target = clusterGraphic;
      animationFilter.play();
     }
     else // not clustered
     {
      animationFilter.target = gr;
      animationFilter.play();
     }
    }
   }
   
   /**
    * Stop highlight graphics
    */
   private function stopHiglight():void
   {
    if (activeGraphic)
    {
                                        // restore default flare symbol
     activeGraphic.symbol = flareSymbol;
    }
    animationFilter.stop();
   }
   
   
   protected function map_extentChangeHandler(event:ExtentEvent):void
   {
    map.infoWindow.hide();
   }
   
   protected function featureLayer_graphicAddHandler(event:GraphicEvent):void
   {
    event.graphic.addEventListener(MouseEvent.CLICK, graphicClickHandler); // showing info window on non-clustered graphics
   }
   
   private function graphicClickHandler(event:MouseEvent):void
   {
    showInfoWindow(Graphic(event.target), event.stageX, event.stageY);
   } 
   
   /**
    * @return feature with input object ID, if not exists returns <b>null</b>
    */
   private function getFeatureById(oid:Number):Graphic
   {
    if (oid > 0)
    {
     for each (var gr:Graphic in featureLayer.graphicProvider)
     {
      if (gr != null && gr.attributes[getOidFieldName()] == oid)
      {
       return gr;
      }
     }
    }
    
    return null;
   }
   
   /**
    * @return layer object id field name
    */
   private function getOidFieldName():String
   {
    if (featureLayer.layerDetails != null)
    {
     return featureLayer.layerDetails.objectIdField;
    }
    
    return null;
   }
   
   /**
    * Feature layer load - add additional listeners
    */
   protected function onFeatureLayerLoad(event:LayerEvent):void
   {
    featureLayer.addEventListener(LayerEvent.UPDATE_END, onFeatureLayerUpdateEnd);
   }

   /**
    * Init grid datasource
    */
   protected function onFeatureLayerUpdateEnd(event:LayerEvent):void
   {
    gridSource = new ArrayCollection();
    for each (var graphic:Graphic in featureLayer.graphicProvider)
    {
     gridSource.addItem(graphic.attributes);
    }
    
    if (gridSource.length > 0)
    {
     // do not need anymore in this listener - remove it
     featureLayer.removeEventListener(LayerEvent.UPDATE_END, onFeatureLayerUpdateEnd);
    }
   }

   /**
    * Listen mouse roll over datagrid row
    */
   protected function onRowRollOver(event:GridEvent):void
   {
    var oidField:String = getOidFieldName();
    if (event.item && event.item.hasOwnProperty(oidField))
    {
     playHiglight(event.item[oidField]);
    }
   }

   /**
    * Listem mouse roll out datagrid row
    */
   protected function onRowRollOut(event:GridEvent):void
   {
    stopHiglight();
   }

   /**
    * Listem mouse double click
    */
   protected function onRowDoubleClick(event:MouseEvent):void
   {
    var oidField:String = getOidFieldName();
    if (dataGrid.selectedItem && dataGrid.selectedItem.hasOwnProperty(oidField))
    {
     var graphic:Graphic = getFeatureById(dataGrid.selectedItem[oidField]);
     playHiglight(dataGrid.selectedItem[oidField]);
     map.centerAt(MapPoint(graphic.geometry));
    }
   }

  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <s:AnimateFilter id="animationFilter"
       repeatBehavior="reverse"
       duration="500"
       repeatCount="0">
   <s:bitmapFilter>
    <s:GlowFilter />
   </s:bitmapFilter>
   <s:motionPaths>
    <fx:Vector type="spark.effects.animation.MotionPath">
     <s:SimpleMotionPath property="color" valueFrom="0x00FF00" valueTo="0x0000FF"/>
     <s:SimpleMotionPath property="blurX" valueFrom="6" valueTo="30"/>
     <s:SimpleMotionPath property="blurY" valueFrom="6" valueTo="30"/>
    </fx:Vector>
   </s:motionPaths>
  </s:AnimateFilter>
  <text:TextFormat id="tf"
       font="Arial"
       size="14"/>
  <esri:FlareSymbol id="flareSymbol"
        backgroundAlphas="[0.5,1.0]"
        backgroundColors="[0x00FF00,0xFF0000]"
        flareMaxCount="30"
        flareSizeIncOnRollOver="3"
        sizes="[20,30]"
        textFormat="{tf}"
        weights="[30,60]"/>
  <esri:FlareSymbol id="highlightSymbol"
        backgroundAlphas="[1,1]"
        backgroundColors="[0xFFFF00,0xFFFF00]"
        flareMaxCount="30"
        flareSizeIncOnRollOver="3"
        sizes="[20,30]"
        textFormat="{tf}"
        weights="[30,60]"/>
  <esri:WeightedClusterer id="clusterer" 
        symbol="{flareSymbol}">
   <esri:center>
    <!--
    x/y values are from the below extent x/y min/max values, these are the center of the extent.
    To make sure that you have the same clusters every time and independently of the map size and extent, these values have to set explicity,
    or you can let the cluster pick the map center at runtime.
    -->
    <esri:MapPoint x="{(-14477000-6677000)*0.5}" y="{(2273000+8399000)*0.5}"/>
   </esri:center>
  </esri:WeightedClusterer>
  <esri:SimpleMarkerSymbol id="defaultsym"
         alpha="0.8"
         color="0xFF0000">
   <esri:SimpleLineSymbol width="2" color="0xFFFFFF"/>
  </esri:SimpleMarkerSymbol>
 </fx:Declarations>
 
 <esri:Map id="map"
     extentChange="map_extentChangeHandler(event)"
     load="map_loadHandler(event)"
     openHandCursorVisible="false">
  <esri:extent>
   <esri:Extent xmin="-14477000" ymin="2273000" xmax="-6677000" ymax="8399000">
    <esri:SpatialReference wkid="102100"/>
   </esri:Extent>
  </esri:extent>
  <esri:infoWindowContent>
   <s:TextArea id="myTextArea"
      width="200" height="80"
      editable="false"/>
  </esri:infoWindowContent>
  <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer"/>
  <esri:FeatureLayer id="featureLayer"
         clusterer="{clusterer}"
         definitionExpression="POP1990 &gt; 75000"
         graphicAdd="featureLayer_graphicAddHandler(event)"
         load="onFeatureLayerLoad(event)"
         mode="snapshot"
         outFields="*"
         symbol="{defaultsym}"
         url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0"/>
 </esri:Map>
 <s:HGroup width="100%"
     gap="5"
     minHeight="10"
     verticalAlign="middle">
  <s:Label text="{featureLayer.numGraphics}"/>
  <s:Label text="Graphics - Overall cluster min count"/>
  <s:Label text="{clusterer.overallMinCount}"/>
  <s:Label text="max count"/>
  <s:Label text="{clusterer.overallMaxCount}"/>
 </s:HGroup>
 <s:DataGrid id="dataGrid" 
    dataProvider="{gridSource}" 
    doubleClickEnabled="true"
    doubleClick="onRowDoubleClick(event)"
    width="100%"
    height="400"
    gridRollOver="onRowRollOver(event)"
    gridRollOut="onRowRollOut(event)"/>
</s:Application>

[AndrewThomas]

Thanks Ivan.

I tried your code and it helped me identify what I was doing wrong. I had the weights wrong - or rather, I didn't understand their effects. Basically what was happening I think is that if the weight of a particular cluster was outside of the weights array, there seemed to be no effect on changing the symbol.

I.E.

private var flareSymbol:FlareSymbol = new FlareSymbol();   
private var myCluster:WeightedClusterer = new WeightedClusterer();
private var highlightFlareSymbol:FlareSymbol = new FlareSymbol();

public function init():void{

var clusterWeights:Array() = new Array(5,10);

flareSymbol.backgroundColors= new Array(0x00FF00,0xFF0000);
flareSymbol.weights=clusterWeights;
highlightFlareSymbol= new Array(0xFFFF00,0xFFFF00);
highlightFlareSymbol.weights=clusterWeights;

myCluster.symbol = flareSymbol;
graLayer.clusterer = myCluster;}


private functon highlight():void
{
...
if (conditions){
myClusterGraphic.symbol = highlightFlareSymbol;//This seems to have no effect unless the weight value is less than or equal to the maximum value in the clusterWeights array (E.G: 10)
}
}

In this example above, a cluster graphic background colour would only change to yellow when the weight was less than or equal to 10. Solution - increase the maximum value of the array. Perhaps: var clusterWeights:Array() = new Array(5,500);