topic Re: Creating an extent DropDownList in ArcGIS API for Flex Questions

Creating an extent DropDownList

JasonLevine — Mon, 25 Oct 2010 22:59:58 GMT

Hello,
I'm trying to create a bookmark drop down list in my flex app. I've created the drop down bar with this code:

<s:DropDownList width="164" prompt="Select Your Community">
<s:ArrayCollection>
<fx:String>Community #1</fx:String>
<fx:String>Community #2</fx:String>
</s:ArrayCollection>
</s:DropDownList>

My two questions are:
1) Where do specify the extent values (minx, miny, etc...) for each community? Do I do that within the string tag, or do I create a separate xml file with the data?
2) How do I add a function that zooms the map to the extent specified when a city is selected from the drop down list?

Thanks for your help,
Jason

Re: Creating an extent DropDownList

MattiasEkström — Tue, 26 Oct 2010 10:32:32 GMT

I've created a bookmark DropDownList in the HeaderControllerWidget in my FlexViewer 2.1 site.
I looked at the bookmark widget, so I specifies the extent in the xml file in the same way the bookmarkWidget does. There is other ways to do that also, but to specify them in the xml file will make it easier to change the extents later.
After reading the extents and names from the xml file i create an ArrayCollection which I use as dataProvider for the DropDownList.
In the DropDownList tag you should add something like: change="SomeFunction(event)"
And in that function you can add the code for zooming to some extent.

Re: Creating an extent DropDownList

KenBuja — Tue, 26 Oct 2010 12:25:30 GMT

Take a look at this post

Re: Creating an extent DropDownList

JasonLevine — Tue, 26 Oct 2010 17:17:00 GMT

Thanks for pointing me in the right direction.

Based on the code in the threads suggested above, I've set up the following:

private function change():void
   {
    var extent:String = dropdown.selectedItem.data;
    var extArray:Array = extent.split(",");
    var myextent:Extent = new Extent(extArray[0],extArray[1],extArray[2],extArray[3],myMap.spatialReference);
    myMap.extent = myextent;
   }

<s:ComboBox id="dropdown" width="164" change="change()" selectedItem="{{label:'Select Your Community'}}">
   <s:dataProvider>
    <s:ArrayCollection>
     <fx:Object label="Community #1" data="-13193910,4021484,-13177585,4028612"/>
     <fx:Object label="Community #2" data="-13192635,4020932,-13160532,4035188"/>
    </s:ArrayCollection>
   </s:dataProvider>
</s:ComboBox>

How would I link a separate XML file containing all my extents to the dataprovider so that I could keep the clutter out of my main mxml document?

Thanks for your help,
Jason

Re: Creating an extent DropDownList

KenBuja — Fri, 10 Dec 2021 22:50:12 GMT

Here's the way I have it one of my applications. Once the XML file is finishing being read, if the XML file contains the extents node, I create an array that holds the extents and make that the dataprovider for my combobox cboExtent.

private var xmlParameters:XML;    
public var xmlProjectParameters:XMLList;

private function init():void
{
    var xmlLoader:URLLoader = new URLLoader();
    xmlLoader.load(new URLRequest("parameters.xml"));

    xmlLoader.addEventListener(Event.COMPLETE,init_onComplete);
}

