Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- All Communities
- :
- Developers
- :
- ArcGIS API for Flex (Retired)
- :
- ArcGIS API for Flex Questions
- :
- Re: Query Features by Extent with InfoSymbol and m...
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Query Features by Extent with InfoSymbol and mouseOver
Subscribe
2298
1
12-08-2010 01:44 AM
12-08-2010
01:44 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
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?
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>
1 Reply
12-08-2010
11:56 PM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
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:
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>
