topic TOC Example in ArcGIS JavaScript Maps SDK Questions

TOC Example

jaykapalczynski — Wed, 04 Jun 2014 14:39:54 GMT

Trying to get the TOC example working

http://www.arcgis.com/home/item.html?id=9b6280a6bfb0430f8d1ebc969276b109

I downloaded the files ... USING 2.10 ...I get most of the website to display including the map but nothing in the TOC shows up.
I am using the code pretty much using the code from the Source HTML.

I put a few Alerts in the code below...I am getting Alert 1,2,4 BUT for some reason not Alert 3

anyone have any thoughts as to why the TOC is not appearing and why I am not getting into Alert 3

 <!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="https://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">         <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.9/js/esri/css/esri.css" />         <link rel="stylesheet" type="text/css" href="src/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">                      // helpful for understanding dojoConfig.packages vs. dojoConfig.paths:                   // http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/                   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'                         }                   };         </script>          <script src="https://js.arcgis.com/3.8/">         </script>          <script type="text/javascript">             var map, toc, dynaLayer1, dynaLayer2, featLayer1;              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){                // call the parser to create the dijit layout dijits               parser.parse(); // note djConfig.parseOnLoad = false;                map = new Map("map", {                 basemap: "topo",                 center: [-85.75, 38.25],                 zoom: 13               });    dynaLayer1 = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyOperationalLayers/MapServer", {         opacity: 0.8               });               featLayer1 = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/1", {                 mode: FeatureLayer.MODE_SNAPSHOT,                 outFields: ["POP07_SQMI"]               });               featLayer1.setDefinitionExpression("STCOFIPS='21111'"); //Louisville, KY  alert("1");        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();  alert("2");                    toc.on('load', function(){ alert("3");            if (console)                       console.log('TOC loaded');                     dom.byId("ChangeFeatureRenderer").disabled = false;                     dom.byId("SetVisibleLayersProgramatically").disabled = false;                     dom.byId("FindNodeByLayer").disabled = false;                     dom.byId("InsertNewLayer").disabled = false;      dom.byId("HandleNodeCheckEvent").disabled = false;                    });                  //} catch (e) {  alert(e); }               });                map.addLayers([dynaLayer1, featLayer1]);  alert("4");    // REMOVED ACTIONS HERE ARE IN THE NEXT POST               });         </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>                     <b>Table Of Content (TOC/Legend) Widget</b>                     <a href='toc_classic.html'>Classic Style </a>                     | <a href='toc.html'>AMD style</a>                     <div style="right:20px;position: absolute">                         <a href="../docs/toc/examples.html">Documentation</a>                     </div>                 </div>                 <ul style="margin:2px">                     <li>                         Click check box in TOC to turn on/off layers. When click on groups, all sublayers will be turned on/off.                     </li>                     <li>                         Click                         <button id="ChangeFeatureRenderer" disabled="disabled">                             ChangeFeatureRenderer                         </button>, notice in "FeatureLayer1", TOC refreshed to reflect the new renderer of FeatureLayer.                     </li>                     <li>                         Click                         <button id="SetVisibleLayersProgramatically" disabled="disabled"">                             SetVisibleLayersProgramatically                         </button>                         to programatically turn layer on/off (Set DynaLayer1 [8, 17, 18, 19, 20] on), notice TOC automatically sync with model(no refresh needed).                     </li>                     <li>                         Click                         <button id="FindNodeByLayer" disabled="disabled">                             FindNodeByLayer                         </button>                         to programatically find node for layer inside a map service, then either hide (layer id=12,"Damage Assessment") or collapse (layer id=0,"Public Safety") it.                     </li>                     <li>                         Click                         <button id="InsertNewLayer" disabled="disabled">                             InsertNewLayer                         </button>                         to programmtically insert a layer (DynamicMapServiceLayer2, Census) then refresh TOC.                     </li>      <li>                         Click                         <button id="SetOpacity" disabled="disabled">                             SetOpacityProgramitically                         </button>                         to programmtically set transparency of a newly added layer to 0.2 with slider enabled (after click "InsertNewLayer").                     </li>      <li>                         Click                         <button id="HandleNodeCheckEvent" disabled="disabled">                             HandleNodeCheckEvent                         </button>                         Handle Check Event to allow only one layer visible in "public saftety" service. When a layer is checked on, all other layers are off.                     </li>                 </ul>             </div>             <div data-dojo-type="dijit/layout/ContentPane" id="leftPane" region="left" splitter="true">                 <div id="tocDiv">                 </div>             </div>             <div id="map" data-dojo-type="dijit/layout/ContentPane" region="center">             </div>         </div>     </body> </html>

