Query Features by Extent with InfoSymbol and mouseOver

GISTeam · ‎12-08-2010

Hello,

I'm trying to modify an interesting example from ESRI that shows some points on a map and only the visible ones that are on the screen in a DataGrid on the right. There is an InfoSymbol in the app but it's not connected to anything. I tried to connect it to a mouseOver event but I can't get it to open. Can somebody help?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:esri="http://www.esri.com/2008/ags"
    layout="horizontal" 
    pageTitle="3 / query by extent"
    initialize="initApp()">
    
    <mx:Script>
        <![CDATA[
         import mx.effects.Glow;
         import mx.events.EffectEvent;
         import mx.events.ListEvent;
            import com.esri.ags.Graphic;
            import com.esri.ags.events.DrawEvent;
            import com.esri.ags.events.ExtentEvent;
         import com.esri.ags.geometry.Extent;
            import com.esri.ags.geometry.MapPoint;
            import com.esri.ags.tasks.Query;
            import com.esri.ags.tasks.FeatureSet;
            import mx.collections.ArrayCollection;
         import mx.controls.Alert;
            import mx.rpc.AsyncResponder;
   import mx.managers.ToolTipManager;
   
      private function initApp():void {
          ToolTipManager.showDelay = 0;// Display immediately.
      }    

         [Bindable] private var hashmapOfExistingGraphics : Object=new Object();
                                                       
            private function onExtentChange(event:ExtentEvent):void
            {
              query.geometry = myMap.extent;
              queryTask.execute(query, new AsyncResponder( onResult, onFault ));
            }
            private function onResult( featureSet : FeatureSet, token : Object = null ) : void
             {
                for each ( var myGraphic : Graphic in featureSet.features )
                {
                        // only add features that are not already in the graphics layer
                        var graphicID:String=myGraphic.attributes.HotSpot + "." + myGraphic.attributes.FID;
                        if ( ! hashmapOfExistingGraphics[graphicID] )
                        {
                         // New feature (not already added to graphics layer
                         hashmapOfExistingGraphics[graphicID]=1; 
                         myGraphic.symbol = defaultSymbol;
                         myGraphic.id = graphicID;
                         myGraphic.toolTip = myGraphic.attributes.CITY_NAME;
                         myGraphicsLayer.add( myGraphic );
                        }
                }
                var extent : Extent = myMap.extent;
                var graphic : Graphic;
                var results : ArrayCollection = new ArrayCollection;
                for (var i : Number = 0 ; i < myGraphicsLayer.numChildren ; i++)
                {   
                    graphic = myGraphicsLayer.getChildAt(i) as Graphic;
                    trace("GG:" + graphic.geometry );
                    if (extent.contains(MapPoint(graphic.geometry)))
                    {   
                        results.addItem(graphic.attributes);
                    }
                }
                
                dg.dataProvider = results;
             }
             private function onFault( info : Object, token : Object = null ) : void
             {
                Alert.show( info.toString() );
             }
             
            private function onItemRollOver( event : ListEvent ) : void
      {
       var gr: Graphic = findGraphicByAttribute(event.itemRenderer.data)
       gr.symbol = highlightedSymbol;
       var glow:Glow = new Glow(gr);
                glow.duration = 2000 ;
                glow.alphaFrom = 1 ;
                glow.alphaTo = 0 ;
                glow.blurXFrom = 10 ;
                glow.blurXTo = 0 ;
                glow.blurYFrom = 20 ;
                glow.blurYTo = 0 ;
                glow.strength = 100;
                glow.color = redFill.color;
                glow.play();
            }
      private function onItemRollOut( event : ListEvent ) : void
      {
       findGraphicByAttribute(event.itemRenderer.data).symbol = defaultSymbol;
      }
      
      public function findGraphicByAttribute( attributes : Object ) : Graphic
   {
    for each( var graphic : Graphic in myGraphicsLayer.graphicProvider)
    {
     if ( graphic.attributes["CITY_NAME"] == attributes["CITY_NAME"])
     {
      return graphic;
     }
    }   
          return null;
   }
   
   public function findInList( graphic : Graphic ) : int
   {
    for each( var attributes : Object in dg.dataProvider )
    {
     if (attributes === graphic.attributes)
     {
      return (dg.dataProvider as ArrayCollection).getItemIndex(attributes)      
     }
    }
          return -1;
   }
        ]]>
    </mx:Script>
        <esri:SimpleFillSymbol id="redFill" alpha="0.5" color="0xFF0000"/>
    <!-- setup stuff -->
 <esri:QueryTask id="queryTask" url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0"/>
 <esri:Query id="query" outFields="CITY_NAME, STATE_NAME, ELEVATION, FID" returnGeometry="true" />
               
    <esri:SimpleMarkerSymbol id="defaultSymbol" color="0x0000FF" style="triangle" size="20" />
    
    <esri:SimpleMarkerSymbol id="highlightedSymbol" color="0xFF0000" style="triangle" size="20" />


    <esri:InfoSymbol id="myInfoSymbol">
     <esri:infoRenderer>
      <mx:Component >        
    <mx:VBox label="{data.CITY_NAME}" backgroundColor="0xEEEEEE"> 
           <mx:Label text="Name: {data.CITY_NAME}"/>            
     <mx:Label text="State: {data.STATE_NAME}"/>
           <mx:Label text="Elevation: {data.ELEVATION}"/>
    </mx:VBox>    
   </mx:Component>      
     </esri:infoRenderer>     
    </esri:InfoSymbol>
    
 <!-- visual stuff -->    
    <esri:Map id="myMap" extentChange="onExtentChange(event)">
        <esri:extent>
            <esri:Extent xmin="-125.9" ymin="44.6" xmax="-114.6" ymax="50.2">
                <esri:spatialReference>
                    <esri:SpatialReference wkid="4326"/>
                </esri:spatialReference>
            </esri:Extent>
        </esri:extent>
        <esri:ArcGISTiledMapServiceLayer
            url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
        <esri:GraphicsLayer id="myGraphicsLayer"/>
    </esri:Map>
    <mx:VBox width="260" height="100%" backgroundColor="#FCFCFC" fontWeight="bold">
        
        <mx:DataGrid id="dg" width="100%" height="100%" itemRollOver="onItemRollOver(event)" itemRollOut="onItemRollOut(event)">
            <mx:columns>
                <!-- <mx:DataGridColumn dataField="Cities In View Extent" /> -->
                 <mx:DataGridColumn headerText="City Name" dataField="CITY_NAME"/>
            </mx:columns>
        </mx:DataGrid>    
    </mx:VBox>
    
