nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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>

Vind meer berichten getagd met

Accepted answers

All comments

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]

Capture2.PNG

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.

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

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,
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,
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.

img.PNG

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

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

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

DennisAkins

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

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?

RobertScheitlin__GISP

Golden,

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

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

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.

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.

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

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

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>

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.