Creating an extent DropDownList

[JasonLevine]

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

[MattiasEkström]

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.

[KenBuja]

Take a look at this post

[JasonLevine]

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

[KenBuja]

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>

[JasonLevine]

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.

[JasonLevine]

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

[KenBuja]

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

[JasonLevine]

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

See attached image....

-Jason

[JasonLevine]

Ok, I changed the line

var loader:URLLoader(event.target)

to

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?