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

Robert Scheitlin or anybody else, please help!!! TOC Table of Contents and Legend!

Anonymous User

Original User: ionara_wilson

Hi Robert /ESRI users

I really need to find help for this:

I need help with the TOC Table of Content ArcScript posted on the arcscript page by Tom Hill. I am developing a Flex app outside of the Flex Viewer. I need to have the Group TOC and the legends. I was already able to put together the website with the map, the group TOC and the legend using the esri Legend component. What I need help is with the following:

1 - Have one layer always visible (in my case the county layer)
2 - Have all the other layers off when another layer (other than the layer that is always visible, the counties layer) is checked on
3- Have the legend pop up for the layer that is checked on (right now I would have the legend visible for all the layers that are checked on, I just need to have one single for the one layer checked on)
4- There should be only one legend always. Whatever you see on the map you should see on the legend, just one legend for just one map checked on and visible

I am attaching the image of my web app, the mxml of my main app and the code I downloaded and used for the table of contents.

Thank you for any help in advance!!!

mymapwebapp.zip

ESRI_TOC.zip

unnamed.jpg

Screenshot 2026-01-22 at 1.02.00 PM.png

Finde mehr Beiträge mit dem Tag

Accepted answers

Anonymous User

Original User: rscheitlin

Ionara,

Here is a quick sample with the legend portion:

<?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"                 paddingBottom="8" paddingLeft="8"                 paddingRight="8" paddingTop="8"                  backgroundColor="0x999999">     <mx:Script>         <![CDATA[             import mx.collections.ArrayCollection;             import mx.controls.RadioButton;             import mx.events.FlexEvent;             import mx.events.ItemClickEvent;                          private function loadLayerName():void             {                 myLegend.layers = null;                 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]);                 myLegend.layers = [dynamicLayer];                 myLegend.visible = true;             }                          private function radioClickHandler(event:ItemClickEvent):void             {                 myLegend.layers = null;                 // update the visible layers to only show the layer selected                 dynamicLayer.visibleLayers = new ArrayCollection([event.index]);                 myLegend.layers = [dynamicLayer];             }                      ]]>     </mx:Script>          <mx:HDividedBox width="100%" height="100%" backgroundColor="0x999999">         <mx:Canvas height="100%" width="100%" backgroundColor="0xffffff">             <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" name="Legend"                                                    load="loadLayerName()"                                                    url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/{myURL.selectedItem.value}/MapServer" />             </esri:Map>         </mx:Canvas>         <mx:Canvas height="100%" width="300" backgroundColor="0xffffff"                    horizontalScrollPolicy="off"                    verticalScrollPolicy="off">             <mx:VBox width="300" height="100%" paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10"                      verticalGap="8">                 <mx:ComboBox id="myURL" selectedIndex="0" labelField="label" width="100%">                     <mx:ArrayCollection>                         <mx:Object label="US City State Highway" value="Specialty/ESRI_StateCityHighway_USA" />                         <mx:Object label="US City State Rivers" value="Specialty/ESRI_StatesCitiesRivers_USA" />                         <mx:Object label="US Demographics" value="Demographics/ESRI_Census_USA" />                     </mx:ArrayCollection>                 </mx:ComboBox>                 <mx:VBox id="layerPanel" width="100%" height="20%" verticalGap="3">                     <mx:RadioButtonGroup id="radioBtnGroup" itemClick="radioClickHandler(event)"/>                 </mx:VBox>                 <mx:Canvas id="legendPanel" width="100%" height="80%">                     <esri:Legend id="myLegend" layers="[]"                                  map="{myMap}" visible="false"                                  respectCurrentMapScale="false"/>                 </mx:Canvas>             </mx:VBox>         </mx:Canvas>     </mx:HDividedBox> </mx:Application>

You not marking the thread as answered or promoting responses that are helpful does not encourage people to continue to help you.

Don't forget to click the Mark as answer check and to click the top arrow (promote) as shown below:

All comments

Anonymous User

Original User: rscheitlin

Ionara,

I can give some advice on where you should look.

Maybe exclude the county layer from the toc then.
This is going to be difficult for a beginner. You will have to attach event listeners to each layer and when a layer is shown (FlexEvent.SHOW) then you would hide all other layers. You could start looking in the TocMapLayerItem.as but you will likely get in over your head real quick.
You need to set the Legends layers array: http://help.arcgis.com/en/webapi/flex/apiref/com/esri/ags/components/Legend.html
You do this by setting the layers array of the legend as mentioned above.

A little advice, you are unlikely to get responses to your post when you have a list of requirements and your post sounds like you want someone to do the work for you.

WilsonIonara

Thank you for the quick reply Robert. I understand about the way to post it. I can try to do the work, I just needed a little guidance as there are so many classes for this TOC to work that gets a little confusing for a beginner. Where do you think I should set the array for the legend? In one of the classes or inside my main app? Thank you!

Anonymous User

Original User: ionara_wilson

Also, for number 2, where do I attach the event listeners for each layer?

Anonymous User

Original User: rscheitlin

Ionara,

As I mentioned earlier you need to look in the TocMapLayerItem.as and you can use the onLayerShow function that is already attached to each layers FlexEvent.SHOW event. In there you can set the Legends layers property bu using:

import mx.core.FlexGlobals;
FlexGlobals.topLevelApplication.myLegend = [layer];

That is also where you can loop through your maps layers and hide all other layers. The big issue you are going to run into is the the TOC has never worked where it will update the checked (visible) status of a layer when it is pragmatically changed.

You have chosen a tough task for a beginner.

WilsonIonara

Thank you Robert. I am looking at the TocMapLayerItem.as first to understand the code and see if I can do the task. What do you mean by

