nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

how to realize a zoom function in the droplist?

GeorgiannaStrode

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>

Find more posts tagged with

Accepted answers

All comments

RobertScheitlin__GISP

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 + "'";

DuncanHornby_0-1719327184543.png

GeorgiannaStrode

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.

RobertScheitlin__GISP

Georgianna,

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

GeorgiannaStrode

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.

RobertScheitlin__GISP

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.

GeorgiannaStrode

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!

RobertScheitlin__GISP

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&gt;
  <!-- 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&gt;
  <!-- 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>

GeorgiannaStrode

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!

GeorgiannaStrode

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?

RobertScheitlin__GISP

Georgianna,

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

GeorgiannaStrode

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&gt;
  <!-- 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&gt;
  <!-- 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

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

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

Georgianna,

So post the xml code that you are attempting.

GeorgiannaStrode

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&gt;
  <!-- 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

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&gt;
  <!-- 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

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

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&gt;
  <!-- 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&gt;
  <!-- 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

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&gt;
  <!-- 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.

RobertScheitlin__GISP

Georgianna,

For me when I fully qualified your url it worked.

<queryinfo2>
  <!-- URL of map service feature layer to query -->
  <featureURL>http://labinsw2010.freac.fsu.edu/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"/>
 </bookmarks2>

GeorgiannaStrode

Robert:
The only problem with the cleaned up codes that u posted above is that u r using point layer codes for showBookmark1 as well. Actually it should be using codes for polygon layers, just as what u posted the first time. All other things work very well! And the fully qualified url does not really make a difference. I used to think it matters too.
Thank you!

RobertScheitlin__GISP

Robert:
The only problem with the cleaned up codes that u posted above is that u r using point layer codes for showBookmark1 as well. Actually it should be using codes for polygon layers, just as what u posted the first time. All other things work very well! And the fully qualified url does not really make a difference. I used to think it matters too.
Thank you!

Georgianna,

That is because the code will work with all geometry types the way it is written (not just points). The fully qualified url name does matter when you are not on your network. So for me to access your rest services I have to use the full url.

GeorgiannaStrode

Georgianna,

That is because the code will work with all geometry types the way it is written (not just points). The fully qualified url name does matter when you are not on your network. So for me to access your rest services I have to use the full url.

Just tried your codes, and yes, they work well for both types. Might be sth else wrong last time. and I get the part of full url too. Thanks

SamuelLingeman

I've implemented this code and it works great, only the droplist is really narrow, such that the names of the items in my dropdown get cut off quite a bit, is there a way to widen the dropdown list?

RobertScheitlin__GISP

Samuel,

Have you tried adding a width to the dropDownList1 and/or dropDownList2?

Remember if you find a post (any one of them) helpful than click the promote button like below:

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.