Table of Content - MapService Binding - displaying MapService individually in the TOC

Question

Hello,
This is my first post on this forum, I'm Matt and I need some help.

I work with arcserver 9.3 - Flash Builder4 - ArcGIS API for flex 1.3 (yes, the prehistorical version). My level in developping RIA and flexviewer is: rookie.

I try to modify the Table of Content I found on the ESRI code Gallery.

My goal is to create a range of buttons in my application. Each button represent a mapservice. When the user click on a button, the TOC appears and display only the layers for the selected mapservice (through the button). I've attached a picture that is worth a thousand words.

At this step of time, my TOC slides by clicking on the button (no difficulty with that).

Problem (or should I say "opportunity"):
I don't know how to relate the mapservices with the buttons and then, how to make the TOC retrieving only the selected mapService. I imagine I need to make the "getLayer" function (MapUtil?) retrieving the MapService name from my buttons.

I read the multiple menuMap thread but I don't know if it can help in my situation.

Any help would be great.

TOCModify.jpg

PaulinaKarkauskaite_0-1752048979720.png

SchoppMatthieu · Answer

Hello,

Thanks Robert for your help. It works now perfectly now. I've followed your method:

I've create a function that loop into the map to get the layer names and store them in an array, then function "toc.excludeLayers" exclude them all from the TOC.

private function getLayers():Array{
    var counter:int ;
    var thisLayer:Layer;
    var layerArray:Array = new Array();
    layerArray = _map.layerIds;
    
    toc.excludeLayers=layerArray; 
    
    for( counter=1;counter<=layerArray.length;counter++)
    {
     var layerName:String = layerArray[counter];
    }
    return layerArray;
   }

Then I've created one button for each "layer" (map-service) which contains the layer label (the buttons are in a (ButtonBar). By clicking on the buttons, the label is sent into this function :

public function ClickHandler(event:ItemClickEvent):void{

toc.includeLayers = (event.label);
   toc.hideTopLevelItems = true; 
   tocPanel.title = (event.label); }

The first action include the layer (in the TOC)
The second hide the top level (the tree root) and drop the sublevel down at the same time !!
Finaly, the last one past the selected name in the Panel Title...

Done !

The only thing I'm not quite sure about is that I needed to "connect" the map with my application to be able to use some methods in the loop function ("_map.layerIds"). I've made it working by coping some piece of code I found on the forum and on the TOC.As but I don't quite understand:

private var _map:Map;
   private var _mapChanged:Boolean = false;  
   
   private function Init():void {
   SiteContainer.addEventListener(AppEvent.MAP_LOADED, initMap);
   }
   
   private function initMap(event:AppEvent):void {
   _map = event.data as Map;    
   }

It works perfectly, but now I've got a new question, I'll write a new thread...

Cheers,

RobertScheitlin__GISP · Answer

Matt,

This is the code snippet for expanding the toctoc.openItems = toc.dataProvider.source;
                    for each(var item:TocMapLayerItem in toc.openItems) {
                        if (item.isTopLevel())
                            //toc.expandChildrenOf(item, true);
                            toc.expandItem(item,true,true,true,null);
                    }

My suggestion is for you to loop through the maps layers when the button is clicked and add all the layers to the exclude array except for the one that matches the button label. You don't have to put any code in the toc.as directly all you need is the id of the toc component and you can change the excludeLayers.

Also you can set the excludeLayers to equal an array of mapservice ids A list of layer objects and/or layer IDs to exclude from the TOC.

As far as removing the parent branch of the leaf in the tree you will have to do alot of rewriting of the toc's logic to do this (sorry no suggestions from me).

SchoppMatthieu · Answer

Hello Robert, Thank you for your unvaluable contribution in helping the flex sample viewer users. I looked at "excludeLayers" function in the TOC and I've got a result. This is what I've done : by clicking on a button my actual code records the layer's label : private function layerLabel(layerName:String):void{ toc.MyLayerNameBinding(layerName);} Then in the TOC.as, I exclude all my layers : public function MyLayerNameBinding( layername:String ):void{ excludeLayers = ["Layer1"]; excludeLayers = ["Layer2"]; //and then I turn on the one selected : includeLayers = [layername];} It works but it doesn't sound really smart (does it ?). I've got two and a half questions : 1/ By default all the layers are "included" in the TOC, that's why I need to exclude all of them. Is it possible to change it to make all the layers "excluded" by defaut, so I just need to "include" the one I want ? 2/ The most important : Now the users can select the layer that will be displayed in the TOC by clicking a button. So in the table of content I no longer need the top level of the content's tree hierarchy which is the "layer" (the mapservice name). How can I hide the top level (the layer or "map service name") of the hierarchy tree (or put it at the Panel-name level)? And how can I make its content appearing already dropped down in the TOC ? Again, I've attached a little picture to explain. Thank you for any help ! Step2.jpg