topic Re: Using radio buttons in the legend in ArcGIS API for Flex Questions

Using radio buttons in the legend

TammyBearly — Fri, 04 Mar 2011 02:23:55 GMT

Is it possible to use radio buttons for several groups of layers in one map service but use check boxes in the others? We have a map service that has a winter and summer range, etc. for several big game species. In this map service I would like to have a radio button beside Elk, Deer, etc. Under this I would like a check box for winter range and summer range. For other map services, I would like the default behavior. Would I need to extend esri.legend? Is there any documentation on this?

I am using the FlexViewer and Flex 4.
Thanks,
Tammy

Re: Using radio buttons in the legend

TammyBearly — Fri, 18 Mar 2011 22:41:07 GMT

I found a work around. I made the check boxes behave like radio buttons, but have not found out how to change the look. I added the code between "// tlb..." and "// end tlb..." to the onCheckBoxClick function of src/com/esri/viewer/components/toc/tocClasses/TocItemRenderer.as.

private function onCheckBoxClick(event:MouseEvent):void
    {
        event.stopPropagation();

        if (data is TocItem)
        {
            var item:TocItem = TocItem(data);
            item.visible = _checkbox.selected;

   // tlb Make mapService groups act like radio buttons
   if ((item.visible == true) && item.parent && item.radioLayers && (item.radioLayers.indexOf(item.parent.label) != -1))
   {
    for (var i:Number=0; i<item.parent.children.length; i++)
    {
     var grps:TocItem = TocItem(item.parent.children);
     if (grps.label != item.label)
      grps.visible = false;
    }
   } // end tlb additions
        }
    }

Where item.radioLayers is an array of strings containing the group layer names (as displayed in TOC) that should act like radio buttons.

Re: Using radio buttons in the legend

SarahBell — Fri, 26 Aug 2011 01:00:33 GMT

Hey! I was able to change the appearance of the buttons to be radio buttons. At the end of this solution, I also have a question for you about your solution you added to the "if" statement.

How to make radio buttons in the TOC:

First I switched out any of the checkbox icons, skins, imports, and extensions in the "CheckBoxScaleDependantIcon.as" and the "CheckBoxScaleDependant.as" to RadioButton elements. This turned all the buttons into radio buttons.

So in "CheckBoxScaleDependantIcon.as" I deleted
    import mx.skins.halo.CheckBoxIcon;

and replaced it with
    import mx.skins.halo.RadioButtonIcon;

And in "CheckBoxScaleDependant.as" I replaced the Checkbox imported items with:

import mx.controls.RadioButton;
   import mx.skins.halo.RadioButtonIcon;

It's important that you remove any imports of checkbox items.

