AnsweredAssumed Answered

Modifiying TOC (nliu's TOC)

Question asked by Schlomm_1 on Sep 30, 2013
Latest reply on Oct 8, 2013 by geonetadmin
Today I've tried to modify the TOC provided by nliu ( ). The basic features are working, but I would like to add some parts.
I would like to start with simple feature like adding a scalebar and OverviewMap, which I've thought isn't too hard. Unfortunetely I'm not able to get it work :(
From my understanding I have to add the following (red marked):

<!DOCTYPE html>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="">
        <link rel="stylesheet" type="text/css" href="" />
        <link rel="stylesheet" type="text/css" href="" />
            html, body {
                height: 98%;
                width: 98%;
                margin: 0;
                padding: 5px;
                font-family: helvetica, arial, sans-serif;
                font-size: 90%;
            #leftPane {
                width: 280px;
                overflow: auto
            /* this line hide layers when out of scale for the inline TOC */
            .agsjsTOCOutOfScale {
                /*  display: none;*/
        <script type="text/javascript">
            var djConfig = {
                parseOnLoad: false,
                packages: [{
                    "name": "agsjs",
                    //if you want to host on your own server, download from
                    // and put in folders then use path like: 
                    //"location": location.pathname.replace(/\/[^/]+$/, '') + '/../src/agsjs' 
                    // use /src/ for debug and /build/ for production.
                    // you can also use online version using the following location, 
                    // however please noted is not a true CDN and is not fast and may not be available.
                    // also, it is recommended to use a particular version from /tags/agsjs/<version>/
                    // in a production app to avoid unexpected results.
                    //"location": ""
                    //"location": ""
                    //"location": ""
                    "location": ""
        <script src="">
        <script type="text/javascript">
            var map, toc, dynaLayer1, dynaLayer2, featLayer1;

            require(["dojo/_base/connect", "dojo/parser", "agsjs/dijit/TOC", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
"esri/map", "esri/dijit/Scalebar", "esri/dijit/OverviewMap", "esri/layers/FeatureLayer",
 "dojo/fx", "dojo/domReady!"], 
function(Scalebar, OverviewMap, connect, parser, TOC) {

                // call the parser to create the dijit layout dijits
                parser.parse(); // note djConfig.parseOnLoad = false;
                var initialExtent = new esri.geometry.Extent({
                    xmin: -9549126.170705408,
                    ymin: 4612089.574063576,
                    xmax: -9542304.165930964,
                    ymax: 4617851.015070564,
                        "spatialReference": {
                        "wkid": 102100
                map = new esri.Map("map", {
                    extent: initialExtent

//new scalebar
 var scalebar = new Scalebar({
 map: map,
 scalebarUnit: "dual"

 //new Overviewmap
 var overviewMapDijit = new OverviewMap({
 map: map,
 visible: true

                var basemap = new esri.layers.ArcGISTiledMapServiceLayer("");

                dynaLayer1 = new esri.layers.ArcGISDynamicMapServiceLayer("", {
                    opacity: 0.8

                featLayer1 = new esri.layers.FeatureLayer("", {
                    mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
                    outFields: ["POP07_SQMI"] //,
                featLayer1.setDefinitionExpression("STCOFIPS='21111'"); //Louisville, KY
                var h = dojo.connect(map, 'onLayersAddResult', function(results) {
                    // overwrite the default visibility of service.
                    // TOC will honor the overwritten value.
                    dynaLayer1.setVisibleLayers([2, 5, 8, 11]);
                    try {
                        toc = new agsjs.dijit.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');
                        dojo.connect(toc, 'onLoad', function() {
                            if (console) console.log('TOC loaded');
                            dojo.byId("FindNodeByLayer").disabled = false;
                    } catch (e) {

                map.addLayers([dynaLayer1, featLayer1]);

                //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in
                //the following help topic for more details      
                var resizeTimer;
                dojo.connect(map, 'onLoad', function(theMap) {
                    dojo.connect(dijit.byId('map'), 'resize', function() { //resize the map if the div is resized
                        resizeTimer = setTimeout(function() {
                        }, 500);


    <body class="claro">
        <div id="content" data-dojo-type="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
            <div id="header" data-dojo-type="dijit.layout.ContentPane" region="top">
            <div data-dojo-type="dijit.layout.ContentPane" id="leftPane" region="left" splitter="true">
                <div data-dojo-type="dijit.layout.AccordionContainer" style="height: 300px;">
     <div data-dojo-type="dijit.layout.ContentPane" title="TOC" selected="true">
                        <div id="tocDiv"></div>
   <div id="map" data-dojo-type="dijit.layout.ContentPane" region="center"></div>

With these modifications I get the the following error and I have no idea, what could be wrong.
Uncaught TypeError: Object function (){var a=arguments,args=a,a0=a[0],f,i,m,l=_2e8.length,_2ea;if(!(this instanceof a.callee)){return _2eb(a);}if(_2e9&&(a0&&a0.preamble||this.preamble)){_2ea=new Array(_2e8.length);_2ea[0]=a;for(i=0;;){a0=a[0];if(a0){f=a0.preamble;if(f){a=f.apply(this,a)||a;}}f=_2e8[i].prototype;f=f.hasOwnProperty("preamble")&&f.preamble;if(f){a=f.apply(this,a)||a;}if(++i==l){break;}_2ea[i]=a;}}for(i=l-1;i>=0;--i){f=_2e8[i];m=f._meta;f=m?m.ctor:f;if(f){f.apply(this,_2ea?_2ea[i]:a);}}f=this.postscript;if(f){f.apply(this,args);}} has no method 'parse' 

Would be awesome, if someone could help me.