topic Re: Radio Button on/off Layers in ArcGIS API for Flex Questions

Radio Button on/off Layers

MattWilliams — Wed, 07 Apr 2010 19:45:51 GMT

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>

Try this

MarkHoyland — Sat, 11 Dec 2021 22:55:24 GMT

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>

Radio Button on/off Layers

MattWilliams — Thu, 08 Apr 2010 00:56:22 GMT

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.

Radio Button on/off Layers

MarkHoyland — Thu, 08 Apr 2010 01:13:02 GMT

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.

Radio Button on/off Layers

MattWilliams — Thu, 08 Apr 2010 01:56:54 GMT

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.

Radio Button on/off Layers

MattWilliams — Thu, 08 Apr 2010 13:42:18 GMT

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.

Re: Try this

MGSethe — Sat, 11 Dec 2021 22:55:27 GMT

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

Re: Radio Button on/off Layers

RobertScheitlin__GISP — Sat, 29 May 2010 20:25:24 GMT

Golden,

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

Re: Radio Button on/off Layers

RadmilPopovic — Thu, 14 Oct 2010 12:07:37 GMT

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?

Re: Radio Button on/off Layers

DennisAkins — Mon, 13 Jun 2011 20:30:05 GMT

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

Re: Radio Button on/off Layers

BenKane — Fri, 01 Jul 2011 22:17:22 GMT

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

Re: Radio Button on/off Layers

KomanDiabate — Sat, 11 Dec 2021 22:55:29 GMT

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); 
     
    }
   }

Re: Radio Button on/off Layers

MarkHoyland — Sat, 11 Dec 2021 22:55:32 GMT

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
 }
}

Re: Radio Button on/off Layers

KomanDiabate — Mon, 20 Aug 2012 15:53:02 GMT

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.

Re: Radio Button on/off Layers

MarkHoyland — Sat, 11 Dec 2021 22:55:35 GMT

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>

Re: Radio Button on/off Layers

KomanDiabate — Sat, 11 Dec 2021 22:55:38 GMT

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>

Re: Radio Button on/off Layers

MarkHoyland — Sat, 11 Dec 2021 22:55:40 GMT

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#WS2db454920e96a9e51e63e3d11c0bf69084-7d8a

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>

Re: Radio Button on/off Layers

KomanDiabate — Thu, 23 Aug 2012 15:08:58 GMT

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.

Re: Radio Button on/off Layers

KomanDiabate — Fri, 24 Aug 2012 22:51:29 GMT

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]