The radio buttons needed two clicks to appear "on", even though their data was rendered on the map. To fix this, I located the if (data is Tocitem() statement in the "TocItemRenderer.as" file. Here I deleted the I deleted the
_checkbox.selected = item.visible; property. Great! Now the radio buttons themselves are acting like radio buttons. But I have a huge problem.

The map layers that each radio button turns on will stay on even when I click another radio button. Perhaps it is my trouble with your code. What do you mean by "Where item.radioLayers is an array of strings containing the group layer names (as displayed in TOC) that should act like radio buttons," and how/where do I implement this line of code? When I use your code now it shows "radioLayers" and "item" as undefined properties, but I'm not sure where/how to implement these two things.

Any suggestions are greatly appreciated!

Re: Using radio buttons in the legend

SarahBell — Fri, 26 Aug 2011 02:25:51 GMT

In my reply I forgot to mention to change the following in "CheckBoxScaleDependant.as":

setStyle("icon", CheckBoxIcon); to

setStyle("icon", RadioButtonIcon);

Still haven't figured out how to implement your code, but I'm sure it is my error. Any help would be great!

Sarah

Re: Using radio buttons in the legend

SarahBell — Thu, 01 Sep 2011 15:11:44 GMT

Tammy, when you say

"Where item.radioLayers is an array of strings containing the group layer names (as displayed in TOC) that should act like radio buttons. "

where did you put that var? Right now, my layer names as strings would be held in the following var, but I don't know where you declared this variable?

var radioLayers:Array = ["Hospital Functionality: Day 1","Oil Facility: Damage > Moderate","Natural Gas Facility: Damage > Moderate",
   "Waste Water Facility","Electric Power Facility","Highway Bridge: Damage > Moderate","Level 3 Injuries - 2AM Event",
   "Level 3 Injuries - 2PM Event","Level 3 Injuries - 5PM Event","Level 4 Injuries - 2AM Event","Level 4 Injuries - 2PM Event",
   "Level 4 Injuries - 5PM Event","Green Tag Buildings","Yellow Tag Buildings","Red Tag Buildings","Debris - in 100,000 cubic feet",
   "Displaced Households","Shaking Intensity - MMI Value","Population Over 65","Population Density - People per square mile"];

Re: Using radio buttons in the legend

TammyBearly — Mon, 12 Sep 2011 15:25:04 GMT

I added the radioLayer names to the the xml file. Then I read it into the TOC in my ...Widget.mxml with the following line: toc.radioLayers = configXML.layerlist.radiolayers.toString().split(",");

I added code to Toc.as:
public class TOC extends Tree
{...
   private var _radioLayers:Array; // tlb
   //--------------------------------------------------------------------------
// Property:   radioLayers     tlb added these functions 3-8-11
// Stores mapservice names whose groups should function like radio buttons
//--------------------------------------------------------------------------
public function get radioLayers():Array
{
return _radioLayers;
}

/**
* @private
*/
public function set radioLayers(value:Array):void
{
_radioLayers = value;
}
...
In function registerMapLayer:
var tocItem:TocMapLayerItem = new TocMapLayerItem(layer, _labelFunction, _isMapServiceOnly, _radioLayers); // tlb added _radioLayer

I also added some code to TocItem.as:

//--------------------------------------------------------------------------
// Property: radioLayers - tlb
//--------------------------------------------------------------------------
private var _radioLayers:Array;

/**
* The radio button layers. Set by radiolayers in MapSwitcherWidget.xml
*/
public function get radioLayers():Array
{
return _radioLayers;
}
public function set radioLayers(value:Array):void
{
_radioLayers = value;
}

Modified function in TocItemRender.as:
/**
     * Updates the visible property of the underlying TOC item.
     */
    private function onCheckBoxClick(event:MouseEvent):void
    {
        event.stopPropagation();

        if (data is TocItem)
        {
            var item:TocItem = TocItem(data);
            item.visible = _checkbox.selected;

   // tlb Make mapService (found in _radioLayers) groups act like radio buttons
   if ((item.visible == true) && item.parent && item.radioLayers && (item.radioLayers.indexOf(item.parent.label) != -1))
   {
    for (var i:Number=0; i<item.parent.children.length; i++)
    {
     var grps:TocItem = TocItem(item.parent.children);
     if (grps.label != item.label)
      grps.visible = false;
    }
   } // end tlb additions
        }
    }

In TocLayerInfoItem.as:
public class TocLayerInfoItem extends TocItem
{
        //--------------------------------------------------------------------------
// Property: radioLayers - tlb
//--------------------------------------------------------------------------

private var _radioLayers:Array;

/**
* The map layer info that backs this TOC item.
*/
override public function get radioLayers():Array
{
return _radioLayers;
}

     // tlb pass radioLayers
    public function TocLayerInfoItem(parentItem:TocItem, layerInfo:LayerInfo, visibleLayers:Array, radioLayers:Array)
    {
_radioLayers = radioLayers; // tlb
...

In TocMapLayerItem.as:
public class TocMapLayerItem extends TocItem
{
    private var _radioLayers:Array; // tlb
...
    // tlb added radioLayers parameter for radio button function
    public function TocMapLayerItem(layer:Layer, labelFunction:Function = null, isMapServiceOnly:Boolean = false, radioLayers:Array = null)
    {
        super();
_radioLayers = radioLayers; // tlb

...
in function createChildren:
addChild(createTocLayer(this, layerInfo, layerInfos, visibleLayers, _radioLayers)); // tlb added radioLayers

Hope this helps,
Tammy

Tammy, when you say

"Where item.radioLayers is an array of strings containing the group layer names (as displayed in TOC) that should act like radio buttons. "

where did you put that var? Right now, my layer names as strings would be held in the following var, but I don't know where you declared this variable?

var radioLayers:Array = ["Hospital Functionality: Day 1","Oil Facility: Damage > Moderate","Natural Gas Facility: Damage > Moderate",
   "Waste Water Facility","Electric Power Facility","Highway Bridge: Damage > Moderate","Level 3 Injuries - 2AM Event",
   "Level 3 Injuries - 2PM Event","Level 3 Injuries - 5PM Event","Level 4 Injuries - 2AM Event","Level 4 Injuries - 2PM Event",
   "Level 4 Injuries - 5PM Event","Green Tag Buildings","Yellow Tag Buildings","Red Tag Buildings","Debris - in 100,000 cubic feet",
   "Displaced Households","Shaking Intensity - MMI Value","Population Over 65","Population Density - People per square mile"];