how to realize a zoom function in the droplist?

GeorgiannaStrode · ‎01-05-2011

I edited a bookmark widget, replacing the bookmark list with a droplist successfully. The droplist is populated with data from a mapserver(the data from a layer attribute of the mapserver)
Whenever the user makes a selection in the droplist, I wanna it to zoom to the selected record. I have not realized the zoom function yet. If anyone has experience in this function or knows how to do it, please let me know. I would appreciate your help

My codes are as below.Note that the change="showBookmark(event)" does not work. Thats what I think I might be doing wrong.

<viewer:BaseWidget 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:viewer="com.esri.viewer.*"
xmlns:Bookmark="widgets.QBookmark.*"
x="600" y="300"
layout="absolute"
widgetConfigLoaded="init()" xmlns:esri="http://www.esri.com/2008/ags">

<fx:Script>
<![CDATA[
import com.esri.ags.FeatureSet;
import com.esri.ags.utils.GraphicUtil;
import com.esri.ags.geometry.Extent;

import mx.collections.ArrayList;
import mx.controls.Alert;
import mx.rpc.AsyncResponder;
import mx.events.EffectEvent;

import spark.components.supportClasses.ItemRenderer;
import spark.core.NavigationUnit;

private const BOOKMARKS:String = "bookmarks";
private const ICON_URL:String = "assets/images/";

//labels
private var bookmarksLabel:String;
[Bindable]

//query info
private var featureURL:String;
private var queryAttribute:String;

[Bindable]
private var bookmarkAL:ArrayList; // used by BookmarkDataGroup
private var bookmarkSO:SharedObject;
private var bookmarkSOAL:ArrayList; // stored in bookmarkSO

private var selectedindex:int = 0;

private function init():void
{
if (configXML)
{
//labels
bookmarksLabel = configXML.labels.bookmarkslabel || "Bookmarks";

//query information
featureURL = configXML.queryinfo.featureURL;
queryAttribute = configXML.queryinfo.attribute;
}

bookmarkAL = new ArrayList();
try
{
bookmarkSO = SharedObject.getLocal(BOOKMARKS);
}
catch (err:Error)
{
trace(err);
}
loadBookmarks();
}

private function loadBookmarks():void
{
if (configXML)
{
var bookmarkList:XMLList = configXML..bookmark;
for (var i:int = 0; i < bookmarkList.length(); i++)
{
var name:String = bookmarkList.@name;
var icon:String = bookmarkList.@icon;
var bookmark:Bookmark = new Bookmark();
bookmark.name = name;
bookmark.icon = icon;
bookmarkAL.addItem(bookmark);
}
}
if (bookmarkSO)
{
bookmarkSOAL = bookmarkSO.data[BOOKMARKS] as ArrayList;
if (!bookmarkSOAL)
{
bookmarkSOAL = new ArrayList();
bookmarkSO.data[BOOKMARKS] = bookmarkSOAL;
}
else
{
bookmarkAL.addAll(bookmarkSOAL);
}
}
}

private function showBookmark(event:Event):void
{
var bookmark:Bookmark = ItemRenderer(event.target).data as Bookmark;
query.where = queryAttribute + "='" + bookmark.name + "'";
queryTask.execute(query, new AsyncResponder(onResult, onFault));

function onResult(featureSet:FeatureSet, token:Object = null):void
{
if (featureSet.features.length == 0)
{
Alert.show("Not found.");
}
else
{
map.extent = GraphicUtil.getGraphicsExtent(featureSet.features);
}
}
function onFault(info:Object, token:Object = null):void
{
Alert.show(info.toString());
}
}
]]>
</fx:Script>

<fx:Declarations>
<esri:QueryTask id="queryTask"
url="{featureURL}"
useAMF="false"/>
<esri:Query id="query"
outSpatialReference="{map.spatialReference}"
returnGeometry="true"/>
</fx:Declarations>

<viewer:WidgetTemplate id="helloWorld"
width="300" height="300">
<viewer:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</viewer:layout>

<s:DropDownList id="dropDownList1"
labelField="name"
change="showBookmark(event)"
dataProvider="{bookmarkAL}"/>