private function init_onComplete(event:Event):void
{
    var extentArray:ArrayCollection = new ArrayCollection;

    try
    {
        var loader:URLLoader = URLLoader(event.target)
        xmlParameters = new XML(loader.data)
        xmlProjectParameters = xmlParameters.project.(@id=="Testing")

        if (!(xmlParameters.extents == undefined))
        {
            cboExtent.visible = true;
            for (var i:int = 0; i < xmlProjectParameters.extents.extent.length(); i++)
            {
                extentArray.addItem({label:xmlProjectParameters.extents.extent.@name.toString(), xmin: xmlProjectParameters.extents.extent.@xmin.toString(), ymin: xmlProjectParameters.extents.extent.@ymin.toString(), xmax: xmlProjectParameters.extents.extent.@xmax.toString(), ymax: xmlProjectParameters.extents.extent.@ymax.toString()});
            }
            cboExtent.dataProvider = extentArray;
            
        }

This is what the Close event looks like for the combobox.

public function cboExtent_Close():void
{
    var extent:Extent = new Extent(Number(cboExtent.selectedItem.xmin), Number(cboExtent.selectedItem.ymin), Number(cboExtent.selectedItem.xmax), Number(cboExtent.selectedItem.ymax))
    mainMap.extent = extent;
}

and this is what the XML file looks like

<projects>
  <project id="Testing">
    <extents>
      <extent name="Full Extent" xmin="-7389794" ymin="2023797" xmax="-7360030" ymax="2040131"/>
      <extent name="Zoomin" xmin="-7370000" ymin="2030000" xmax="-7365000" ymax="2035000"/>
    </extents>
  </project>
</projects>

Re: Creating an extent DropDownList

JasonLevine — Tue, 26 Oct 2010 21:41:34 GMT

Hmmm, I'm not really sure how to apply this to the code I've already created. I'll have to experiment with it I guess. Thanks.

Re: Creating an extent DropDownList

JasonLevine — Fri, 10 Dec 2021 22:50:14 GMT

Hi Ken,
Is the name of your xml file "parameters.xml"? Using your code (and my bookmarks.xml file), I've put together the following:

 private var xmlParameters:XML;
   public var xmlProjectParameters:XMLList;
   private function init():void
   {
    var xmlLoader:URLLoader = new URLLoader();
    xmlLoader.load(new URLRequest("bookmarks.xml"));
    xmlLoader.addEventListener(Event.COMPLETE,init_onComplete);
   }
   private function init_onComplete(event:Event):void
   {
    var extentArray:ArrayCollection = new ArrayCollection;
    try
    {
     var loader:URLLoader(event.target)
     xmlParameters = new XML(loader.data)
     xmlProjectParameters = xmlParameters.communities.(@id=="communities")
     
     if(!(xmlParameters.extents == undefined))
     {
      dropdown.visible = true;
      for (var i:int = 0; i < xmlProjectParameters.extents.extent.length(); i++)
      {
       extentArray.addItem({label:xmlProjectParameters.extents.extent.@name.toString(), xmin: xmlProjectParameters.extents.extent.@xmin.toString(), ymin: xmlProjectParameters.extents.extent.@ymin.toString(), xmax: xmlProjectParameters.extents.extent.@xmax.toString(), ymax: xmlProjectParameters.extents.extent.@ymax.toString()});
      }
      dropdown.dataProvider = extentArray;
     }
    }
   }
      
   //Zoom to your community tool   
   public function change():void
   {
    var extent:Extent = new Extent(Number(dropdown.selectedItem.xmin), Number(dropdown.selectedItem.ymin), Number(dropdown.selectedItem.xmax), Number(dropdown.selectedItem.ymax))
    myMap.extent = extent;
   }

However, I'm getting the following 3 errors when compiling:

1) At:

var loader:URLLoader(event.target)

--> 1073: Syntax error: expecting a catch or a finally clause.

2&3) At the opening of the the change function:

