topic Re: Radio Buttons/Combo Box , Legend showing two sublayers in ArcGIS API for Flex Questions

Radio Buttons/Combo Box , Legend showing two sublayers

ionarawilson1 — Tue, 13 Mar 2012 19:50:54 GMT

Robert Scheitlin shared this awesome code to create a map and next to it there is a combo box to choose the map layers and radio buttons to choose the sublayers and a legend.

When the map loads, automatically there is a map in the map area, and a legend for the sublayers shown on the map. But sometimes when the map loads for the first time I have two legends (for both of the sublayers in the service). How can I change that to have just one legend shown on the map when the page first loads? Thank you!!!

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical"
                xmlns:esri="http://www.esri.com/2008/ags"
                paddingBottom="8" paddingLeft="8"
                paddingRight="8" paddingTop="8"
                 backgroundColor="0x999999">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.RadioButton;
            import mx.events.FlexEvent;
            import mx.events.ItemClickEvent;

            private function loadLayerName():void
            {
                myLegend.layers = null;
                layerPanel.removeAllChildren();

                //loop through each layer and add as a radiobutton
                for(var i:uint = 0; i < (dynamicLayer.layerInfos.length); i++)
                {
                    var radioBtn:RadioButton = new RadioButton;
                    radioBtn.groupName = "radioBtnGroup";
                    radioBtn.value = i;
                    radioBtn.label = dynamicLayer.layerInfos.name;
                    layerPanel.addChild(radioBtn);
                }

                //set the visible layer the first radio button
                radioBtnGroup.selectedValue = 0;
                dynamicLayer.visibleLayers = new ArrayCollection([0]);
                myLegend.layers = [dynamicLayer];
                myLegend.visible = true;
            }

            private function radioClickHandler(event:ItemClickEvent):void
            {
                myLegend.layers = null;
                // update the visible layers to only show the layer selected
                dynamicLayer.visibleLayers = new ArrayCollection([event.index]);
                myLegend.layers = [dynamicLayer];
            }

        ]]>
    </mx:Script>

    <mx:HDividedBox width="100%" height="100%" backgroundColor="0x999999">
        <mx:Canvas height="100%" width="100%" backgroundColor="0xffffff">
            <esri:Map id="myMap">
                <esri:extent>
                    <esri:Extent xmin="-126" ymin="27" xmax="-72" ymax="50">
                        <esri:SpatialReference wkid="4326"/>
                    </esri:Extent>
                </esri:extent>
                <esri:ArcGISDynamicMapServiceLayer id="dynamicLayer" name="Legend"
                                                   load="loadLayerName()"
                                                   url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/{myURL.selectedItem.value}/MapServer" />
            </esri:Map>
        </mx:Canvas>
        <mx:Canvas height="100%" width="300" backgroundColor="0xffffff"
                   horizontalScrollPolicy="off"
                   verticalScrollPolicy="off">
            <mx:VBox width="300" height="100%" paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10"
                     verticalGap="8">
                <mx:ComboBox id="myURL" selectedIndex="0" labelField="label" width="100%">
                    <mx:ArrayCollection>
                        <mx:Object label="US City State Highway" value="Specialty/ESRI_StateCityHighway_USA" />
                        <mx:Object label="US City State Rivers" value="Specialty/ESRI_StatesCitiesRivers_USA" />
                        <mx:Object label="US Demographics" value="Demographics/ESRI_Census_USA" />
                    </mx:ArrayCollection>
                </mx:ComboBox>
                <mx:VBox id="layerPanel" width="100%" height="20%" verticalGap="3">
                    <mx:RadioButtonGroup id="radioBtnGroup" itemClick="radioClickHandler(event)"/>
                </mx:VBox>
                <mx:Canvas id="legendPanel" width="100%" height="80%">
                    <esri:Legend id="myLegend" layers="[]"
                                 map="{myMap}" visible="false"
                                 respectCurrentMapScale="false"/>
                </mx:Canvas>
            </mx:VBox>
        </mx:Canvas>
    </mx:HDividedBox>