<s:Label id="lbl"
fontSize="21"
fontStyle="italic"
fontWeight="bold"/>
</viewer:WidgetTemplate>

</viewer:BaseWidget>

RobertScheitlin__GISP · ‎01-10-2011

Georgianna,

Attach the corrected xml and I will see what the issue is.

GeorgiannaStrode · ‎01-10-2011

I didnot really change anything in the xml file. i supposed its still the mxml file's problem. the codes of xml are below:

<?xml version="1.0" ?>
<configuration>
 <queryinfo>
  <!-- URL of map service feature layer to query -->
  <featureURL>http://labinsw2010.freac.fsu.edu/ArcGIS/rest/services/swfwmd/control2/MapServer/10</featureURL>
  <!-- name of attribute in map service layer to query -->
  <attribute>ctyname</attribute>
 </queryinfo>
 <!-- bookmark names are checked against the specified attribute -->
 <bookmarks>
  <bookmark name="Alachua"></bookmark>
  <bookmark name="Baker"></bookmark>
  <bookmark name="Bay"></bookmark>
 </bookmarks>
 
 <queryinfo2>
  <!-- URL of map service feature layer to query -->
  <featureURL>http://labinsw2010.freac.fsu.edu/ArcGIS/rest/services/swfwmd/control2/MapServer/12</featureURL>
  <!-- name of attribute in map service layer to query -->
  <attribute>quad</attribute>
 </queryinfo2>
 <!-- bookmark names are checked against the specified attribute -->
 <bookmarks2>
  <bookmark2 name="5237"></bookmark2>
 </bookmarks2>
</configuration>

RobertScheitlin__GISP · ‎01-10-2011

Georgiana,

First thing is there is no quad in your data that has a value of 5237... But when you do get a valid value entered into your xml file then this is the updated showbookmark2 code.

private function showBookmark2(event:Event):void
   {
    query.where = queryAttribute2 + "='" + dropDownList2.selectedItem.name + "'";
    queryTask.url = featureURL2;
    queryTask.execute(query, new AsyncResponder(onResult, onFault));
    
    function onResult(featureSet:FeatureSet, token:Object = null):void
    {
     if (featureSet.features.length == 0)
     {
      Alert.show("Not found.");
     }
     else
     {
      map.extent = GraphicUtil.getGraphicsExtent(featureSet.features) ;
     }
    }
    function onFault(info:Object, token:Object = null):void
    {
     Alert.show(info.toString());
    }
   }

GeorgiannaStrode · ‎01-11-2011

Robert:
Thanks! The code

queryTask.url = featureURL2;

turns out very important. I added to every showBookmark function and it works pretty well. Also, in your codes I found that , e.g., in loadBookmark2 function, you used

bookmarkSO2.data[BOOKMARKS] = bookmarkSOAL;

, but it actually should be

bookmarkSO2.data[BOOKMARKS] = bookmarkSOAL2;

.

Now that I have most things working well, except for one layer that works unproperly. The url is http://labinsw2010.freac.fsu.edu/ArcGIS/rest/services/swfwmd/control2/MapServer/3. The difference of this layer from other layers is that it has very long fields name, for example,

base_and_survey.sde.SWFWMD_CONTROL_09_28_2010.swfwmd_hyd (Type: esriFieldTypeString, Alias: swfwmd_hyd, Length: 254 )

.
and

base_and_survey.sde.SWFWMD_CONTROL_09_28_2010.freacid (Type: esriFieldTypeDouble, Alias: FREACID99)