public function change():void
          {

-->1084: Syntax error: expecting rightbrace before leftbrace.
-->1086: Syntax error: expecting semicolon before leftparen.

Any ideas?

Also, this is how I structured my bookmarks.xml file:

<?xml version="1.0" encoding="utf-8"?>
<bookmarks>
  <communities id="communities">
 <extents>
   <extent name="Community #1" xmin="-13181026" ymin="4010315" xmax="-13164974" ymax="4017443"/>
    </extents>
  </communities>
</bookmarks>

Thanks,
Jason

Re: Creating an extent DropDownList

KenBuja — Fri, 10 Dec 2021 22:50:17 GMT

I didn't show all of the init_onComplete function and left off the "catch" portion of the "try". Put this code before brace right before the the comment //Zoom to the Community tool...or just take out the "try" line

    catch(e:Error)
    {
        Alert.show("Error: " + e.message);
        return;
    }

Re: Creating an extent DropDownList

JasonLevine — Wed, 27 Oct 2010 18:22:36 GMT

Hi Ken,
That didn't seem to work. Is it missing a finally clause?

See attached image....

-Jason

Re: Creating an extent DropDownList

JasonLevine — Fri, 10 Dec 2021 22:50:20 GMT

Ok, I changed the line

var loader:URLLoader(event.target)

var loader:URLLoader = new URLLoader();

This removed the errors, however, nothing loads into my combobox.

Did I specify the location of the bookmarks.xml file in the xmlLoader correctly?

Re: Creating an extent DropDownList

KenBuja — Wed, 27 Oct 2010 18:40:24 GMT

The first line in the try block (line 38) should be

var loader:URLLoader = URLLoader(event.target)

Re: Creating an extent DropDownList

KenBuja — Wed, 27 Oct 2010 18:56:54 GMT

Have you stepped through the code using the debugger? I would put a breakpoint at the If statement and check your variables to make sure you have properly read in the XML file. I've attached a screenshot of the XML list variable I get from my code. In this particular project, I'm not using the Extents node, but I've expanded out one of the nodes I am using (which also populates a combobox)

Re: Creating an extent DropDownList

JasonLevine — Fri, 10 Dec 2021 22:50:22 GMT

Hi Ken,
I managed to compile it all without any errors, however, the values in the xml don't seem to be loading into the Combobox. where do I call the init() function? Is it something like this?:

<?xml version="1.0" encoding="utf-8"?>
<s:Application 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:esri="http://www.esri.com/2008/ags" 
      xmlns:container="com.esri.ags.script.*" 
      initialize="init()" >

Re: Creating an extent DropDownList

KenBuja — Wed, 27 Oct 2010 19:20:09 GMT

I have that in the creationComplete event

Re: Creating an extent DropDownList

JasonLevine — Fri, 10 Dec 2021 22:50:25 GMT

I added it to the creationComplete event, and the xml values still don't load in the combobox. See anything wrong with my code?

Thanks,
Jason

Here are the functions:

//the following two functions import the bookmarks.xml file
   private var xmlParameters:XML;    
   public var xmlProjectParameters:XMLList;
   
   private function init():void
   {
    var xmlLoader:URLLoader = new URLLoader();
    xmlLoader.load(new URLRequest("bookmarks.xml"));
    xmlLoader.addEventListener(Event.COMPLETE,init_onComplete);
   }
   
   private function init_onComplete(event:Event):void
   {
    var extentArray:ArrayCollection = new ArrayCollection;
    
    try
    {
     var loader:URLLoader = URLLoader(event.target)
     xmlParameters = new XML(loader.data)
     xmlProjectParameters = xmlParameters.communities.(@id=="communities")
     
     if (!(xmlParameters.extents == undefined))
     {
      dropdown.visible = true;
      for (var i:int = 0; i < xmlProjectParameters.extents.extent.length(); i++)
      {
       extentArray.addItem({label:xmlProjectParameters.extents.extent.@name.toString(), xmin: xmlProjectParameters.extents.extent.@xmin.toString(), ymin: xmlProjectParameters.extents.extent.@ymin.toString(), xmax: xmlProjectParameters.extents.extent.@xmax.toString(), ymax: xmlProjectParameters.extents.extent.@ymax.toString()});
      }
      dropdown.dataProvider = extentArray;
      
     }
    }
    catch(e:Error)
    {
     Alert.show("Error: " + e.message);
     return;
    }
   }
   
   //Zoom to your community tool   
   public function change():void
   {
    var extent:Extent = new Extent(Number(dropdown.selectedItem.xmin), Number(dropdown.selectedItem.ymin), Number(dropdown.selectedItem.xmax), Number(dropdown.selectedItem.ymax))
    myMap.extent = extent;
   }

Here is my bookmarks.xml file:

<bookmarks>
  <communities id="communities">
 <extents>
   <extent name="Community #1" xmin="-13181026" ymin="4010315" xmax="-13164974" ymax="4017443"/>
    </extents>
  </communities>
</bookmarks>

Re: Creating an extent DropDownList

JasonLevine — Fri, 10 Dec 2021 22:50:28 GMT

Problem solved. I removed the try and catch and shortened it up a bit:

private function init_onComplete(event:Event):void
   {
    var extentArray:ArrayCollection = new ArrayCollection;
    var loader:URLLoader = URLLoader(event.target)
    xmlParameters = new XML(loader.data)
    xmlProjectParameters = xmlParameters.communities.(@id=="communities")
    for (var i:int = 0; i < xmlProjectParameters.extents.extent.length(); i++)
    {
    extentArray.addItem({label:xmlProjectParameters.extents.extent.@name.toString(), xmin: xmlProjectParameters.extents.extent.@xmin.toString(), ymin: xmlProjectParameters.extents.extent.@ymin.toString(), xmax: xmlProjectParameters.extents.extent.@xmax.toString(), ymax: xmlProjectParameters.extents.extent.@ymax.toString()}); 
    }
    dropdown.dataProvider = extentArray;
   }

Thanks for your help,
Jason

Re: Creating an extent DropDownList

MarcGuidry — Fri, 30 Sep 2011 19:16:43 GMT

Hi,
Sorry to dig up an old thread but...
I've got my combo box working but I was wondering how to get the combo box selection to reset after a selection has been made? That way you can select the first extent, pan around, and go back to that first extent without having to select a different extent first.

Re: Creating an extent DropDownList

denverweston — Tue, 31 Mar 2015 14:05:03 GMT

Hey Jason,

Do you have the updated code for this drop down? My combobox will still not populate using the code above.

Re: Creating an extent DropDownList

EvelynHernandez — Fri, 10 Apr 2015 14:52:36 GMT

Add the features from the last choosen to an arraylist or arraycollection variable, then when u wanna go back u will pass those values to the zoom extent.