Modifiying TOC (nliu's TOC)

DominikSchlarmann · ‎09-30-2013

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.prototype;f=f.hasOwnProperty("preamble")&&f.preamble;if(f){a=f.apply(this,a)||a;}if(++i==l){break;}_2ea=a;}}for(i=l-1;i>=0;--i){f=_2e8;m=f._meta;f=m?m.ctor:f;if(f){f.apply(this,_2ea?_2ea:a);}}f=this.postscript;if(f){f.apply(this,args);}} has no method 'parse'

Would be awesome, if someone could help me.
Thanks,
Dominik

JeffPace · ‎09-30-2013

more than likely you are creating your overview and scalebar before your map is "loaded" (ready)

Try adding them to your map's onLoad event

Anonymous User · ‎09-30-2013

Original User: Schlomm

Thanks for your tipp:)
I've got the scalebar to work, but unfortunately the overviewmap has still ja problem.
Changes are edited in red...
Until now I'm beginner using Java Script and esris API, so for me some small problems could be big problem 😞

Thanks so much,
Dominik

P.S.: For a better overview a fiddle link: http://jsfiddle.net/blordcastillo/mULcz/

<!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(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
                });

                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(){
       //new scalebar
 var scalebar = new esri.dijit.Scalebar({
 map: map,
 scalebarUnit: "dual"
 });
 
 //new Overviewmap
 var overviewMapDijit = new OverviewMap({
 map: map,
 visible: true
 });
 overviewMapDijit.startup();
       
       
       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>

JonathanUihlein · ‎09-30-2013

Your require block is wrong:

 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) {....

This is what it should be:

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

Make sure you call your modules in the correct order. They need to be declared in the same order that they are invoked in the require block.

This DOJO tutorial explains the whys & hows of AMD: https://dojotoolkit.org/documentation/tutorials/1.9/modern_dojo/

Anonymous User · ‎10-06-2013

Original User: Schlomm

Hello (again),
At first: Thanks for your help last time. The dojo-tutorial was quite helpful, so I was able to add some feature.
For now the Basemapgallery makes me struggle, because it doesn't show up any Basemaps.
Maybe you can have a look at the following fiddle, which is the basic application with default map services:

http://jsfiddle.net/2Je8N/

Of course I have to work on the layout 😉
Beyond that I have two questions:
Why does the TOC add the DynamicMapServiceLayer1 twice? In my perspective the code

map.addLayers([dynaLayer1, featLayer1]);

(Line 187) adds both layers just one time.
How it is possible to include esri Java Script Version 3.7?

Thanks so much for your help 🙂
Cheers,
Dominik

DominikSchlarmann · ‎10-07-2013

Hello again,
Until now I've spend about seven hours to get scalebar, overviewmap and Basemapgallery working in one webmap using nilu'S TOC, but unfortunately without success.
I have one version, where scalebar and overviewmap work (but not the basemapgallery) and one version, where scalebar and basemapgallery work (but not the overviewmap).

Here is the version with working scalebar and basemapgallery work (but not the overviewmap):
http://jsfiddle.net/crqge/
As you can see in the fiddle the OverviewMap Widget is already included.

I have absolutely no idea, what I've missed in the code.
Would be awesome, if someone can take a look. By getting scalebar, overviewmap, basemapgallery and nliu's TOC working, one big step would be completed for my personal webgis.

Thanks in advance,
Dominik

Anonymous User · ‎10-07-2013

Original User: mattdriscoll

For others that may be interested in a TOC widget, I have one as well. https://github.com/driskull/arcgis-dijit-layer-legend-js

DominikSchlarmann · ‎10-07-2013

Thanks for your tip 🙂
I will try it out after I'm able to get my problem solved mentioned in post #6.

btw: The live exmaple (http://driskull.github.io/arcgis-dijit-layer-legend-js/) isn't working for me. At least there is no map.

Anonymous User · ‎10-08-2013

Original User: Schlomm

Finally got it by myself.
For interested people, find the jsfiddle here: http://jsfiddle.net/skLjx/