I have other layers working fine. so it might be the layer's problem or the attribute names' problem.
For your reference, the county layer (url is http://labinsw2010.freac.fsu.edu/ArcGIS/rest/services/swfwmd/control2/MapServer/10). the attribute names is as simple as:

ctyname (Type: esriFieldTypeString, Alias: ctyname, Length: 15 )

I used swfwmd_hyd, freacid, etc, and only swfwmd_hyd did not give me an operation error. The thing about swfwmd_hyd, still, is that it does not load data right. I'm stuck in this layer right now

RobertScheitlin__GISP · ‎01-11-2011

Georgianna,

So post the xml code that you are attempting.

GeorgiannaStrode · ‎01-11-2011

the xml of the SWFWMD layer is:

 <queryinfo2>
  <!-- URL of map service feature layer to query -->
  <featureURL>http://labinsw2010.freac.fsu.edu/ArcGIS/rest/services/swfwmd/control2/MapServer/3</featureURL>
  <!-- name of attribute in map service layer to query -->
  <attribute>swfwmd_hyd</attribute>
 </queryinfo2>
 <!-- bookmark names are checked against the specified attribute -->
 <bookmarks2>
  <bookmark2 name="CYP043"></bookmark2>
  <bookmark2 name="900012"></bookmark2>
  <bookmark2 name="19966"></bookmark2>
  <bookmark2 name="17500"></bookmark2>
 </bookmarks2>

RobertScheitlin__GISP · ‎01-11-2011

Georgianna,

A couple of things one a point feature does not have an extent so your zooming code will not work for point layers. Two your xml has to use the full attribute name.

<queryinfo2>
  <!-- URL of map service feature layer to query -->
  <featureURL>http://labinsw2010.freac.fsu.edu/ArcGIS/rest/services/swfwmd/control2/MapServer/3</featureURL>
  <!-- name of attribute in map service layer to query -->
  <attribute>base_and_survey.sde.SWFWMD_CONTROL_09_28_2010.swfwmd_hyd</attribute>
 </queryinfo2>
 <!-- bookmark names are checked against the specified attribute -->
 <bookmarks2>
  <bookmark2 name="CYP043"></bookmark2>
  <bookmark2 name="900012"></bookmark2>
  <bookmark2 name="19966"></bookmark2>
  <bookmark2 name="17500"></bookmark2>
 </bookmarks2>

RobertScheitlin__GISP · ‎01-11-2011

Georgianna,

Here is how you would handle point layers:

   private function showBookmark2(event:Event):void
   {
    query.where = queryAttribute2 + "='" + dropDownList2.selectedItem.name + "'";
    queryTask.url = featureURL2;
    queryTask.execute(query, new AsyncResponder(onResult, onFault));
    
    function onResult(featureSet:FeatureSet, token:Object = null):void
    {
     if (featureSet.features.length == 0)
     {
      Alert.show("Not found.");
     }else if(featureSet.features.length == 1){
      if(featureSet.features[0].geometry is MapPoint)
      {
       map.scale = 24000;
       map.centerAt(featureSet.features[0].geometry as MapPoint);
      }else{
       map.extent = GraphicUtil.getGraphicsExtent(featureSet.features);
      }
     }
     else
     {
      map.extent = GraphicUtil.getGraphicsExtent(featureSet.features);
     }
    }
    function onFault(info:Object, token:Object = null):void
    {
     Alert.show(info.toString());
    }
   }

Also a couple of more things we missed in load bookmarks2:

   private function loadBookmarks2():void
   {
    if (configXML)
    {
     var bookmarkList:XMLList = configXML..bookmark2;
     for (var i:int = 0; i < bookmarkList.length(); i++)
     {
      var name:String = bookmarkList.@name;
      var icon:String = bookmarkList.@icon;
      var bookmark2:Object = new Object();
      bookmark2.name = name;
      bookmark2.icon = icon;
      bookmarkAL2.addItem(bookmark2);
     }
    }
    if (bookmarkSO2)
    {
     bookmarkSOAL2 = bookmarkSO2.data[BOOKMARKS2] as ArrayList;
     if (!bookmarkSOAL2)
     {
      bookmarkSOAL2 = new ArrayList();
      bookmarkSO2.data[BOOKMARKS2] = bookmarkSOAL2;
     }
     else
     {
      bookmarkAL2.addAll(bookmarkSOAL2);
     }
    }
   }

RobertScheitlin__GISP · ‎01-11-2011

Georgianna,

Here is what the code looks like completely cleaned up removing unused stuff.

<?xml version="1.0" encoding="utf-8"?>
<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:viewer="com.esri.viewer.*"
       xmlns:esri="http://www.esri.com/2008/ags"
       x="600" y="300"
       layout="absolute"
       widgetConfigLoaded="init()" >
 
 <fx:Script>
  <![CDATA[
   import com.esri.ags.FeatureSet;
   import com.esri.ags.geometry.Extent;
   import com.esri.ags.geometry.MapPoint;
   import com.esri.ags.utils.GraphicUtil;
   
   import mx.collections.ArrayList;
   import mx.controls.Alert;
   import mx.rpc.AsyncResponder;
   
   private const ICON_URL:String = "assets/images/";
   
   //labels
   [Bindable]
   private var bookmarksLabel:String;
   [Bindable]
   private var bookmarksLabel2:String;
   
   //query info
   [Bindable]
   private var featureURL:String;
   private var queryAttribute:String;
   private var featureURL2:String;
   private var queryAttribute2:String;
   
   [Bindable]
   private var bookmarkAL:ArrayList;
   
   [Bindable]
   private var bookmarkAL2:ArrayList;
   
   private var selectedindex:int = 0;
   
   private function init():void
   {
    if (configXML)
    {
     //labels
     bookmarksLabel = configXML.labels.bookmarkslabel || "Option 1";
     bookmarksLabel2 = configXML.labels.bookmarkslabel2 || "Option 2";
     
     //query information
     featureURL = configXML.queryinfo.featureURL;
     queryAttribute = configXML.queryinfo.attribute;
     
     featureURL2 = configXML.queryinfo2.featureURL;
     queryAttribute2 = configXML.queryinfo2.attribute;
    }
    
    bookmarkAL = new ArrayList();
    loadBookmarks();
    
    bookmarkAL2 = new ArrayList();
    loadBookmarks2();
   } 
    
   private function loadBookmarks():void
   {
    if (configXML)
    {
     var bookmarkList:XMLList = configXML..bookmark;
     for (var i:int = 0; i < bookmarkList.length(); i++)
     {
      var name:String = bookmarkList.@name;
      var icon:String = bookmarkList.@icon;
      var bookmark:Object = new Object();
      bookmark.name = name;
      bookmark.icon = icon;
      bookmarkAL.addItem(bookmark);
     }
    }
   }
   
   private function showBookmark(event:Event):void
   {
    query.where = queryAttribute + "='" + dropDownList1.selectedItem.name + "'";
    queryTask.execute(query, new AsyncResponder(onResult, onFault));
    
    function onResult(featureSet:FeatureSet, token:Object = null):void
    {
     if (featureSet.features.length == 0){
      Alert.show("Not found.");
     }else if(featureSet.features.length == 1){
      if(featureSet.features[0].geometry is MapPoint)
      {
       map.scale = 24000;
       map.centerAt(featureSet.features[0].geometry as MapPoint);
      }else{
       map.extent = GraphicUtil.getGraphicsExtent(featureSet.features);
      }
     }else{
      map.extent = GraphicUtil.getGraphicsExtent(featureSet.features);
     }
    }
    function onFault(info:Object, token:Object = null):void
    {
     Alert.show(info.toString());
    }
   }
   
   private function loadBookmarks2():void
   {
    if (configXML)
    {
     var bookmarkList:XMLList = configXML..bookmark2;
     for (var i:int = 0; i < bookmarkList.length(); i++)
     {
      var name:String = bookmarkList.@name;
      var icon:String = bookmarkList.@icon;
      var bookmark2:Object = new Object();
      bookmark2.name = name;
      bookmark2.icon = icon;
      bookmarkAL2.addItem(bookmark2);
     }
    }
   }
   
   private function showBookmark2(event:Event):void
   {
    query.where = queryAttribute2 + "='" + dropDownList2.selectedItem.name + "'";
    queryTask.url = featureURL2;
    queryTask.execute(query, new AsyncResponder(onResult, onFault));
    
    function onResult(featureSet:FeatureSet, token:Object = null):void
    {
     if (featureSet.features.length == 0){
      Alert.show("Not found.");
     }else if(featureSet.features.length == 1){
      if(featureSet.features[0].geometry is MapPoint)
      {
       map.scale = 24000;
       map.centerAt(featureSet.features[0].geometry as MapPoint);
      }else{
       map.extent = GraphicUtil.getGraphicsExtent(featureSet.features);
      }
     }else{
      map.extent = GraphicUtil.getGraphicsExtent(featureSet.features);
     }
    }
    function onFault(info:Object, token:Object = null):void
    {
     Alert.show(info.toString());
    }
   }
    
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <esri:QueryTask id="queryTask"
      url="{featureURL}"
      useAMF="false"/>
  <esri:Query id="query"
     outSpatialReference="{map.spatialReference}"
     returnGeometry="true"/>
 </fx:Declarations>
 
 <viewer:WidgetTemplate width="300" height="180">
  <viewer:layout>
   <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
  </viewer:layout>
  
  <s:Label text="{bookmarksLabel}" />
  <s:DropDownList id="dropDownList1"
       labelField="name"
       change="showBookmark(event)"
       dataProvider="{bookmarkAL}"/>
  
  <s:Label text="{bookmarksLabel2}" />
  <s:DropDownList id="dropDownList2"
       labelField="name"
       change="showBookmark2(event)"
       dataProvider="{bookmarkAL2}"/>
  
  <s:Label id="lbl"
     fontSize="21"
     fontStyle="italic"
     fontWeight="bold"/>
 </viewer:WidgetTemplate>
</viewer:BaseWidget>

and the xml:

<?xml version="1.0" ?>
<configuration>
 <queryinfo>
  <!-- URL of map service feature layer to query -->
  <featureURL>http://labinsw2010.freac.fsu.edu/ArcGIS/rest/services/swfwmd/control2/MapServer/10</featureURL>
  <!-- name of attribute in map service layer to query -->
  <attribute>ctyname</attribute>
 </queryinfo>
 <!-- bookmark names are checked against the specified attribute -->
 <bookmarks>
  <bookmark name="Alachua"/>
  <bookmark name="Baker"/>
  <bookmark name="Bay"/>
  <bookmark name="Leon"/>
 </bookmarks>
 
 <queryinfo2>
  <!-- URL of map service feature layer to query -->
  <featureURL>http://labinsw2010.freac.fsu.edu/ArcGIS/rest/services/swfwmd/control2/MapServer/3</featureURL>
  <!-- name of attribute in map service layer to query -->
  <attribute>base_and_survey.sde.SWFWMD_CONTROL_09_28_2010.swfwmd_hyd</attribute>
 </queryinfo2>
 <!-- bookmark names are checked against the specified attribute -->
 <bookmarks2>
  <bookmark2 name="CYP043"/>
  <bookmark2 name="900012"/>
  <bookmark2 name="19966"/>
  <bookmark2 name="17500"/>
 </bookmarks2>
 <labels>
  <bookmarkslabel>Choose a county from the droplist</bookmarkslabel>
  <bookmarkslabel2>Choose a quad from the droplist</bookmarkslabel2>
 </labels>
</configuration>

GeorgiannaStrode · ‎01-13-2011

Hi Robert:
I feel bad for bringing troubles to you. 😉
Anyway i tried the codes u sent to me, i got 2 errors which are these 2 lines in showBookmark2 function:

if(featureSet.features[0].geometry is MapPoint)

and

map.centerAt(featureSet.features[0].geometry as MapPoint);

in the xml file i am using:

 <queryinfo2>
  <!-- URL of map service feature layer to query -->
  <featureURL>http://labinsw2010/ArcGIS/rest/services/swfwmd/control2/MapServer/14</featureURL>
  <!-- name of attribute in map service layer to query -->
  <attribute>swfwmd_hyd</attribute>
 </queryinfo2>

 <bookmarks2>
  <bookmark2 name="17500"></bookmark2>
 </bookmarks2>

I tried the old codes too, and these new codes, neither works. if it is true that we need to use different codes for point zoom from those used for polygon zoom, i think there is something tiny that needs to be fixed here.