topic Re: how to realize a zoom function in the droplist? in ArcGIS API for Flex Questions

how to realize a zoom function in the droplist?

GeorgiannaStrode — Thu, 06 Jan 2011 01:26:41 GMT

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>

Re: how to realize a zoom function in the droplist?

RobertScheitlin__GISP — Thu, 06 Jan 2011 11:52:16 GMT

Georgianna,

Your issue is that you are not dealing with a custom itemRenderer any more like the bookmark widget was so you need to do something like this:

query.where = queryAttribute + "='" + dropDownList1.selectedItem.name + "'";

Re: how to realize a zoom function in the droplist?

GeorgiannaStrode — Thu, 06 Jan 2011 19:17:40 GMT

Georgianna,

Your issue is that you are not dealing with a custom itemRenderer any more like the bookmark widget was so you need to do something like this:
query.where = queryAttribute + "='" + dropDownList1.selectedItem.name + "'";

Thanks Robert, It works pretty well!

Do u happen to know a way to add another droplist populated with another layer attribute of the mapserver? I tried to add a droplist, and claimed all the functions and replaces things like Bookmark with Bookmark2, and I also added codes in the xml files, such as <bookmarks2>..
what came out was all the data end up in the same droplist, but the zoom function still works well!
Even though there are many errors in the mxml file which I dont know why.

Re: how to realize a zoom function in the droplist?

RobertScheitlin__GISP — Thu, 06 Jan 2011 19:22:35 GMT

Georgianna,

What is the other dropdown list going to do when someone choose a value?

Re: how to realize a zoom function in the droplist?

GeorgiannaStrode — Thu, 06 Jan 2011 19:28:40 GMT

Georgianna,

What is the other dropdown list going to do when someone choose a value?

It also does the zoom function. for some reason now what I see is that all the data are in the same droplist now, and the zoom function works well. I dont know why it even compiles because there are many errors in the mxml file. but obviously it did not compile the new droplist codes.

Re: how to realize a zoom function in the droplist?

RobertScheitlin__GISP — Thu, 06 Jan 2011 19:32:37 GMT

Georgianna,

Probably just some simple code error. Post what you have both xml and mxml. Make sure you use the code wrap. Look at the toolbar above the box you type in it will be the # button.

Re: how to realize a zoom function in the droplist?

GeorgiannaStrode — Thu, 06 Jan 2011 19:40:23 GMT

what does this mean? "Look at the toolbar above the box you type in it will be the # button."

Anyway, the codes of the mxml file are below:

<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 bookmarkAL2:ArrayList; // used by BookmarkDataGroup
private var bookmarkSO2:SharedObject;
private var bookmarkSOAL2: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;
}

bookmarkAL1 = new ArrayList();
try
{
bookmarkSO = SharedObject.getLocal(BOOKMARKS1);
}
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 + "='" + 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
{
map.extent = GraphicUtil.getGraphicsExtent(featureSet.features);
}
}
function onFault(info:Object, token:Object = null):void
{
Alert.show(info.toString());
}
}

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

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

bookmarkAL2 = new ArrayList();
try
{
bookmarkSO2 = SharedObject.getLocal(BOOKMARKS2);
}
catch (err:Error)
{
trace(err);
}
loadBookmarks2();
}

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:Bookmark = new Bookmark();
bookmark.name = name;
bookmark.icon = icon;
bookmarkAL2.addItem(bookmark2);
}
}
if (bookmarkSO2)
{
bookmarkSOAL2 = bookmarkSO2.data[BOOKMARKS] as ArrayList;
if (!bookmarkSOAL2)
{
bookmarkSOAL2 = new ArrayList();
bookmarkSO2.data[BOOKMARKS] = bookmarkSOAL;
}
else
{
bookmarkAL2.addAll(bookmarkSOAL2);
}
}
}

