Table of Contents(TOC) Widget for ArcGIS JavaScript API: Examples

Class References | Live Example

About

This library is a Table of Contents/Legend widget for ArcGIS Server JavaScript API.

The widget provides a tree-like structure for layer list and legend combination. If the layer has a Simple Renderer, the legend icon is placed in front of layer name, instead of nested below. It uses checkboxes in addition to +- button to toggle nested legends. When turning on a layer, legend is expanded automatically, and vise versa.

More features:

The library has a default css style sheet, but the following CSS class can be overriden for additional style needs:


                    .agsjsTOCNode,
                    .agsjsTOCContent,
                    .agsjsTOCOutOfScale,
                    .agsjsTOCRootLayer,
                    .agsjsTOCRootLayerLabel,
                    .agsjsTOCGroupLayer,
                    .agsjsTOCGroupLayerLabel,
                    .agsjsTOCLayer,
                    .agsjsTOCLayerLabel,
                    .agsjsTOCLegendLabel
                

Include Scripts

The widget uses agsjs as namespace. Put the downloaded agsjs folder under your application. underneath the agsjs folder, should have file named TOC.js and a sub folder css with file TOC.css. as in In your HTML page, inside the section to define djConfig: (make sure the path to folder agsjs is correct)

             var djConfig = {
              parseOnLoad: true,
              packages: [{
                "name": "agsjs",
                "location": location.pathname.replace(/\/[^/]+$/, "")+'/path/to/agsjs'
                //"location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.01/xbuild/agsjs' // for xdomain load
              }]
            };
            };

Then in the require section:

             ...
            dojo.require("esri.map");
            ...
            dojo.require("dojo.fx");// needed since jsapi3.0
            dojo.require("agsjs.dijit.TOC");
              

Add a TOC widget

After the script is loaded, in the initilization code,

           dojo.connect(map, 'onLayersAddResult', function(results) {
                var toc = new agsjs.dijit.TOC({
                  map: map
                }, 'tocDiv');
                toc.startup();
            ..
            }
        

Add a Transparancy Slider

To add a slider for each service layer for adjusting transparancy. Set 'slider:true' in the correct entry in the layerInfos property of constructor:

               var toc = new agsjs.dijit.TOC({
                  map: map,
                  layerInfos: [{
                    layer: operational,
                    title: "Operational Layers",
                    slider: true
                  },...]
                }, 'tocDiv');
            ..
            }
        

TOC without Legend

In some cases, such as base map, you may not want legend or layer list. Set noLegend:truein the correct entry in the layerInfos property of constructor:

               var toc = new agsjs.dijit.TOC({
                  map: map,
                  layerInfos: [{
                    layer: operational,
                    title: "Operational Layers"
                  },{
                    layer: basemap,
                    title:'Base Map',
                    noLegend: true
                  }]
                }, 'tocDiv');
            ..
            }
        

Hide Layers that are out of scale

One TOC type is to hide layer entry when they are out of scale. Simple add display:none to the .agsTOCOutOfScale.

            #scaleDiv .agsjsTOCOutOfScale {
              display:none; 
            }
            
        

That's it! View example .