Skip To Content

Show points with tooltips

<?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:esri="http://www.esri.com/2008/ags"
               pageTitle="Manual on-demand mode">
    <!--
    Description:
    This sample demonstrates how to query a service for cities
    using the map's current extent and then add the features as
    graphics to the map.  This is accomplished by listening to
    the map's extentChange event and issuing a query for cities
    using the QueryTask.  When the response is returned, the
    graphics (with tooltips) are added to a graphics layer.

    Documentation:
    For more information, see the API documentation.
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/FeatureSet.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/Graphic.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/events/ExtentEvent.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/geometry/Extent.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/geometry/Extent.html#contains()
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/geometry/MapPoint.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/layers/GraphicsLayer.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/symbols/SimpleLineSymbol.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/symbols/SimpleMarkerSymbol.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/tasks/QueryTask.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/tasks/supportClasses/Query.html

    ArcGIS REST API documentation:
    http://resources.arcgis.com/en/help/rest/apiref/query.html
    -->

    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        mx|ToolTip
        {
            font-size: 14;
            backgroundColor: #EEEEEE;
        }
    </fx:Style>

    <fx:Script>
        <![CDATA[
            import com.esri.ags.FeatureSet;
            import com.esri.ags.Graphic;
            import com.esri.ags.events.ExtentEvent;
            import com.esri.ags.geometry.Extent;
            import com.esri.ags.geometry.MapPoint;

            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.rpc.AsyncResponder;

            private var hashmapOfExistingGraphics:Object = {};

            private function onExtentChange(event:ExtentEvent):void
            {
                query.geometry = myMap.extent;
                query.outSpatialReference = myMap.spatialReference;
                queryTask.execute(query, new AsyncResponder(onResult, onFault));
                info.text += "...";
            }

            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.CITY_NAME + "." + myGraphic.attributes.FID;
                    if (!hashmapOfExistingGraphics[graphicID]) // New feature (not already added to graphics layer)
                    {
                        hashmapOfExistingGraphics[graphicID] = 1;
                        myGraphic.id = graphicID;
                        myGraphic.toolTip = myGraphic.attributes.CITY_NAME;
                        myGraphicsLayer.add(myGraphic);
                    }
                }
                // for fun, find out number of points within current extent
                var featuresInExtent:int = 0;
                var extent:Extent = myMap.extent;
                var graphics:ArrayCollection = ArrayCollection(myGraphicsLayer.graphicProvider);
                for each (var graphic:Graphic in graphics)
                {
                    if (extent.contains(MapPoint(graphic.geometry)))
                    {
                        featuresInExtent++;
                    }
                }
                info.text = featuresInExtent + " points in this extent " + " (out of " + myGraphicsLayer.numGraphics + " different points retrieved so far)";
            }

            private function onFault(info:Object, token:Object = null):void
            {
                Alert.show(info.toString());
            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <esri:QueryTask id="queryTask"
                        url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0"
                        useAMF="false"/>
        <esri:Query id="query"
                    outFields="[CITY_NAME,FID]"
                    returnGeometry="true"/>
        <esri:SimpleMarkerSymbol id="defaultSymbol"
                                 alpha="0.5"
                                 color="0x0000FF"
                                 size="13"
                                 style="circle">
            <esri:SimpleLineSymbol/>
        </esri:SimpleMarkerSymbol>
    </fx:Declarations>

    <s:controlBarLayout>
        <s:VerticalLayout gap="10"
                          paddingBottom="7"
                          paddingLeft="10"
                          paddingRight="10"
                          paddingTop="7"/>
    </s:controlBarLayout>
    <s:controlBarContent>
        <s:RichText width="100%">
            This sample demonstrates how to query a service for cities
            using the map's current extent and then add the features as
            graphics to the map.  This is accomplished by listening to
            the map's extentChange event and issuing a query for cities
            using the QueryTask.  When the response is returned, the
            graphics (with tooltips) are added to a graphics layer.
        </s:RichText>
        <s:Label id="info" text=" "/>
    </s:controlBarContent>

    <esri:Map id="myMap" extentChange="onExtentChange(event)">
        <esri:extent>
            <esri:Extent xmin="-14015000" ymin="4579000" xmax="-12757000" ymax="4865000">
                <esri:SpatialReference wkid="102100"/>
            </esri:Extent>
        </esri:extent>
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
        <esri:GraphicsLayer id="myGraphicsLayer" symbol="{defaultSymbol}"/>
    </esri:Map>

</s:Application>