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

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

Encuentra más publicaciones etiquetadas con

Accepted answers

All comments

MattiasEkstrom

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

error.jpg

JasonLevine

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?

kenbuja

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

var loader:URLLoader = URLLoader(event.target)

kenbuja

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)

variables.png

JasonLevine

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()" >

kenbuja

I have that in the creationComplete event

JasonLevine

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>

JasonLevine

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

MarcGuidry

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.

denverweston

Hey Jason,

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

EvelynHernandez

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.

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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