Re: TOC Example

KenBuja — Wed, 04 Jun 2014 15:00:18 GMT

The code worked properly for me (after I changed the path for agsjs) when I ran it through Visual Studios. But when I copied it over to JSBin, the toc.on load function didn't fire. Then I commented out the other alerts and it ran properly.

One other thing I noticed (but had no effect on it) is you're using the 3.8 JSAPI, but you're using 3.9 stylesheets.

Re: TOC Example

jaykapalczynski — Wed, 04 Jun 2014 15:07:27 GMT

really weird....I ran this in IE and it ran fine????? Chrome is where I was having issues...

hmmmmm

Re: TOC Example

jaykapalczynski — Wed, 04 Jun 2014 15:15:46 GMT

In IE I had to click "SHOW ALL CONTENT" and then everything showed up..
still cant get it to show up in Chrome or Firefox????

hmmmmm

Re: TOC Example

KenBuja — Wed, 04 Jun 2014 15:16:14 GMT

Which Chrome version? I've tested the JSBin in IE 10.0.16, Firefox 24.5.0, and Chrome 34.0.1847.137 (gotta love corporate restrictions!) and it worked properly in all three.

Re: TOC Example

jaykapalczynski — Wed, 04 Jun 2014 15:18:12 GMT

oopps.....deleted that post....brb

Re: TOC Example

jaykapalczynski — Wed, 04 Jun 2014 15:21:43 GMT

Getting a bunch of errors in Chrome....things timing out...not sure why...
anyone help diagnose these errors?

See image below

Re: TOC Example

jaykapalczynski — Wed, 04 Jun 2014 15:25:46 GMT

I was able to get it to work in CHROME but I had to select "load unsafe script" not sure why....maybe because I am trying to load http and https, something to do with our certificate?

Re: TOC Example

jaykapalczynski — Sun, 12 Dec 2021 02:20:16 GMT

Getting error when trying to add this for the TOC example above...thoughts.....app just stalls out.
But works fine in another HTML page I have?????

