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

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:

• scale threshold: It respects the scale threshold of layers, if a layer is out of scale, it will be displayed differently and check box will be disabled. or you can hide it completely by add css class agsjsTOCOutOfScale and set {display: none}
• transparency slider: It can optionally have a slider for each map service, to adjust transparency.
• default expansion: If a layer is visible, it's legend will be expanded by default, otherwise collapsed.

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,
                    .agsjsTOCServiceLayer,
                    .agsjsTOCServiceLayerLabel,
                    .agsjsTOCLegendLabel
                    .agsjsTOCIcon
                

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:

             require(["dojo/_base/connect",
			 "dojo/dom", "dojo/parser","dojo/on", "dojo/_base/Color",
			 "esri/map",
			 "esri/geometry/Extent", 
			 "esri/layers/FeatureLayer",
			 "esri/layers/ArcGISTiledMapServiceLayer", 
			 "esri/layers/ArcGISDynamicMapServiceLayer",
			 "esri/symbols/SimpleFillSymbol",
			 "esri/renderers/ClassBreaksRenderer",
			 "agsjs/dijit/TOC", 
			 "dijit/layout/BorderContainer", 
			 "dijit/layout/ContentPane", 
			 "dojo/fx", "dojo/domReady!"], function(connect,  dom, parser, on,Color,
			 Map, Extent, FeatureLayer, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, 
			 SimpleFillSymbol,ClassBreaksRenderer,
			 TOC){
          
              

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');
                  toc.startup();
            ..
            }
        

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

Events

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:"
						+(evt.rootLayer?evt.rootLayer.id:'NULL')
						+", serviceLayer:"+(evt.serviceLayer?evt.serviceLayer.id:'NULL')
						+ " Checked:"+evt.checked);
				}
		 });