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

TOC Solution for 1,000+ layers?

dougbrowning

Just seeing if anyone has ideas on a cool TOC that would work with with 1,000+ layers. There would be several categories and subcategories. Maybe a See More feature.

I thought I would find a whole bunch of cool Flex options out there but so far have found nothing. I am open to any style, does not have to be a simple carrot dropdown tree thing (whatever you call it). Something precoded I am not going to have to build all from scratch.

I know having a TOC that big is not usually recommended but this is going to be a huge central repository so it needs to be that way.

Any ideas or links to websites that have samples are very appreciated.

For an example of "different" I mean things like http://www.visualcomplexity.com/vc/

Thanks a lot.

Find more posts tagged with

Accepted answers

All comments

dougbrowning

Ok here you are. It works by using toc.excludelayers. At the beginning all layers are in the exclude. Then when a user wants to add a layer I actually remove it from the exclude list I have. To remove from the TOC I add it back to the list of excluded layers. The Visibility check boxes in both TOCs do stay synced, order is also synced when using the base code (my application gets around this but be careful if you do not want this) .

First I made a copy of MapSwitcherWidget and called it MapSwitcherWidget2. I then had to change a few other files to allow the drag and drop mostly. Overall very few changes to the original code.

There is still test code in here commented out. If I missed anything or questions just let me know.

------------------------------
Drag and Drop Code (and other code parts are seen here also)
in MapSwitcherWidget2.mxml

   private function dragDropHandler(event:DragEvent):void
   {
    /*Alert.show(event.dragSource.dataForFormat('text') as String);*/
    if (templist.getItemIndex(event.dragSource.dataForFormat('text')) != -1)
    {
     templist.removeItemAt(templist.getItemIndex(event.dragSource.dataForFormat('text')));
    }
   }

   private function dragEnterHandler(event:Event):void
   {
    var dropTarget:Button=Button(event.currentTarget);
    // Accept the drop.
    DragManager.acceptDragDrop(dropTarget);

   }

   /* drop on the toc button itself because of the autohide - i later took out the autohide and then moved this to the border container*/

   <s:HGroup id="mapLayersContainer" gap="9">
        <s:Button id="opLayersButton"
                  height="100%"
                  label="{opLayerListButtonLabel}"
                  rollOut="startHideTimer()"
                  rollOver="opLayerListButton_rollOverHandler(event)"
                  visible="false"
      dragEnter="dragEnterHandler(event)"
      dragDrop="dragDropHandler(event)"/>

in TocItemRenderer.as

protected function onCheckBoxMouseMove(event:MouseEvent):void
{
// Get the drag initiator component from the event object.
var dragInitiator:CheckBoxIndeterminate=CheckBoxIndeterminate(event.currentTarget);

// Get the color of the drag initiator component.

// Create a DragSource object.
var ds:DragSource = new DragSource();

ds.addData(event.currentTarget.owner.data.label, 'text');

// Call the DragManager doDrag() method to start the drag.
DragManager.doDrag(dragInitiator, ds, event);
}

** just added one line here for a mouse move listener

override protected function createChildren():void
    {
        super.createChildren();

        // Create a checkbox child component for toggling layer visibility.
        if (!_checkbox)
        {
            _checkbox = new CheckBoxIndeterminate();
            _checkbox.addEventListener(MouseEvent.CLICK, onCheckBoxClick);
            _checkbox.addEventListener(MouseEvent.DOUBLE_CLICK, onCheckBoxDoubleClick);
            _checkbox.addEventListener(MouseEvent.MOUSE_DOWN, onCheckBoxMouseDown);
            _checkbox.addEventListener(MouseEvent.MOUSE_UP, onCheckBoxMouseUp);
   _checkbox.addEventListener(MouseEvent.MOUSE_MOVE, onCheckBoxMouseMove);
            addChild(_checkbox);
        }

        if (!_layerMenuImage)
        {
            _layerMenuImage = new Image();
            _layerMenuImage.source = contextCls;
            _layerMenuImage.height = 11;
            _layerMenuImage.width = 11;
            _layerMenuImage.setStyle("verticalAlign", "middle");
            _layerMenuImage.buttonMode = true;
            addChild(_layerMenuImage);
            this._layerMenuImage.addEventListener(MouseEvent.CLICK, onLayerMenuImageClick);
            this._layerMenuImage.addEventListener(MouseEvent.DOUBLE_CLICK, onLayerMenuImageDoubleClick);
        }
    }