</mx:Application>

Re: Radio Buttons/Combo Box , Legend showing two sublayers

ThaoLe — Tue, 13 Mar 2012 20:30:19 GMT

I can't reproduce the problem. I ran the code you provided but I always see one legend.

Can you give me the steps you used to reproduce the issue?

Re: Radio Buttons/Combo Box , Legend showing two sublayers

ionarawilson1 — Tue, 13 Mar 2012 20:31:30 GMT

Does your service have two layers? Because mine has, that's why I see two layers when it first loads

Re: Radio Buttons/Combo Box , Legend showing two sublayers

ThaoLe — Tue, 13 Mar 2012 20:33:40 GMT

I ran the code you provided to me as is. Did you modify any of the code on your side?

Re: Radio Buttons/Combo Box , Legend showing two sublayers

ThaoLe — Tue, 13 Mar 2012 20:35:49 GMT

I checked the map services used in the code.

This one below has 3 layers.
http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer

I still see only 1 legend. Can you provide me a screen shot of what you see?

Re: Radio Buttons/Combo Box , Legend showing two sublayers

ionarawilson1 — Tue, 13 Mar 2012 20:44:55 GMT

I am attaching the printscreen of my web app with the two legends and here is my code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    xmlns:esri="http://www.esri.com/2008/ags"
    paddingBottom="8" paddingLeft="8"
    paddingRight="8" paddingTop="8"
    backgroundColor="0xffffff">
<mx:Script>
<![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.RadioButton;
   import mx.events.FlexEvent;
   import mx.events.ItemClickEvent;

   private function loadLayerName():void
   {
    myLegend.layers = null;
    layerPanel.removeAllChildren();

    //loop through each layer and add as a radiobutton
    for(var i:uint = 0; i < (dynamicLayer.layerInfos.length); i++)
    {
     var radioBtn:RadioButton = new RadioButton;
     radioBtn.groupName = "radioBtnGroup";
     radioBtn.value = i;
     radioBtn.label = dynamicLayer.layerInfos.name;
     layerPanel.addChild(radioBtn);
     myDividerBox.getDividerAt(0).visible = false;
    }

    //set the visible layer the first radio button
    radioBtnGroup.selectedValue = 0;
    dynamicLayer.visibleLayers = new ArrayCollection([0]);
    myLegend.layers = [dynamicLayer];
    myLegend.visible = true;
   }

   private function radioClickHandler(event:ItemClickEvent):void
   {
    myLegend.layers = null;
    // update the visible layers to only show the layer selected
    dynamicLayer.visibleLayers = new ArrayCollection([event.index]);
    myLegend.layers = [dynamicLayer];
   }

]]>
</mx:Script>

<mx:HBox   width="930" height="800" id="mapHbox" horizontalAlign="center" >
<mx:HDividedBox id="myDividerBox" width="660" height="900" backgroundColor="0xffffff" liveDragging = "true" >

<mx:VBox height="480" width="358" borderStyle="solid" >






    <mx:Canvas height="100%" width="100%" backgroundColor="0xffffff" borderStyle="solid">
     <esri:Map id="myMap" openHandCursorVisible="false"
         height="100%"
         logoVisible="false"
         doubleClickZoomEnabled="false"
         scrollWheelZoomEnabled="false"
         zoomSliderVisible="true"
         scaleBarVisible="false">
      <esri:extent>
       <esri:Extent xmin="-10800000" ymin="3370000" xmax="-10370000" ymax="4100000">
        <esri:SpatialReference wkid="102100"/>
       </esri:Extent>
      </esri:extent>
      <esri:ArcGISDynamicMapServiceLayer id="dynamicLayer" name="Legend"
               load="loadLayerName()"
               url="http://tfs-24279/ArcGIS/rest/services/{myURL.selectedItem.value}/MapServer" />
     </esri:Map>
    </mx:Canvas>


