Radio Button on/off Layers

[MattWilliams]

After an entire day of attempting this, I'm hoping to find some answers here on the forum. It appears I've bitten off more than I can chew. What I'm trying to do is create a set of radio buttons that turn on different layers from a dynamic service. When a radio button is clicked it makes a layer visible and the previously visible layer is turned off.  (i.e. Only one layer is visible at a time)

I've been trying to modify the sample: Dynamic Map Layers on/off, but this has turned into a giant mess. Its just not designed for radio buttons. I had wanted some intelligence (using an array) built into my code, but I'm totally fine for just hard coding it in. Here's a chunk my relevant mxml

  <esri:Map>
     <esri:extent>
            <esri:Extent xmin="-91.17" ymin="40.944" xmax="-90.37" ymax="41.4">
                <esri:SpatialReference wkid="4326"/>
            </esri:Extent>
        </esri:extent>
        <esri:ArcGISDynamicMapServiceLayer id="depthDyn"
            url="http://blackberry.sws.uiuc.edu/ArcGIS/rest/services/FlexDev/Depth/MapServer" />
    </esri:Map>

<mx:Panel width="300" height="250" x="20" y="250" paddingLeft="20">
  <mx:RadioButtonGroup id="cb" itemClick="radioClick(event);"/>
      <mx:RadioButton groupName="cb" id="depth500" value="m500" label="Mercer500" width="150"/>
      <mx:RadioButton groupName="cb" id="depth200" value="m200" label="Mercer200" width="150"/>
      <mx:RadioButton groupName="cb" id="depth100" value="m100" label="Mercer100" width="150"/>
      <mx:RadioButton groupName="cb" id="depth50" value="m50" label="Mercer50" width="150"/>
      <mx:RadioButton groupName="cb" id="depth10" value="m10" label="Mercer10" width="150"/> 
</mx:Panel>

[MarkHoyland]

Hi, Try this one out. It will add all layers automatically and make the first layer visible.

<?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"
 >
 <mx:Script>
  <![CDATA[
   import mx.events.ItemClickEvent;
   import mx.collections.ArrayCollection;
   import mx.controls.RadioButton;
   
   private function loadLayerName():void
   {
    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]);
   }
   
   private function radioClickHandler(event:ItemClickEvent):void
   {
    // update the visible layers to only show the layer selected
    dynamicLayer.visibleLayers = new ArrayCollection([event.index]);
   }

  ]]>
 </mx:Script>
 
 
 <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"
   load="loadLayerName()"
   url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/{myURL.selectedItem}/MapServer" />
    </esri:Map>
 
 <mx:ComboBox id="myURL" selectedIndex="0" horizontalCenter="0">
        <mx:Array>
            <mx:String>Specialty/ESRI_StateCityHighway_USA</mx:String>
            <mx:String>Specialty/ESRI_StatesCitiesRivers_USA</mx:String>
            <mx:String>Demographics/ESRI_Census_USA</mx:String>
        </mx:Array>
    </mx:ComboBox>
    
 <mx:Panel id="layerPanel" width="300" height="250" x="20" y="250" paddingLeft="20">
  <mx:RadioButtonGroup id="radioBtnGroup" itemClick="radioClickHandler(event)"/>
 </mx:Panel>
 
</mx:Application>

[MattWilliams]

I'm at home right now, so I can't try out your code. However, its appears to on and off different services, not layers. I'm need to run this as one service with 5 layers. Sorry if I wasn't clear in my previous post.

Edit: I also want to express my thanks and appreciation to you for taking the time to help out a fellow.

[MarkHoyland]

I have added a combobox with the extra dynamic services so you can see a generic implementation of what you requested.
When you chose a DynamicMapService from the combobox, only its layers are automatically added as radiobuttons to the panel. If you select a different combobox item, the panel will be updated to only show that DynamicService's layers.

You can remove the combo box and just have your "depthDyn" dynamic service.
The radio buttons get created from the DynamicMapService's "load" event. eg load="loadLayerName()"

You will have to test in flex to see it in action.

[MattWilliams]

Ah! I think I see what you mean...through my vague and mottled understanding of actionscript. Thanks again. I can't wait to try it out tomorrow.

[MattWilliams]

Works perfectly! Thank you so much.

I'm not finding a place to mark this as answered, so I'll just write: ANSWERED

Edit: (In case anyone else uses this and for my own curiousity) Why is the line

layerPanel.removeAllChildren();

necessary in the code? I found that it was preventing me from adding anything to the panel (e.g. A transparency slider). I hope there aren't any repercussions from removing it. I don't seem to be experiencing any problems.

Edit (2):
layerPanel.removeAllChildren(); is necessary if you are working with multiple dynamic services. It basically wipes the panel slate clean and then repopulates the radio buttons with the layers in the new dynamic service.  It just hit me as I was sitting here, so I thought I would answer my own question.

[MGSethe]

Hi, Try this one out. It will add all layers automatically and make the first layer visible.

<?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"
 >
 <mx:Script>
  <![CDATA[
   import mx.events.ItemClickEvent;
   import mx.collections.ArrayCollection;
   import mx.controls.RadioButton;
   
   private function loadLayerName():void
   {
    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]);
   }
   
   private function radioClickHandler(event:ItemClickEvent):void
   {
    // update the visible layers to only show the layer selected
    dynamicLayer.visibleLayers = new ArrayCollection([event.index]);
   }

  ]]>
 </mx:Script>
 
 
 <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"
   load="loadLayerName()"
   url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/{myURL.selectedItem}/MapServer" />
    </esri:Map>
 
 <mx:ComboBox id="myURL" selectedIndex="0" horizontalCenter="0">
        <mx:Array>
            <mx:String>Specialty/ESRI_StateCityHighway_USA</mx:String>
            <mx:String>Specialty/ESRI_StatesCitiesRivers_USA</mx:String>
            <mx:String>Demographics/ESRI_Census_USA</mx:String>
        </mx:Array>
    </mx:ComboBox>
    
 <mx:Panel id="layerPanel" width="300" height="250" x="20" y="250" paddingLeft="20">
  <mx:RadioButtonGroup id="radioBtnGroup" itemClick="radioClickHandler(event)"/>
 </mx:Panel>
 
</mx:Application>

I have used this code for my project, and it works perfectly except that my radiobuttons  representing layers from my map service are grouped on top of each other. Is there anyway i can set the vertical gap to avoid them overlaying on top of one another?.

Please help

[RobertScheitlin__GISP]

Golden,

   Just set the verticalGap of the parent (i.e. the Panel).

[RadmilPopovic]

I just found this thread and have used this nice code and it works OK as standalone appl. But I need similar solution for Widget (Radio Buttons instead of CheckBox in TOC  in f.e. Layer List widget or MapSwitcher Widget) to use with ArcGis Viewer for Flex 2.1.
I trayed to use this code with some changes in my widget but still have problems. My widget comunicate with ArcGis services on my server and i can select diferent services and get listed layers in RadioButton group for selected service but I can't get displayed selected layers on the map. Look as my widget doesn't comunicate with others widgets.
Has sombody used this code in widget or anyone who could help me?

[DennisAkins]

Is there a compiled version of the radio button layer control widget available?