Select to view content in your preferred language

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

3201
13
Jump to solution
03-12-2012 05:43 AM
by Anonymous User
Not applicable
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!!!
0 Kudos
1 Solution

Accepted Solutions
by Anonymous User
Not applicable
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:

View solution in original post

0 Kudos
13 Replies
by Anonymous User
Not applicable
Original User: rscheitlin

Ionara,

   I can give some advice on where you should look.


  1. Maybe exclude the county layer from the toc then.

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

  3. You need to set the Legends layers array: http://help.arcgis.com/en/webapi/flex/apiref/com/esri/ags/components/Legend.html

  4. 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.
0 Kudos
ionarawilson1
Deactivated User
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!
0 Kudos
by Anonymous User
Not applicable
Original User: ionara_wilson

Also, for number 2, where do I attach the event listeners for each layer?
0 Kudos
by Anonymous User
Not applicable
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.
0 Kudos
ionarawilson1
Deactivated User
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" ?
0 Kudos
by Anonymous User
Not applicable
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.
0 Kudos
ionarawilson1
Deactivated User
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>
0 Kudos
by Anonymous User
Not applicable
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:
0 Kudos
ionarawilson1
Deactivated User
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"
    
    
     />
0 Kudos