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>

[BenKane]

I am looking to implement radio buttons to turn on only one layer at a time through a TOC or LayerSelect widget in Flex Viewer.  Specifically, I want to enable only one polygon feature to be displayed at a time, but I would like to allow multiple point and line features to be displayed simultaneously.  Does anybody have a code solution or tips for this?

Thanks,
Ben K

[KomanDiabate]

Does anybody knows how to change to this great code to use checkbox instead. I was able to show check box instead of option buttons (see below), however, when I hit the checkboxes to turn on and off layer nothing happens. Thanks in advance.

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 chks:CheckBox = new CheckBox;
     chks.name="{checks}"
     chks.label= dynamicLayer.layerInfos.name;
     layerPanel.addChild(chks); 
     
    }
   }

[MarkHoyland]

Hi,

You will need to add an event listener when the ckeckbox is created.
In the handler you would then have to add or remove the layer from the visiblelayers arraycollection.

//add event listener
 var chks:CheckBox = new CheckBox;
 chks.addEventListener(Event.CHANGE, chk_changeHandler);


protected function chk_changeHandler(event:Event):void
{
 var checkBox:CheckBox = event.currentTarget as CheckBox;
 if (checkBox.selected = true)
 {
  trace("check is selected");
  //add to visiblelayers
 }
 else
 {
  // remove from visiblelayers
 }
}      

[KomanDiabate]

Hi Mark,
Thanks for the reply, I have flex 4.6 at work trying to redo the initial code using flex 4.6, looks like the way you handle RadioButtonGroup is totally changed from flex 3 to flex 4. Need to convert this code to flex 4 first and then test your logic. I am bit stuck.
So, Flex 4 didn't like layerPanel.addChild(radioBtn)
Change to: layerPanel.addElement(radioBtn); only on button is loaded and all the text are overlapped.
Any help in that direction will be definitely appreciated.
[ATTACH=CONFIG]17098[/ATTACH]
Thanks.

[MarkHoyland]

Hi Koman,
You now need to set the panel's layout inside the panel.
(In the VerticalLayout tag you can set any padding ang gap etc.)

<s:Panel>
 <s:layout>
  <s:VerticalLayout paddingTop="10" gap="2"/>
 </s:layout>
 
</s:Panel>

[KomanDiabate]

Hi Mark,
The panel worked wonderfully, the radio button are loaded correctly but when clicked the layers don't turn on/off. I am still migrating from 3 to 4, I am a bit still struggling with this.
Here is the question: With Flex 3 the radioButton is loaded directly in the panel and with Flex 4 the <s:RadioButtonGroup> it set in <fx:Declaration> and the< Radiobutton> item are loaded in the panel. I think because of this when I clicked the radioBtnGroup_itemClickHandler is not being fired. Do I need additional steps to make this work. I am little bit perplexed by this. Thank you so much.

<fx:Declarations>
  <s:RadioButtonGroup id="radioBtnGroup" itemClick="radioBtnGroup_itemClickHandler(event)" />  
  
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <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">
  <fx:Array>
   <fx:String>Specialty/ESRI_StateCityHighway_USA</fx:String>
   <fx:String>Specialty/ESRI_StatesCitiesRivers_USA</fx:String>
   <fx:String>Demographics/ESRI_Census_USA</fx:String>
  </fx:Array>
 </mx:ComboBox>
 <s:Panel id="layerPanel" y="250" width="300" height="250" horizontalCenter="0" >
  <s:layout>
   <s:VerticalLayout paddingTop="10" gap="2"/>
  </s:layout>    
  <s:RadioButton label="Button 1" groupName="radioBtnGroup"/>
  <s:RadioButton label="Button 2" groupName="radioBtnGroup"/>
 </s:Panel>

[MarkHoyland]

Hi Koman,

If you look at the adobe help for 4.6 radiobutton, the sample shows it uses the 'group'  property instead of the 'groupName'

http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7d8b.html#WS2db454920e96...

Yours should be

<s:RadioButton label="Button 1" group="{radioBtnGroup}"/>

Anyhow here is the original code ported to spark

<?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" minWidth="955" minHeight="600" xmlns:esri="http://www.esri.com/2008/ags">
 
 <s:layout>
  <s:VerticalLayout/>
 </s:layout>
 <fx:Script>
  <![CDATA[
   import com.esri.ags.events.LayerEvent;
   
   import mx.collections.ArrayCollection;
   import mx.events.ItemClickEvent;
   
   import spark.components.RadioButton;
   
   protected function loadLayerName(event:LayerEvent):void
   {
    layerPanel.removeAllElements()
    
    //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.group = radioBtnGroup;
     radioBtn.value = i;
     radioBtn.label = dynamicLayer.layerInfos.name;
     layerPanel.addElement(radioBtn);
    }
    
    //set the visible layer the first radio button
    radioBtnGroup.selectedValue = 0;
    dynamicLayer.visibleLayers = new ArrayCollection([0]);
   }
   
   protected function radioClickHandler(event:ItemClickEvent):void
   {
    // update the visible layers to only show the layer selected
    dynamicLayer.visibleLayers = new ArrayCollection([event.index]);
   }
   
  ]]>
 </fx:Script>
  

 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
  <s:RadioButtonGroup id="radioBtnGroup" itemClick="radioClickHandler(event)"/>

 </fx:Declarations>
 
 <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(event)"
    url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/{myURL.selectedItem}/MapServer" />
  
 </esri:Map>
 
 <s:ComboBox id="myURL" selectedIndex="0" horizontalCenter="0" width="300">
  <s:dataProvider>
   <s:ArrayList>
    <fx:String>Specialty/ESRI_StateCityHighway_USA</fx:String>
    <fx:String>Specialty/ESRI_StatesCitiesRivers_USA</fx:String>
    <fx:String>Demographics/ESRI_Census_USA</fx:String>
   </s:ArrayList>
  </s:dataProvider>
 </s:ComboBox>
 <s:Panel id="layerPanel" width="300" height="250" x="20" y="250">
  <s:layout>
   <s:VerticalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"/>
  </s:layout>
 </s:Panel>
</s:Application>

[KomanDiabate]

Hi Mark,
Thank you so much for the code, it helps me understand what I was doing wrong. This is a simple/clean way to do layer on/off, I will definetely put it to good use. Thanks again.

[KomanDiabate]

Hi Mark,
I am now trying to use the same example with checkboxes. I was assuming it should be fairly simple, but I admit, I'm wrong.
So, I am able to load the layers in checkboxes, however, I am not able to have to code work in such way that: when I clicked on the checkbox the layer come on or off. Using dynamicLayer.visibleLayers = new ArrayCollection([5]); layer #6 get turned on but doesnt turned off. I have tried several different thing with no satisfactory result. Any help will be appreciated.

Thanks.

[ATTACH=CONFIG]17233[/ATTACH]