</mx:VBox>

<mx:Canvas height="780" width="280" backgroundColor="0xffffff"
       horizontalScrollPolicy="off"
       verticalScrollPolicy="off" borderStyle="solid">
   <mx:VBox borderStyle="solid" width="288" height="100%" paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10"
      verticalGap="8">
    <mx:ComboBox id="myURL" selectedIndex="0" labelField="label" width="100%">
     <mx:ArrayCollection id="arrarycollection">
      <mx:Object label="Forestry Industry Output " value="TFEI_sorted_counties_2009_totals_added_forestry_industry_ouptput_notcache" />
      <mx:Object label="Forestry Employment" value="TFEI_sorted_counties_2009_totals_added_forestry_employment_ouptput_nocache" />
      <mx:Object label="Forestry Labor Income " value="TFEI_sorted_counties_2009_totals_added_forestry_labor_ouptput_nocache" />
      <mx:Object label="Forestry Indirect Business Tax" value="TFEI_sorted_counties_2009_totals_added_forestry_indirect_bus_tax_nocache" />


     </mx:ArrayCollection>
    </mx:ComboBox>
    <mx:VBox borderStyle="solid" id="layerPanel" width="100%" height="12%" verticalGap="3">
     <mx:RadioButtonGroup id="radioBtnGroup" itemClick="radioClickHandler(event)"/>
    </mx:VBox>
    <mx:Canvas borderStyle="solid" id="legendPanel" width="100%" height="80%">
     <esri:Legend id="myLegend" layers="[]"
         map="{myMap}" visible="false"
         respectCurrentMapScale="false"/>
    </mx:Canvas>
   </mx:VBox>
</mx:Canvas>
</mx:HDividedBox>
</mx:HBox>
</mx:Application>

Re: Radio Buttons/Combo Box , Legend showing two sublayers

ionarawilson1 — Tue, 13 Mar 2012 20:49:26 GMT

Here is what my service looks like (it is not inside a folder like the code provided by Robert, it is in the root folder of the server):

TFEI_sorted_counties_2009_totals_added_forestry_employment_ouptput_nocache (MapServer)
View In:   ArcMap   ArcGIS Explorer   ArcGIS JavaScript   Google Earth   ArcGIS.com Map

View Footprint In:   Google Earth

Service Description:

Map Name: Layers

Legend

All Layers and Tables

Layers:

    Direct Impacts (0)
    Total Impacts (1)

Tables:

Description:

Copyright Text:

Spatial Reference: 102100 (3857)

Single Fused Map Cache: false

Initial Extent:

    XMin: -11319005.6305348
    YMin: 3409753.057235
    XMax: -9827561.96586521
    YMax: 4104364.97445564
    Spatial Reference: 102100 (3857)

Full Extent:

    XMin: -10753719.15143
    YMin: 3409753.057235
    XMax: -10392848.44497
    YMax: 4052852.619065
    Spatial Reference: 102100 (3857)

Units: esriMeters

Supported Image Format Types: PNG24,PNG,JPG,DIB,TIFF,EMF,PS,PDF,GIF,SVG,SVGZ,AI,BMP

Document Info:

    Title:
    Author:
    Comments:
    Subject:
    Category:
    Keywords:
    Credits:

Supported Interfaces:   REST   SOAP

Supported Operations:   Export Map   Identify   Find   Generate KML

Re: Radio Buttons/Combo Box , Legend showing two sublayers

ionarawilson1 — Tue, 13 Mar 2012 20:59:57 GMT

And this is one of the layers

Layer: Direct Impacts (ID: 0)
Display Field: NAME

Type: Feature Layer

Geometry Type: esriGeometryPolygon

Description:

Definition Expression:

Copyright Text:

Min. Scale: 0

Max. Scale: 0

Default Visibility: True

Extent:

    XMin: -10737315.9375
    YMin: 3438984.8555
    XMax: -10409251.6589
    YMax: 4023620.8208
    Spatial Reference: 102100 (3857)