require(["dojo/_base/connect",
    "agsjs/dijit/TOC"], 
function(connect,  dom, parser, on,Color,
    TOC){

Failed to load resource: the server responded with a status of 404 (Not Found) https://js.arcgis.com/3.9/js/dojo/agsjs/dijit/TOC.js
Error
init.js:40
src: dojoLoader init.js:41
info:
Array[2]

Seems when I mess around with the Require definitions its sometimes it blows up and does not run...something specific I need to refresh? Refresh the website and cleared my cache...
really weird because it works in another html I have

Re: TOC Example

JeffPace — Sun, 12 Dec 2021 02:20:19 GMT

your require is messed up.

require(["dojo/_base/connect",
    "agsjs/dijit/TOC"], 
function(connect,  dom, parser, on,Color,
    TOC){

you have no requires for dom, parser, on, COlor

require(["dojo/_base/connect",
    "agsjs/dijit/TOC"], 
function(connect,  dom, TOC){

they need to match exactly!

Re: TOC Example

jaykapalczynski — Sun, 12 Dec 2021 16:41:53 GMT

didnt want to paste everything this is my full require

    require([
        "dojo/ready","dojo/on","dojo/_base/connect","dojo/dom","dojo/dom-construct",
 "dojo/keys", "esri/SnappingManager", "esri/dijit/Measurement", "esri/sniff",
        "dojo/parser","dijit/registry","esri/layers/FeatureLayer","esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/InfoTemplate","esri/renderers/UniqueValueRenderer","esri/renderers/SimpleRenderer",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/PictureMarkerSymbol",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
 "esri/map", "esri/dijit/HomeButton", "esri/dijit/LocateButton", "dijit/form/CheckBox",
 "esri/dijit/OverviewMap", "esri/dijit/Legend","esri/toolbars/draw", "esri/layers/ImageParameters",
        "esri/dijit/Geocoder", "esri/geometry/screenUtils", "dojo/query", "dojo/_base/Color",
        "esri/config", "esri/kernel","dojo/cookie", "dojo/_base/unload",

 "esri/geometry/Extent", "esri/layers/ArcGISTiledMapServiceLayer",
 "esri/renderers/ClassBreaksRenderer", "agsjs/dijit/TOC",

        "esri/tasks/query", "esri/tasks/QueryTask","esri/tasks/GeometryService", "esri/tasks/BufferParameters",
        "esri/TimeExtent", "dojo/number", "dojo/date/locale","dojo/store/Memory", "dgrid/OnDemandGrid",
 "dojox/layout/ScrollPane","dgrid/ColumnSet", "dgrid/OnDemandGrid", "dojo/_base/array", "dojo/dom-style",
 "dojo/number","dojo/_base/declare", "dgrid/Keyboard", "dgrid/Selection", "dgrid/extensions/ColumnHider",
 "dgrid/extensions/ColumnResizer","esri/lang", "dojo/_base/lang","dojo/dom-style", "dijit/TooltipDialog",
 "dijit/popup","esri/Color", "esri/graphic","esri/toolbars/navigation","esri/symbols/PictureFillSymbol",
 "esri/symbols/CartographicLineSymbol","esri/dijit/BasemapGallery","esri/dijit/BasemapToggle","esri/request",
 "esri/config","dojo/_base/array","esri/geometry/scaleUtils", "esri/symbols/PictureMarkerSymbol", "dojo/json",
 "dojo/sniff","esri/tasks/locator", "esri/symbols/Font", "esri/symbols/TextSymbol",
        "esri/urlUtils", "esri/dijit/InfoWindowLite", "esri/geometry/Multipoint", "esri/geometry/Point",
        "esri/geometry/webMercatorUtils","esri/layers/ArcGISImageServiceLayer", "dojox/data/CsvStore", "dojox/encoding/base64",
 "esri/dijit/Print","esri/tasks/PrintTemplate","esri/arcgis/utils","esri/domUtils","esri/dijit/Popup",
 "dojo/fx/Toggler", "dojo/fx",

 "esri/IdentityManager", "dojo/fx",
 "dijit/form/Button", "dijit/form/Textarea", "dijit/Dialog",
 "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
 "dijit/layout/AccordionContainer", "dijit/Toolbar",
        "esri/dijit/Scalebar", "dijit/TitlePane", "dijit/form/CheckBox",
 "dojo/domReady!"
    ], function(
        ready,on,connect,dom,domConstruct,
 keys, SnappingManager, Measurement, has,
        parser,registry,FeatureLayer,ArcGISDynamicMapServiceLayer,
 InfoTemplate,UniqueValueRenderer,SimpleRenderer,
 SimpleMarkerSymbol, PictureMarkerSymbol,
 SimpleLineSymbol, SimpleFillSymbol,
        Map, HomeButton, LocateButton, CheckBox,
        OverviewMap, Legend, Draw, ImageParameters,
        Geocoder, screenUtils, query, Color,
        esriConfig, kernel, cookie, baseUnload,

        Extent, ArcGISTiledMapServiceLayer,
 ClassBreaksRenderer, TOC,

        Query, QueryTask,GeometryService, BufferParameters,
        TimeExtent, number, locale,Memory, OnDemandGrid,
 ScrollPane,ColumnSet, Grid, array, domStyle,
 dojoNum,declare, Keyboard, Selection, ColumnHider,
 ColumnResizer,esriLang, lang, domStyle, TooltipDialog,
 dijitPopup,Color,Graphic,Navigation,PictureFillSymbol,
        CartographicLineSymbol,BasemapGallery,BasemapToggle,request,
        esriConfig,arrayUtils,scaleUtils, PictureMarkerSymbol, JSON,
        sniff,Locator, Font, TextSymbol,
 urlUtils, InfoWindowLite, Multipoint, Point,
 webMercatorUtils,ArcGISImageServiceLayer, CsvStore, base64,
        Print,PrintTemplate,arcgisUtils,domUtils,Popup,
        Toggler, coreFx
    ) {

Re: TOC Example

jaykapalczynski — Wed, 04 Jun 2014 17:02:29 GMT

The above falls apart as soon as I add the below

"agsjs/dijit/TOC",

TOC,

I add the above and I get this..error in the console

GET https://js.arcgis.com/3.9/js/dojo/agsjs/dijit/TOC.js 404 (Not Found) init.js:39
Error {src: "dojoLoader", info: Array[2], stack: (...), message: "scriptError"}
init.js:40
src: dojoLoader init.js:41
info:
["https://js.arcgis.com/3.9/js/dojo/agsjs/dijit/TOC.js", Event]
0: "https://js.arcgis.com/3.9/js/dojo/agsjs/dijit/TOC.js"
1: Event
length: 2
__proto__: Array[0]

Re: TOC Example

jaykapalczynski — Sun, 12 Dec 2021 16:41:56 GMT

Got it...Was an order thing...

Was this

 
<!-- Reference the js frame work from ESRI-->
<script src="https://js.arcgis.com/3.9/"></script>

        
<script type="text/javascript">
                     
// helpful for understanding dojoConfig.packages vs. dojoConfig.paths:             
// http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/           
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'
    }
};
</script>

Not this

        
<script type="text/javascript">
// helpful for understanding dojoConfig.packages vs. dojoConfig.paths:
// http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/
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'
     }
 };
</script>


<!-- Reference the js frame work from ESRI-->
<script src="https://js.arcgis.com/3.9/"></script>

Re: TOC Example

RichardMoussopo — Thu, 02 Oct 2014 21:10:31 GMT

Hi Ken,

I am trying to implement this TOC widget in my APP but I am having issue with the path in visual studio. I am wondering how you set up your path...

I have the folder css in my Application:

and in my default page I have this script

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'

}

};

</script>

here is the error I am getting

Re: TOC Example

KenBuja — Fri, 03 Oct 2014 13:28:52 GMT

This is how I have it set up in my applications. This is for biomapper.html

    <script>
        var dojoConfig = {
            parseOnLoad: true,
            packages: [
                {
                    name: "agsjs",
                    location: location.pathname.replace(/\/[^/]+$/, "") + '../../_assets/agsjs'
                    //"location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs' // for xdomain load
                },
                {
                    name: "modules",
                    location: location.pathname.replace(/\/[^/]+$/, "") + "/modules"
                },
                {
                    name: "dijits",
                    location: location.pathname.replace(/\/[^/]+$/, "") + "/dijits"
                }
            ]
        };
    </script>

And the directory structure looks like this

Re: TOC Example

RobertKirkwood — Wed, 02 Feb 2022 20:05:16 GMT

Not sure if this has been mentioned before, but I would really like to be able to use the same function that I am able to use in ArcGIS Layout View, where I can check to only display items in the TOC that are checked, or to only show items that are in the map extent. Right now in a web map, even after I filter, all of the items still show in the TOC and legend. I can somewhat bypass this by dragging all of the icons I don't want to show up in the legend of a web map/app under the Other option in the Change Style (Unique symbols)

Has anyone solved this for the TOC widget?