Changed this so it used the text instead of the checkbox for the drag. The drop handler is where it ignores draggin the checkbox or down arrow (these can be dragged but then you have to change the code to get the name of the layer).

protected function onTOCItemMouseMove(event:MouseEvent):void
{
// Get the drag initiator component from the event object.
var dragInitiator:TocItemRenderer=TocItemRenderer(event.currentTarget);

// Get the color of the drag initiator component.

if ('text' in event.target)
{
   // Create a DragSource object.
   var ds:DragSource = new DragSource();

   ds.addData(event.target.text, 'text');

   // Call the DragManager doDrag() method to start the drag.
   DragManager.doDrag(dragInitiator, ds, event);
}
}

     public function TocItemRenderer()
    {
        super();

        addEventListener(MouseEvent.CLICK, itemClickHandler);
addEventListener(MouseEvent.MOUSE_MOVE, onTOCItemMouseMove);
    }

---------------------
Remove Layer Code

Added in MapSwitcherWidget

/* Added by me */

In the initTOC function
    /* Added for remove button */
    AppEvent.addListener("removefromtoc", removeFromWorkingTOC);

/* Added by me */
private function removeFromWorkingTOC(event:AppEvent):void
{

   templist.addItem(event.data);



}

In TOCLayerMenu.mxml
(or anywhere you put the button)

   /* added by me */

   public function removeFromListLabel_clickHandler(event:MouseEvent):void
   {

    AppEvent.dispatch("removefromtoc", _layer.id);
   }