Has Attachments: False

HTML Popup Type: esriServerHTMLPopupTypeAsHTMLText

Drawing Info:

    Renderer:
        Type: classBreaks
        Field: ForDirEmp
        Min Value: 0
        Class Break Infos:
            Class Max Value: 0
            Label: 0
            Description:
            Symbol:
                Simple Fill Symbol:
                Style: esriSFSSolid, Color: [255, 255, 128, 255]
                Outline:
                    Simple Line Symbol:
                    Style: esriSLSSolid, Color: [110, 110, 110, 255], Width: 0.4
            Class Max Value: 24
            Label: 1 - 24
            Description:
            Symbol:
                Simple Fill Symbol:
                Style: esriSFSSolid, Color: [250, 209, 85, 255]
                Outline:
                    Simple Line Symbol:
                    Style: esriSLSSolid, Color: [110, 110, 110, 255], Width: 0.4
            Class Max Value: 35
            Label: 25 - 35
            Description:
            Symbol:
                Simple Fill Symbol:
                Style: esriSFSSolid, Color: [242, 167, 46, 255]
                Outline:
                    Simple Line Symbol:
                    Style: esriSLSSolid, Color: [110, 110, 110, 255], Width: 0.4
            Class Max Value: 51
            Label: 36 - 51
            Description:
            Symbol:
                Simple Fill Symbol:
                Style: esriSFSSolid, Color: [173, 83, 19, 255]
                Outline:
                    Simple Line Symbol:
                    Style: esriSLSSolid, Color: [110, 110, 110, 255], Width: 0.4
            Class Max Value: 109
            Label: 52 - 109
            Description:
            Symbol:
                Simple Fill Symbol:
                Style: esriSFSSolid, Color: [107, 0, 0, 255]
                Outline:
                    Simple Line Symbol:
                    Style: esriSLSSolid, Color: [110, 110, 110, 255], Width: 0.4Transparency: 0
    Labeling Info: N/A