</mx:Application>

GISTeam · ‎12-08-2010

Hi,

I got some progress on the InfoWindow and now there is a moOver an mouseOut events that should open it, but whe you put your mouse on the symbol it starts flickering because it's executing mouseOver and mouseOut endlessly. Maybe it's too sensitive and you have to be exact on the point. Does anyone have an idea how to modify the mouse events to make them "less sensitive" or something?

Here is the modified code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:esri="http://www.esri.com/2008/ags"
    layout="horizontal" 
    pageTitle="3 / query by extent"
    initialize="initApp()">
    
    <mx:Script>
        <![CDATA[
         import mx.effects.Glow;
         import mx.events.EffectEvent;
         import mx.events.ListEvent;
            import com.esri.ags.Graphic;
            import com.esri.ags.events.DrawEvent;
            import com.esri.ags.events.ExtentEvent;
         import com.esri.ags.geometry.Extent;
            import com.esri.ags.geometry.MapPoint;
            import com.esri.ags.tasks.Query;
            import com.esri.ags.tasks.FeatureSet;
            import mx.collections.ArrayCollection;
         import mx.controls.Alert;
            import mx.rpc.AsyncResponder;
   import mx.managers.ToolTipManager;
   
      private function initApp():void {
          ToolTipManager.showDelay = 0;// Display immediately.
      }    

         [Bindable] private var hashmapOfExistingGraphics : Object=new Object();
                                                       
            private function onExtentChange(event:ExtentEvent):void
            {
              query.geometry = myMap.extent;
              queryTask.execute(query, new AsyncResponder( onResult, onFault ));
            }
            private function onResult( featureSet : FeatureSet, token : Object = null ) : void
             {
                for each ( var myGraphic : Graphic in featureSet.features )
                {
                        // only add features that are not already in the graphics layer
                        var graphicID:String=myGraphic.attributes.HotSpot + "." + myGraphic.attributes.FID;
                        if ( ! hashmapOfExistingGraphics[graphicID] )
                        {
                         // New feature (not already added to graphics layer
                         hashmapOfExistingGraphics[graphicID]=1; 
                         myGraphic.symbol = defaultSymbol;
                         myGraphic.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
                         myGraphic.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
                         myGraphic.id = graphicID;
                         myGraphic.toolTip = myGraphic.attributes.CITY_NAME;
                         myGraphicsLayer.add( myGraphic );
                        }
                }
                var extent : Extent = myMap.extent;
                var graphic : Graphic;
                var results : ArrayCollection = new ArrayCollection;
                for (var i : Number = 0 ; i < myGraphicsLayer.numChildren ; i++)
                {   
                    graphic = myGraphicsLayer.getChildAt(i) as Graphic;
                    trace("GG:" + graphic.geometry );
                    if (extent.contains(MapPoint(graphic.geometry)))
                    {   
                        results.addItem(graphic.attributes);
                    }
                }
                
                dg.dataProvider = results;
            }
            
            private function onFault( info : Object, token : Object = null ) : void
            {
                Alert.show( info.toString() );
            }
             
            public function onMouseOver( event : MouseEvent ) : void
   {
    var graphic : Graphic = event.currentTarget as Graphic;
    graphic.symbol = myInfoSymbol;
   }
   

   public function onMouseOut( event : MouseEvent ) : void
   {                  
    //var graphic : Graphic = event.currentTarget as Graphic;
    //graphic.symbol = highlightedSymbol;
    Graphic( event.target ).symbol = highlightedSymbol;
    //myGraphicsLayer.clear(); 
          
   }
             
            private function onItemRollOver( event : ListEvent ) : void
      {
       var gr: Graphic = findGraphicByAttribute(event.itemRenderer.data)
       gr.symbol = highlightedSymbol;
       var glow:Glow = new Glow(gr);
                glow.duration = 2000 ;
                glow.alphaFrom = 1 ;
                glow.alphaTo = 0 ;
                glow.blurXFrom = 10 ;
                glow.blurXTo = 0 ;
                glow.blurYFrom = 20 ;
                glow.blurYTo = 0 ;
                glow.strength = 100;
                glow.color = redFill.color;
                glow.play();
            }
      private function onItemRollOut( event : ListEvent ) : void
      {
       findGraphicByAttribute(event.itemRenderer.data).symbol = defaultSymbol;
      }
      
      public function findGraphicByAttribute( attributes : Object ) : Graphic
   {
    for each( var graphic : Graphic in myGraphicsLayer.graphicProvider)
    {
     if ( graphic.attributes["CITY_NAME"] == attributes["CITY_NAME"])
     {
      return graphic;
     }
    }   
          return null;
   }
   
   public function findInList( graphic : Graphic ) : int
   {
    for each( var attributes : Object in dg.dataProvider )
    {
     if (attributes === graphic.attributes)
     {
      return (dg.dataProvider as ArrayCollection).getItemIndex(attributes)      
     }
    }
          return -1;
   }
        ]]>
    </mx:Script>
        <esri:SimpleFillSymbol id="redFill" alpha="0.5" color="0xFF0000"/>
    <!-- setup stuff -->
 <esri:QueryTask id="queryTask" url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0"/>
 <esri:Query id="query" outFields="CITY_NAME, STATE_NAME, ELEVATION, FID" returnGeometry="true" />
               
    <esri:SimpleMarkerSymbol id="defaultSymbol" color="0x0000FF" style="triangle" size="20" />
    
    <esri:SimpleMarkerSymbol id="highlightedSymbol" color="0xFF0000" style="triangle" size="20" />


    <esri:InfoSymbol id="myInfoSymbol">
     <esri:infoRenderer>
      <mx:Component >        
    <mx:VBox label="{data.CITY_NAME}" backgroundColor="0xEEEEEE"> 
           <mx:Label text="Name: {data.CITY_NAME}"/>            
     <mx:Label text="State: {data.STATE_NAME}"/>
           <mx:Label text="Elevation: {data.ELEVATION}"/>
    </mx:VBox>    
   </mx:Component>      
     </esri:infoRenderer>     
    </esri:InfoSymbol>
    
 <!-- visual stuff -->    
    <esri:Map id="myMap" extentChange="onExtentChange(event)">
        <esri:extent>
            <esri:Extent xmin="-125.9" ymin="44.6" xmax="-114.6" ymax="50.2">
                <esri:spatialReference>
                    <esri:SpatialReference wkid="4326"/>
                </esri:spatialReference>
            </esri:Extent>
        </esri:extent>
        <esri:ArcGISTiledMapServiceLayer
            url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
        <esri:GraphicsLayer id="myGraphicsLayer"/>
    </esri:Map>
    <mx:VBox width="260" height="100%" backgroundColor="#FCFCFC" fontWeight="bold">
        
        <mx:DataGrid id="dg" width="100%" height="100%" itemRollOver="onItemRollOver(event)" itemRollOut="onItemRollOut(event)">
            <mx:columns>
                <!-- <mx:DataGridColumn dataField="Cities In View Extent" /> -->
                 <mx:DataGridColumn headerText="City Name" dataField="CITY_NAME"/>
            </mx:columns>
        </mx:DataGrid>    
    </mx:VBox>
    
</mx:Application>