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

Live Example


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:


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, link css file agsjs.css under agsjs/css in header section of HTML file:

 <link rel="stylesheet" type="text/css" href="../src/agsjs/css/agsjs.css" />

Then inside the section to define djConfig: (make sure the path to folder agsjs is correct)

             var dojoConfig = { 
                    paths: {
                      //if you want to host on your own server, download and put in folders then use path like: 
                            agsjs: location.pathname.replace(/\/[^/]+$/, '') + '/../src/agsjs' 

Then in the require section:

			 "dojo/dom", "dojo/parser","dojo/on", "dojo/_base/Color",
			 "dojo/fx", "dojo/domReady!"], function(connect,  dom, parser, on,Color,
			 Map, Extent, FeatureLayer, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, 

Add a TOC widget

After the script is loaded, in the initilization code,

           map.on('layers-add-result', function(evt){
                // overwrite the default visibility of service.
                // TOC will honor the overwritten value.
                dynaLayer1.setVisibleLayers([2, 5, 8, 11]);
                //try {
                  toc = new TOC({
                    map: map,
                    layerInfos: [{
                      layer: featLayer1,
                      title: "FeatureLayer1"
                    }, {
                      layer: dynaLayer1,
                      title: "DynamicMapServiceLayer1"
                      //collapsed: false, // whether this root layer should be collapsed initially, default false.
                      //slider: false // whether to display a transparency slider.
                  }, '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 {


TOC widget fire the following events: load, toc-node-checked({rootLayer,serviceLayer,checked}).

           toc.on('load', function(){
                 if (console) 
                    console.log('TOC loaded');
		  toc.on('toc-node-checked', function(evt){
			  if (console) {
						console.log("TOCNodeChecked, rootLayer:"
						+", serviceLayer:"+(evt.serviceLayer?'NULL')
						+ " Checked:"+evt.checked);

That's it! View example .