Radio Buttons/Combo Box , Legend showing two sublayers

WilsonIonara

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>

WilsonIonara

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>