"the TOC has never worked where it will update the checked (visible) status of a layer when it is pragmatically changed" ?

Anonymous User

Original User: rscheitlin

Ionara,

What I mean by that is if you do some code like this:

map.getLayer("LayerX").visible = false;

the TOC does not update the LayerX in the TOC to be unchecked.

WilsonIonara

Robert,

I am afraid I am not going to be able to do this by myself. I am looking at other options. I looked at this code below and was able to implement, but I dont like that the dropdownlist displays the name of the service instead of a nice label. Is there a solution for this? Also, do you have a suggestion about another code I could use to accomplish what I need, maybe a widget that could be decoupled from flex viewer? Thank you!

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

Anonymous User

Original User: rscheitlin

Ionara,

That is an easy fix.

<?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>
        <=!=[=C=D=A=T=A=[
            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.value}/MapServer" />
    </esri:Map>
    
    <mx:ComboBox id="myURL" selectedIndex="0" horizontalCenter="0" labelField="label">
        <mx:ArrayCollection>
            <mx:Object label="US City State Highway" value="Specialty/ESRI_StateCityHighway_USA" />
            <mx:Object label="US City State Rivers" value="Specialty/ESRI_StatesCitiesRivers_USA" />
            <mx:Object label="US Demographics" value="Demographics/ESRI_Census_USA" />
        </mx:ArrayCollection>
    </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>

Don't forget to click the Mark as answer check and to click the top arrow (promote) as shown below:

WilsonIonara

Thank you so much Robert! This is awesome! Exactly what I needed ! I have been trying this the whole afternoon! I got to the point of adding the object to the array but did not know about the value property I had to add! Also, I wanted to add a legend component like the one below and Flex gives me an error message saying it cannot resolve esri legend to a component application.
What would it be a solution for me to have a legend in this case? Thank you so much again! I appreciate your helping me!!!

<esri:Legend id="myLegend"

     layers="{[ dynamicLayer ]}"

     scaleY="0.9"
     respectCurrentMapScale="true"
     right="5" bottom="10"


     />

Anonymous User

Original User: rscheitlin

Ionara,

Here is a quick sample with the legend portion:

<?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"                 paddingBottom="8" paddingLeft="8"                 paddingRight="8" paddingTop="8"                  backgroundColor="0x999999">     <mx:Script>         <![CDATA[             import mx.collections.ArrayCollection;             import mx.controls.RadioButton;             import mx.events.FlexEvent;             import mx.events.ItemClickEvent;                          private function loadLayerName():void             {                 myLegend.layers = null;                 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]);                 myLegend.layers = [dynamicLayer];                 myLegend.visible = true;             }                          private function radioClickHandler(event:ItemClickEvent):void             {                 myLegend.layers = null;                 // update the visible layers to only show the layer selected                 dynamicLayer.visibleLayers = new ArrayCollection([event.index]);                 myLegend.layers = [dynamicLayer];             }                      ]]>     </mx:Script>          <mx:HDividedBox width="100%" height="100%" backgroundColor="0x999999">         <mx:Canvas height="100%" width="100%" backgroundColor="0xffffff">             <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" name="Legend"                                                    load="loadLayerName()"                                                    url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/{myURL.selectedItem.value}/MapServer" />             </esri:Map>         </mx:Canvas>         <mx:Canvas height="100%" width="300" backgroundColor="0xffffff"                    horizontalScrollPolicy="off"                    verticalScrollPolicy="off">             <mx:VBox width="300" height="100%" paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10"                      verticalGap="8">                 <mx:ComboBox id="myURL" selectedIndex="0" labelField="label" width="100%">                     <mx:ArrayCollection>                         <mx:Object label="US City State Highway" value="Specialty/ESRI_StateCityHighway_USA" />                         <mx:Object label="US City State Rivers" value="Specialty/ESRI_StatesCitiesRivers_USA" />                         <mx:Object label="US Demographics" value="Demographics/ESRI_Census_USA" />                     </mx:ArrayCollection>                 </mx:ComboBox>                 <mx:VBox id="layerPanel" width="100%" height="20%" verticalGap="3">                     <mx:RadioButtonGroup id="radioBtnGroup" itemClick="radioClickHandler(event)"/>                 </mx:VBox>                 <mx:Canvas id="legendPanel" width="100%" height="80%">                     <esri:Legend id="myLegend" layers="[]"                                  map="{myMap}" visible="false"                                  respectCurrentMapScale="false"/>                 </mx:Canvas>             </mx:VBox>         </mx:Canvas>     </mx:HDividedBox> </mx:Application>

WilsonIonara

Many thanks Robert. I will try the legend the way you posted and see if I get rid of the error messages! Sorry for not marking it as answered. I am new here so I am not sure about how things work yet. Please let me know if it is still showing as not answered! Thanks again!!!

WilsonIonara

Hi everybody

Just to help other users: When I first used Robert's code I kept getting the error "could not resolve esri legend to a component implementation" (When I use the 2.0 library on 3.6 sdk). When I used a newer library (I believe it is because the esri legend component is something created with the 2.2 library ) I got rid of that error message but then I got these errors: Type was not found or was not a compile-time constant: Group, Type was not found or was not a compile-time constant: solidColorstroke. I was using SDK 3.6 when I had these errors, but once I switched to the 4.0 SDK the problems disappeared!!! Thank you again Robert, this is awesome, I am so happy for your code!!!!

WilsonIonara

Does anybody have any idea why with this code when I first load the webpage (with links to my data, not ESRI data like the code here) sometimes the legend shows two layers instead of one?

Thank you!

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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