Radio Buttons/Combo Box , Legend showing two sublayers

[ionarawilson1]

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>

[ThaoLe]

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?

[ionarawilson1]

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

[ThaoLe]

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

[ThaoLe]

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/MapSe...

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

[ionarawilson1]

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:Panel
    width="356" height="100%"
    color="0x000000"
    borderAlpha="0.15"
   
    >
    -->
  
   
   
    <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:Panel>-->
  
  </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>

[ionarawilson1]

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

[ionarawilson1]

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

[ThaoLe]

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

[ionarawilson1]

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.