private function showBookmark2(event:Event):void
{
//var bookmark:Bookmark = ItemRenderer(event.target).data as Bookmark;
query.where = queryAttribute + "='" + dropDownList2.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
{
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:label text="Choose a county from the droplist" />
<s:DropDownList id="dropDownList1"
labelField="name"
change="showBookmark(event)"
dataProvider="{bookmarkAL}"/>

<s:label text="Choose a quad from the droplist" />
<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>

the codes in the xml file are:

<?xml version="1.0" ?>
<configuration>
<queryinfo>

<featureURL>http://labinsw2010.freac.fsu.edu/ArcGIS/rest/services/swfwmd/control2/MapServer/10</featureURL>

<attribute>ctyname</attribute>
</queryinfo>

<bookmarks>
<bookmark name="Alachua"></bookmark>
<bookmark name="Baker"></bookmark>
<bookmark name="Bay"></bookmark>
<bookmark name="Leon"></bookmark>
</bookmarks>

<queryinfo2>

<featureURL>http://labinsw2010.freac.fsu.edu/ArcGIS/rest/services/swfwmd/control2/MapServer/12</featureURL>

<attribute>quad</attribute>
</queryinfo2>

<bookmarks2>
<bookmark name="Leon"></bookmark>
<bookmark name="Orange"></bookmark>
</bookmarks2>

</configuration>

thank you!

Re: how to realize a zoom function in the droplist?

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:23:25 GMT

Georgianna,

What I meant by

Look at the toolbar above the box you type in it will be the # button.

is that you have to use the code wrap option when you paste code in this forum or you will end up with smiles and just generally screwed up code.

So here is what I was saying you need to click before you paste code:

Anyway here is the code with the errors fixed. I did not spend any time refactoring the code or doing any good general code clean-up though.

<?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:mx="library://ns.adobe.com/flex/mx"
       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.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 BOOKMARKS2:String = "bookmarks2";
   private const ICON_URL:String = "assets/images/";
   
   //labels
   private var bookmarksLabel:String;
   [Bindable]
   
   //query info
   private var featureURL:String;
   private var queryAttribute:String;
   private var featureURL2:String;
   private var queryAttribute2:String;
   
   [Bindable]
   private var bookmarkAL:ArrayList; // used by BookmarkDataGroup
   private var bookmarkSO:SharedObject;
   private var bookmarkSOAL:ArrayList; // stored in bookmarkSO
   
   [Bindable]
   private var bookmarkAL2:ArrayList; // used by BookmarkDataGroup
   private var bookmarkSO2:SharedObject;
   private var bookmarkSOAL2: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;
     
     featureURL2 = configXML.queryinfo2.featureURL;
     queryAttribute2 = configXML.queryinfo2.attribute;
    }
    
    bookmarkAL = new ArrayList();
    try
    {
     bookmarkSO = SharedObject.getLocal(BOOKMARKS);
    }
    catch (err:Error)
    {
     trace(err);
    }
    loadBookmarks();
    
    bookmarkAL2 = new ArrayList();
    try
    {
     bookmarkSO2 = SharedObject.getLocal(BOOKMARKS2);
    }
    catch (err:Error)
    {
     trace(err);
    }
    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);
     }
    }
    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 + "='" + 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
     {
      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);
     }
    }
    if (bookmarkSO2)
    {
     bookmarkSOAL2 = bookmarkSO2.data[BOOKMARKS] as ArrayList;
     if (!bookmarkSOAL2)
     {
      bookmarkSOAL2 = new ArrayList();
      bookmarkSO2.data[BOOKMARKS] = bookmarkSOAL;
     }
     else
     {
      bookmarkAL2.addAll(bookmarkSOAL2);
     }
    }
   }
   
   private function showBookmark2(event:Event):void
   {
    query.where = queryAttribute + "='" + dropDownList2.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
     {
      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:Label text="Choose a county from the droplist" />
  <s:DropDownList id="dropDownList1"
       labelField="name"
       change="showBookmark(event)"
       dataProvider="{bookmarkAL}"/>
  
  <s:Label text="Choose a quad from the droplist" />
  <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>

XML File

<?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>
  <bookmark name="Leon"></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="Leon"></bookmark2>
  <bookmark2 name="Orange"></bookmark2>
 </bookmarks2>
</configuration>

Re: how to realize a zoom function in the droplist?

GeorgiannaStrode — Fri, 07 Jan 2011 16:54:16 GMT

Hi Robert, thanks for your codes. they work perfectly well.
one thing i'm a little confused is that in the showBookmark2 function you use queryAttribute rather than queryAttribute2. anyway its probably because queryAttribute2 does not work well, which might be due to the attribute values are written wrong. the quad values should be sth else rather than county names.
really appreciate your help!

Re: how to realize a zoom function in the droplist?

GeorgiannaStrode — Mon, 10 Jan 2011 17:09:53 GMT

Robert:
the thing about the codes above is that, when I use queryAttribute2 in the function showBookmarks2, and put right attribute names to the xml file. an error pops out saying: "RPC Fault faultString="Unable to complete operation." faultCode="400" faultDetail="Unable to complete Query operation."]"

This might indicate that all the Bookmark2, showBookmark2, loadBookmark2 dont work at all. The reason they worked is because u used queryAttribute rather than queryAttribute2.

I think there should be some codes error here. Or is there any else way to declare those variables and functions?

Re: how to realize a zoom function in the droplist?

RobertScheitlin__GISP — Mon, 10 Jan 2011 17:18:07 GMT

Georgianna,

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

Re: how to realize a zoom function in the droplist?

GeorgiannaStrode — Sat, 11 Dec 2021 23:23:27 GMT

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>

Re: how to realize a zoom function in the droplist?

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:23:30 GMT

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());
    }
   }

Re: how to realize a zoom function in the droplist?

GeorgiannaStrode — Tue, 11 Jan 2011 17:49:16 GMT

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

Re: how to realize a zoom function in the droplist?

RobertScheitlin__GISP — Tue, 11 Jan 2011 18:24:25 GMT

Georgianna,

So post the xml code that you are attempting.

Re: how to realize a zoom function in the droplist?

GeorgiannaStrode — Sat, 11 Dec 2021 23:23:33 GMT

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>

Re: how to realize a zoom function in the droplist?

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:23:35 GMT

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>

Re: how to realize a zoom function in the droplist?

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:23:38 GMT

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);
     }
    }
   }

Re: how to realize a zoom function in the droplist?

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:23:41 GMT

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>

Re: how to realize a zoom function in the droplist?

GeorgiannaStrode — Sat, 11 Dec 2021 23:23:44 GMT

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.