Fields:

    OBJECTID (Type: esriFieldTypeOID, Alias: OBJECTID_1)
    Shape (Type: esriFieldTypeGeometry, Alias: Shape)
    NAME (Type: esriFieldTypeString, Alias: NAME, Length: 15 )
    ForDirIndOut (Type: esriFieldTypeDouble, Alias: ForDirIndOut)
    ForDirEmp (Type: esriFieldTypeInteger, Alias: ForDirEmp)
    ForDirLabInc (Type: esriFieldTypeDouble, Alias: ForDirLabInc)
    ForIndirBusTax (Type: esriFieldTypeDouble, Alias: ForIndirBusTax)
    ForTotImpIndOut (Type: esriFieldTypeDouble, Alias: ForTotImpIndOut)
    ForTotImpEmp (Type: esriFieldTypeInteger, Alias: ForTotImpEmp)
    ForTotImpLabInc (Type: esriFieldTypeDouble, Alias: ForTotImpLabInc)
    LogDirIndOut (Type: esriFieldTypeDouble, Alias: LogDirIndOut)
    LogDirEmp (Type: esriFieldTypeSmallInteger, Alias: LogDirEmp)
    LogDirLabInc (Type: esriFieldTypeDouble, Alias: LogDirLabInc)
    LogIndirBusTax (Type: esriFieldTypeDouble, Alias: LogIndirBusTax)
    LogTotImpIndOut (Type: esriFieldTypeDouble, Alias: LogTotImpIndOut)
    LogTotImpEmp (Type: esriFieldTypeSmallInteger, Alias: LogTotImpEmp)
    LogTotImpLabInc (Type: esriFieldTypeDouble, Alias: LogTotImpLabInc)
    PrimaryPaperDirIndOut (Type: esriFieldTypeDouble, Alias: PrimaryPaperDirIndOut)
    PrimaryPaperDirEmp (Type: esriFieldTypeSmallInteger, Alias: PrimaryPaperDirEmp)
    PrimaryPaperDirLabInc (Type: esriFieldTypeDouble, Alias: PrimaryPaperDirLabInc)
    PrimaryPaperIndirBusTax (Type: esriFieldTypeDouble, Alias: PrimaryPaperIndirBusTax)
    PrimaryPaperTotImpIndOut (Type: esriFieldTypeDouble, Alias: PrimaryPaperTotImpIndOut)
    PrimaryPaperTotImpEmp (Type: esriFieldTypeSmallInteger, Alias: PrimaryPaperTotImpEmp)
    PrimaryPaperTotImpLabInc (Type: esriFieldTypeDouble, Alias: PrimaryPaperTotImpLabInc)
    PrimarySolidIndOut (Type: esriFieldTypeDouble, Alias: PrimarySolidIndOut)
    PrimarySolidEmp (Type: esriFieldTypeSmallInteger, Alias: PrimarySolidEmp)
    PrimarySolidLabInc (Type: esriFieldTypeDouble, Alias: PrimarySolidLabInc)
    PrimarySolidIndBusTax (Type: esriFieldTypeDouble, Alias: PrimarySolidIndBusTax)
    PrimarySolidTotImpIndOut (Type: esriFieldTypeDouble, Alias: PrimarySolidTotImpIndOut)
    PrimarySolidTotImpEmp (Type: esriFieldTypeSmallInteger, Alias: PrimarySolidTotImpEmp)
    PrimarySolidTotImpLabInc (Type: esriFieldTypeDouble, Alias: PrimarySolidTotImpLabInc)
    SecondPaperDirIndOut (Type: esriFieldTypeDouble, Alias: SecondPaperDirIndOut)
    SecondPaperDirEmp (Type: esriFieldTypeSmallInteger, Alias: SecondPaperDirEmp)
    SecondPaperDirLabInc (Type: esriFieldTypeDouble, Alias: SecondPaperDirLabInc)
    SecondPaperIndirBusTax (Type: esriFieldTypeDouble, Alias: SecondPaperIndirBusTax)
    SecondPaperTotImpIndOut (Type: esriFieldTypeDouble, Alias: SecondPaperTotImpIndOut)
    SecondPaperTotImpEmp (Type: esriFieldTypeSmallInteger, Alias: SecondPaperTotImpEmp)
    SecondPaperTotImpLabInc (Type: esriFieldTypeDouble, Alias: SecondPaperTotImpLabInc)
    SecondSolidDirIndOut (Type: esriFieldTypeDouble, Alias: SecondSolidDirIndOut)
    SecondSolidDirEmp (Type: esriFieldTypeSmallInteger, Alias: SecondSolidDirEmp)
    SecondSolidDirLabInc (Type: esriFieldTypeDouble, Alias: SecondSolidDirLabInc)
    SecondSolidBusTax (Type: esriFieldTypeDouble, Alias: SecondSolidBusTax)
    SecondSolidIndOut (Type: esriFieldTypeDouble, Alias: SecondSolidIndOut)
    SecondSolidEmp (Type: esriFieldTypeSmallInteger, Alias: SecondSolidEmp)
    SecondSolidLabInc (Type: esriFieldTypeDouble, Alias: SecondSolidLabInc)
    Shape_Length (Type: esriFieldTypeDouble, Alias: Shape_Length)
    Shape_Area (Type: esriFieldTypeDouble, Alias: Shape_Area)
    DirTotalEmp (Type: esriFieldTypeInteger, Alias: DirTotalEmp)
    DirTotalLabInc (Type: esriFieldTypeDouble, Alias: DirTotalLabInc)
    DirTotalIndirBusTax (Type: esriFieldTypeDouble, Alias: DirTotalIndirBusTax)
    TotImpTotalInd (Type: esriFieldTypeDouble, Alias: TotImpTotalInd)
    TotImpTotalEmp (Type: esriFieldTypeInteger, Alias: TotImpTotalEmp)
    TotImpTotalLabInc (Type: esriFieldTypeDouble, Alias: TotImpTotalLabInc)
    SAMMTotalInd (Type: esriFieldTypeDouble, Alias: SAMMTotalInd)
    DirTotalInd (Type: esriFieldTypeDouble, Alias: DirTotalInd)
    SAMMTotalEmp (Type: esriFieldTypeDouble, Alias: SAMMTotalEmp)
    SAMMTotalLabInc (Type: esriFieldTypeDouble, Alias: SAMMTotalLabInc)
    ForSAMMInd (Type: esriFieldTypeDouble, Alias: ForSAMMInd)
    ForSAMMEmp (Type: esriFieldTypeDouble, Alias: ForSAMMEmp)
    ForSAMMLab (Type: esriFieldTypeDouble, Alias: ForSAMMLab)
    LogSAMMInd (Type: esriFieldTypeDouble, Alias: LogSAMMInd)
    LogSAMMEmp (Type: esriFieldTypeDouble, Alias: LogSAMMEmp)
    LogSAMMLab (Type: esriFieldTypeDouble, Alias: LogSAMMLab)
    PrimaryPaperSAMMInd (Type: esriFieldTypeDouble, Alias: PrimaryPaperSAMMInd)
    PrimaryPaperSAMMEmp (Type: esriFieldTypeDouble, Alias: PrimaryPaperSAMMEmp)
    PrimaryPaperSAMMLab (Type: esriFieldTypeDouble, Alias: PrimaryPaperSAMMLab)
    PrimarySolidSAMMInd (Type: esriFieldTypeDouble, Alias: PrimarySolidSAMMInd)
    PrimarySolidSAMMEmp (Type: esriFieldTypeDouble, Alias: PrimarySolidSAMMEmp)
    PrimarySolidSAMMLab (Type: esriFieldTypeDouble, Alias: PrimarySolidSAMMLab)
    SecondPaperSAMMInd (Type: esriFieldTypeDouble, Alias: SecondPaperSAMMInd)
    SecondPaperSAMMEmp (Type: esriFieldTypeDouble, Alias: SecondPaperSAMMEmp)
    SecondPaperSAMMLab (Type: esriFieldTypeDouble, Alias: SecondPaperSAMMLab)
    SecondSolidSAMMInd (Type: esriFieldTypeDouble, Alias: SecondSolidSAMMInd)
    SecondSolidSAMMEmp (Type: esriFieldTypeDouble, Alias: SecondSolidSAMMEmp)
    SecondSolidSAMMLab (Type: esriFieldTypeDouble, Alias: SecondSolidSAMMLab)

