AnsweredAssumed Answered

Modifiying TOC (nliu's TOC)

Question asked by Schlomm_1 on Sep 30, 2013
Latest reply on Oct 8, 2013 by geonetadmin
Helllo,
Today I've tried to modify the TOC provided by nliu ( http://www.arcgis.com/home/item.html?id=9b6280a6bfb0430f8d1ebc969276b109 ). 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>
<html>
    
    <head>
        <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" />
        <title>TOC</title>
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css" />
        <link rel="stylesheet" type="text/css" href="http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs/css/agsjs.css" />
        <style>
            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;*/
            }
        </style>
        <script type="text/javascript">
            var djConfig = {
                parseOnLoad: false,
                packages: [{
                    "name": "agsjs",
                    //if you want to host on your own server, download from
                    //http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/
                    // 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 googlecode.com 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": "http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.06/build/agsjs"
                    //"location": "http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs"
                    //"location": "http://gmaps-utility-gis.googlecode.com/svn/trunk/agsjs/build/agsjs"
                    "location": "http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs"
                }]
            };
        </script>
        <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/">
            
        </script>
        <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
 });
 overviewMapDijit.startup();


                var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
                map.addLayer(basemap);

                dynaLayer1 = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyOperationalLayers/MapServer", {
                    opacity: 0.8
                });

                featLayer1 = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/1", {
                    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');
                        toc.startup();
                        dojo.connect(toc, 'onLoad', function() {
                            if (console) console.log('TOC loaded');
                            dojo.byId("FindNodeByLayer").disabled = false;
                        });
                        dojo.disconnect(h);
                    } catch (e) {
                        alert(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 http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm      
                var resizeTimer;
                dojo.connect(map, 'onLoad', function(theMap) {
                    dojo.connect(dijit.byId('map'), 'resize', function() { //resize the map if the div is resized
                        clearTimeout(resizeTimer);
                        resizeTimer = setTimeout(function() {
                            map.resize();
                            map.reposition();
                        }, 500);
                    });
                });

            });

        </script>
    </head>
    <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>
                    Header
                </div>
            </div>
            <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>
    </div>
            </div>
   <div id="map" data-dojo-type="dijit.layout.ContentPane" region="center"></div>
    </body>
</html>


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.
Thanks,
Dominik

Attachments

Outcomes