Infowindow with button to zoom to point on feature layer

DavidBoiano — Wed, 27 Mar 2013 19:25:36 GMT

Hello,

I am new to ActionScript so any ideas/suggestions would be greatly appreciated!

I have a feature layer hosted on ArcGIS Server 10 that is a point layer. I have an infowindow that pops-up when the user clicks on the symbol in the point feature layer. I have added a button to the infowindow labeled "Zoom to SSO" that when clicked I would like it t zoom to the address point at street level.

So far I have added a clickHandler() event to myMap and stored that click into a variable called lastGraphic (I think I did it correctly). This click is registering the point on the map that I want to zoom into and have been at the center of my extent. The next click that needs to be handled is when clicking the "Zoom to SSO" button. I am having a hard time with getting this event to fire.

Here is my code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      xmlns:esri="http://www.esri.com/2008/ags"
      xmlns:s="library://ns.adobe.com/flex/spark"
      pageTitle="Query Task (with a map)">

<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace esri "http://www.esri.com/2008/ags";
esri|InfoWindowLabel
{
   color: white;
   font-size: 20;
}

</fx:Style>
<fx:Script>
<![CDATA[
   import com.esri.ags.Graphic;
   import com.esri.ags.geometry.MapPoint;

   import mx.collections.ArrayCollection;

   import spark.events.IndexChangeEvent;



   [Bindable]
   public var myDP:ArrayCollection = new ArrayCollection(
    [ {timeframe:"Last 2 Weeks"},
     {timeframe:"Last Year"},
     {timeframe:"Last 2 Years"},
     {timeframe:"Year to Date (2013)"},
     {timeframe:"Last Year (2012)"} ]);

   [Bindable]
   public var updateDefExp:String = "Days_Ago > 49";

   public var lastGraphic:Graphic;


   private function doQuery0():void
   {
    var defExp0:String = "Days_Ago = 49";
    updateDefExp = defExp0;
   }
   private function doQuery1():void
   {
    var defExp1:String = "Days_Ago = 63";
    updateDefExp = defExp1;
   }
   private function doQuery2():void
   {
    var defExp2:String = "Days_Ago = 74";
    updateDefExp = defExp2;
   }
   private function doQuery3():void
   {
    var defExp3:String = "Days_Ago > 95";
    updateDefExp = defExp3;
   }
   private function doQuery4():void
   {
    var defExp4:String = "Days_Ago < 60";
    updateDefExp = defExp4;
   }

   private function updateSelection(e:IndexChangeEvent):void
   {
    //currentSel.text = "You are viewing SSOs from: " + myDDL.selectedItem.timeframe;

    if(myDDL.selectedItem.timeframe == "Last 2 Weeks")
    {
     doQuery0();
    }
    else if (myDDL.selectedItem.timeframe == "Last Year")
    {
     doQuery1();
    }
    else if (myDDL.selectedItem.timeframe == "Last 2 Years")
    {
     doQuery2();
    }
    else if (myDDL.selectedItem.timeframe == "Year to Date (2013)")
    {
     doQuery3();
    }
    else if (myDDL.selectedItem.timeframe == "Last Year (2012)")
    {
     doQuery4();
    }
   }
   private function clickHandler(event:MouseEvent):void
   {
    var g:Graphic = Graphic(event.currentTarget);
    lastGraphic = g;
   }
   private function zoomToPoint(event:MouseEvent):void
   {
    var newMapPoint:MapPoint = MapPoint(lastGraphic.geometry);
    if (myMap.scale > 100000)
    {
     myMap.scale = 100000;
    }
    else
    {
     var zoomScale:Number = myMap.scale / 4;
     myMap.scale = zoomScale;
    }
    myMap.centerAt( newMapPoint);
   }
]]>
</fx:Script>
<s:controlBarLayout>
<s:HorizontalLayout horizontalAlign="center"
       paddingBottom="10"
       paddingTop="15"/>
</s:controlBarLayout>
<s:controlBarContent>
<s:Label fontSize="12"
     fontWeight="bold"
     text="Select a timeframe from the drop down list: "/>
<s:DropDownList id="myDDL" width="150" prompt="Select..."
      dataProvider="{myDP}" labelField="timeframe"
      change="updateSelection(event);"/>
</s:controlBarContent>
<fx:Declarations>
<esri:SimpleLineSymbol id="smsOutline"
          width="1.5"
          alpha="0.75"
          color="white"/>
<esri:SimpleMarkerSymbol id="querySymbol"
         color="green"
         outline="{smsOutline}"
         size="28"
         style="circle"/>

</fx:Declarations>

<esri:Map id="myMap" click="clickHandler(event)">
<esri:ArcGISDynamicMapServiceLayer url="http://ntsv58/ArcGIS/rest/services/Maps/sso_basemap/MapServer"/>
<esri:FeatureLayer id="layer1" outFields="[ADDRESS,NEIGHBORHO,Spill_Start_Date,Spill_End_Date,Start_Time,End_Time,Spill_Volume__gal_]"
         definitionExpression="{updateDefExp}"
         url="http://ntsv58/ArcGIS/rest/services/Maps/sso_map_fulltable/MapServer/0">
   <esri:infoWindowRenderer>
    <fx:Component>
     <esri:LabelDataRenderer label="{data.ADDRESS}" fontWeight="bold">
      <s:BorderContainer backgroundColor="white"
             borderColor="black"
             color="0x353930"
             cornerRadius="5"
             minHeight="0"
             minWidth="0">
       <s:layout>
        <s:VerticalLayout paddingBottom="5"
              paddingLeft="5"
              paddingRight="5"
              paddingTop="5"/>
       </s:layout>
       <s:Label text="Spill started on {data.Spill_Start_Date} at {data.Start_Time}"/>
       <s:Label text="Spill ended on {data.Spill_End_Date} at {data.End_Time}"/>
       <s:Label text="The volume of the overflow spill was {data.Spill_Volume__gal_} gallons"/>
       <s:Button id="zoomTo" label="Zoom to SSO" click="zoomToPoint(event)"/>
      </s:BorderContainer>
     </esri:LabelDataRenderer>
    </fx:Component>
   </esri:infoWindowRenderer>
   <esri:renderer>
    <esri:SimpleRenderer>
     <esri:SimpleMarkerSymbol color="0x6D0010"
                   outline="{smsOutline}"
                   size="22"
                   style="diamond"/>
    </esri:SimpleRenderer>
   </esri:renderer>
</esri:FeatureLayer>
</esri:Map>

</s:Application>

topic Infowindow with button to zoom to point on feature layer in ArcGIS API for Flex Questions

Infowindow with button to zoom to point on feature layer