Type ID Field: N/A

Supported Interfaces:   REST

Supported Operations:   Query

Re: Radio Buttons/Combo Box , Legend showing two sublayers

ThaoLe — Tue, 13 Mar 2012 21:17:30 GMT

Are you able to constantly reproduce the problem or does it happen randomly?

Re: Radio Buttons/Combo Box , Legend showing two sublayers

ionarawilson1 — Wed, 14 Mar 2012 12:21:59 GMT

Are you able to constantly reproduce the problem or does it happen randomly?

Hi Thang,

It is random. I tested to open 20 times in a row and 10 times it showed two legends and 10 times it didn't.

Re: Radio Buttons/Combo Box , Legend showing two sublayers

ionarawilson1 — Wed, 14 Mar 2012 18:25:57 GMT

Any idea on why this might be happening?

Re: Radio Buttons/Combo Box , Legend showing two sublayers

ThaoLe — Fri, 16 Mar 2012 16:14:40 GMT

Do you know if this only happens with your map service or can you reproduce it using Esri's map services hosted on arcgis.com?
Do notice anything different about how the application loads when the problem occurs?
- Does it load slower?
- What browser are you using?

Re: Radio Buttons/Combo Box , Legend showing two sublayers

ThaoLe — Fri, 16 Mar 2012 16:28:25 GMT

oh also... can you reproduce the issue on multiple machines or does it happen only on one?