--------------------
Save Layers TOC (same code is shown in Drag and Drop also

/* Added by me */
   public var myFileReference2:FileReference = new FileReference();

   protected function SaveTOC_clickHandler(event:MouseEvent):void
   {
    var myFileReference:FileReference = new FileReference();
    myFileReference.save(templist, "filename.txt");
   }
   /* Added by me */
   protected function LoadTOC_clickHandler(event:MouseEvent):void
   {

    myFileReference2.browse([new FileFilter("TXT File", "*.txt")]);
    myFileReference2.addEventListener(Event.SELECT, onFileSelected);

   }
   /* Added by me */
   protected function onFileSelected(e:Event):void {
    myFileReference2.addEventListener(Event.COMPLETE, onFileLoaded);
    myFileReference2.load();
   }
   /* Added by me */
   protected function onFileLoaded(e:Event):void {

    var tempArrayC:ArrayCollection = new ArrayCollection(myFileReference2.data.toString().split(','));
    templist = tempArrayC;
    toc2.excludeLayers = templist;
   }

   private function mapLayerAddHandler2(event:Event):void
   {
    /*Alert.show(templist.getItemIndex(event.currentTarget.id)as String);*/
    /*Alert.show(templist[0]);*/

    if (templist.getItemIndex(event.currentTarget.id) != -1)
    {
     templist.removeItemAt(templist.getItemIndex(event.currentTarget.id));
    }
    /*event.currentTarget.id*/
    /*toc2.excludeLayers = templist;*/

    /*toc2.map = map; /*
    toc2.isMapServiceOnly = false; //gotta get this from the config file
    toc2.excludeLayers = getExcludeLayers();
    toc2.basemapLayers = getBasemapLayers();
    toc2.excludeGraphicsLayers = true;
    if (expandLayerItems)
    {
     toc2.expandLayerItems();
    } */
   }


<s:VGroup top="100">
   <s:Label id="SaveTOC"
      text="Save TOC to File.."
      click="SaveTOC_clickHandler(event)"/>
   <s:Label id="LoadTOC"
      text="Load TOC from File.."
      click="LoadTOC_clickHandler(event)"/>
</s:VGroup>

-------------------------

GISDev1

I have now finished adding

Auto Add to Working Set TOC on Visible Checkbox Check in other TOC
Ability to add to the Working Set TOC by drag and drop from other TOC
A button to remove a layer from the Working Set TOC
A Save Current Working Set TOC feature that saves the current state to a local txt file
A Load a Saved Working Set TOC feature that loads a saved TOC state from a local txt file

I will give the code changes required if anyone wants them. It has not been cleaned up at all.

Thanks for all the help.

That's pretty cool man. Could you share that?

dougbrowning

I have now finished adding

Auto Add to Working Set TOC on Visible Checkbox Check in other TOC
Ability to add to the Working Set TOC by drag and drop from other TOC
A button to remove a layer from the Working Set TOC
A Save Current Working Set TOC feature that saves the current state to a local txt file
A Load a Saved Working Set TOC feature that loads a saved TOC state from a local txt file

I will give the code changes required if anyone wants them. It has not been cleaned up at all.

Thanks for all the help.

dougbrowning

Thanks Anthony. Not exactly sure what you mean though.

I have been trying to code the ability to drag a layer from the main large TOC to the Working Set TOC but have not been able to figure it out. It never lets me drag anything. I do not see in your code how that works. I see the part of the map accepting the drag but nothing that allows the drag. It is just beyond me as a newbie I guess.

I have it working where a user checks the visible box in the main TOC and it shows up in working set. I am now looking into a way to remove a layer from the Working Set TOC (through an icon or menu item I guess).

I also am going to try and find a way to save the list of layers out to a users computer and then be able to add the list back in (saving the session state of the Working TOC basically).

Thanks

AntGiles

Doug,

Have you thought about amending the drag and drop map services widget:

http://www.arcgis.com/home/item.html?id=ca9e4de998714d07a6bdc59ededa0efc

This way users can just select the layers they want to use

Just a thought,

Regards

Anthony

ZahidChaudhry

Just Curious, Why dont you add search/filter option...where users can see some category and then use filter or some sorta search mechanism to view only what they need...I dont see a point even displaying 100+ layers, ...I mean really who have time to....

Just a thought

dougbrowning

I am at a large govt agency so all the servers are handled by an outside contractor and I do not get to have much insight into this. It sounds like they are trying just one large machine but as a former server room guy I have my doubts, lets just say that.

I did end up creating a "Working Set TOC". It automatically adds any layer that is made visable during the session. I might also add a Add To option in the main large TOC. The dragging is a cool idea but probably beyond my capabilities as a new Flex guy (I might look into it as a challenge).

If you want to see how I got this Working Set TOC to work I posted the code as part of this post - http://forums.arcgis.com/threads/72877-Why-is-Legend-Widget-still-updating?p=255217#post255217

We do have plans for a search function, the autocomplete would be cool, I will have to look into it. We want to add the saving of session info but the policy people will not let us.

Thanks for the ideas.

GISDev1

I would interested in hearing your hardware and software configuration/infrastructure that supports such capacity and throughput.

My recommendation is to go Windows 7 style, and let the user search for layer names and use autocomplete, then let them drag the layers they want into a different widget window which could be their temporary TOC for that session, or store their layer choices in a client-side cookie to save throughout sessions.

dougbrowning

Thanks Brian. This is actually exactly what we have now. But it is still getting really long with the 300 or layers in there so far. We are looking into a "See More" button to limit the number of layers displayed in each subcategory. Only bummer there is that we will then have to add each layer one by one to the list instead adding the whole map at once.

I looked at UI options all day Friday but did not see anything I wanted. Maybe using carousels or as someone drills down the current structure appears at the top. But nothing seems to be a good fit so far.

The idea I have now is to leave the TOC like yours and then create a "Working Layers" widget. This would be a TOC for just the current session. That way people do not have to go hunting back through the huge list just to toggle layers. Whenever a layer is turned on in the big list it automatically gets added to the Working Set. A user could also click Add to Working Set in the TOC without turning it on. Anyone done anything like this?

Thanks

BrianSodano

Our company, 4am Inc, has developed a Table of Contents widget that will allow you to organize and present large numbers of layers. What makes this manageable is an intuitive grouping mechanism.

Layers are grouped in multiple ways:
1st Group - Accordian style: open an accordian and the main widget window is dedicated to that group of layers.

2nd Group - Within accordians: layers can be grouped into folders.

This widget also properly handles 3 state checkboxes for visibility. If some, but not all, child layers are visible within a layer group or service, that service will display a 3rd state (semi-checked). This is a critical feature when dealing with many layers.

It is compatible with the Flex 2.x API and will also display a legend for any selected layer.
[ATTACH=CONFIG]19659[/ATTACH][ATTACH=CONFIG]19660[/ATTACH]

Screen Shot 2012-12-02 at 4.03.08 PM.png

Screen Shot 2012-12-02 at 4.01.52 PM.png

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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