Select to view content in your preferred language

how to realize a zoom function in the droplist?

2490
25
01-05-2011 05:26 PM
GeorgiannaStrode
Deactivated User
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>
Tags (2)
0 Kudos
25 Replies
RobertScheitlin__GISP
MVP Emeritus
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 + "'";
0 Kudos
GeorgiannaStrode
Deactivated User
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.
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Georgianna,

   What is the other dropdown list going to do when someone choose a value?
0 Kudos
GeorgiannaStrode
Deactivated User
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.
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
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.
0 Kudos
GeorgiannaStrode
Deactivated User
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>
<!-- 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>
<bookmark name="Leon"></bookmark>
<bookmark name="Orange"></bookmark>
</bookmarks2>

</configuration>

thank you!
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
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>
0 Kudos
GeorgiannaStrode
Deactivated User
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!
0 Kudos
GeorgiannaStrode
Deactivated User
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?
0 Kudos