Re: Radio Buttons/Combo Box , Legend showing two sublayers

ionarawilson1 — Thu, 22 Mar 2012 13:11:57 GMT

Do you know if this only happens with your map service or can you reproduce it using Esri's map services hosted on arcgis.com?
Do notice anything different about how the application loads when the problem occurs?
- Does it load slower?
- What browser are you using?

Hi Thang,

To answer your questions
The same problem happens with ESRI services
No, it does not load slower
I used both IE and Mozilla Firefox
The same problem happens in another machine

Here is the code I used with the ESRI services. Can you please try on your side and see if you have the same problem? Thank you!!!

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    xmlns:esri="http://www.esri.com/2008/ags"
    paddingBottom="8" paddingLeft="8"
    paddingRight="8" paddingTop="8"
    backgroundColor="0x999999">
<mx:Script>
<![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.RadioButton;
   import mx.events.FlexEvent;
   import mx.events.ItemClickEvent;

   private function loadLayerName():void
   {
    myLegend.layers = null;
    layerPanel.removeAllChildren();

    //loop through each layer and add as a radiobutton
    for(var i:uint = 0; i < (dynamicLayer.layerInfos.length); i++)
    {
     var radioBtn:RadioButton = new RadioButton;
     radioBtn.groupName = "radioBtnGroup";
     radioBtn.value = i;
     radioBtn.label = dynamicLayer.layerInfos.name;
     layerPanel.addChild(radioBtn);
    }

    //set the visible layer the first radio button
    radioBtnGroup.selectedValue = 0;
    dynamicLayer.visibleLayers = new ArrayCollection([0]);
    myLegend.layers = [dynamicLayer];
    myLegend.visible = true;
   }

   private function radioClickHandler(event:ItemClickEvent):void
   {
    myLegend.layers = null;
    // update the visible layers to only show the layer selected
    dynamicLayer.visibleLayers = new ArrayCollection([event.index]);
    myLegend.layers = [dynamicLayer];
   }

]]>
</mx:Script>

<mx:HDividedBox width="100%" height="100%" backgroundColor="0x999999">
<mx:Canvas height="100%" width="100%" backgroundColor="0xffffff">
   <esri:Map id="myMap">
    <esri:extent>
     <esri:Extent xmin="-126" ymin="27" xmax="-72" ymax="50">
      <esri:SpatialReference wkid="4326"/>
     </esri:Extent>
    </esri:extent>
    <esri:ArcGISDynamicMapServiceLayer id="dynamicLayer" name="Legend"
               load="loadLayerName()"
               url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/{myURL.selectedItem.value}/MapServer" />
   </esri:Map>
</mx:Canvas>
<mx:Canvas height="100%" width="300" backgroundColor="0xffffff"
       horizontalScrollPolicy="off"
       verticalScrollPolicy="off">
   <mx:VBox width="300" height="100%" paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10"
      verticalGap="8">
    <mx:ComboBox id="myURL" selectedIndex="0" labelField="label" width="100%">
     <mx:ArrayCollection>
      <mx:Object label="US Demographics" value="Demographics/ESRI_Census_USA" />
      <mx:Object label="US City State Rivers" value="Specialty/ESRI_StatesCitiesRivers_USA" />
      <mx:Object label="US City State Highway" value="Specialty/ESRI_StateCityHighway_USA" />



     </mx:ArrayCollection>
    </mx:ComboBox>
    <mx:VBox id="layerPanel" width="100%" height="20%" verticalGap="3">
     <mx:RadioButtonGroup id="radioBtnGroup" itemClick="radioClickHandler(event)"/>
    </mx:VBox>
    <mx:Canvas id="legendPanel" width="100%" height="80%">
     <esri:Legend id="myLegend" layers="[]"
         map="{myMap}" visible="false"
         respectCurrentMapScale="false"/>
    </mx:Canvas>
   </mx:VBox>
</mx:Canvas>
</mx:HDividedBox>
</mx:Application>