TOC

[AlexGole1]

Hi everyone, I am running into an issue using the widget TOC here and I am really unsure why.  I am pretty new to JS API  but I am really getting into creating my own web maps. I tried to use the same widget within my own code and get an empty output (no errors mentioned in Firebug). My goal for today is to add the TOC to the legend pane. Has someone any idea why it would not show up/ what I am missing?

Thank you for your help!

Alex

[JeffPace]

actually you (at a minimum) have the same problem as the person above you

require([
        "esri/map", "esri/config", "esri/dijit/HomeButton", "esri/dijit/BasemapGallery", "esri/arcgis/utils", "esri/dijit/Scalebar",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/tasks/Geoprocessor", "esri/tasks/FeatureSet", "esri/toolbars/draw",
        "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/renderers/ClassBreaksRenderer",
        "esri/graphic",
        "dojo/_base/Color", "agsjs/dijit/TOC",
        "dojo/dom", "dojo/dom-style", "dojo/query", "dojo/parser", "dojo/on", "dojo/_base/connect",
        "dijit/registry",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane",  "dijit/layout/AccordionContainer",
        "dijit/TitlePane", "dijit/form/CheckBox", "dijit/form/ComboBox", "dojo/parser", "dijit/Toolbar", "dijit/form/DropDownButton", "dijit/form/TextBox",
        "dojo/domReady!"
      ], function(
        Map, esriConfig, HomeButton, BasemapGallery, arcgisUtils, Scalebar,
        ArcGISDynamicMapServiceLayer, Legend,
        Geoprocessor, FeatureSet, Draw,
        SimpleFillSymbol, SimpleLineSymbol,
        Graphic,
        Color, ClassBreaksRenderer, TOC,
        dom, domStyle, query, parser, connect, on,
        registry
      ) {

These are out of sync with each other.  they have to match PERFECTLY, in order.

SO you added the "Legend" to the function, but not to the require.

So Geoprocessor is being aliased "Legend". FeatureSet is now "Geoprocessor" etc....

[AlexGole1]

actually you (at a minimum) have the same problem as the person above you

require([
        "esri/map", "esri/config", "esri/dijit/HomeButton", "esri/dijit/BasemapGallery", "esri/arcgis/utils", "esri/dijit/Scalebar",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/tasks/Geoprocessor", "esri/tasks/FeatureSet", "esri/toolbars/draw",
        "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/renderers/ClassBreaksRenderer",
        "esri/graphic",
        "dojo/_base/Color", "agsjs/dijit/TOC",
        "dojo/dom", "dojo/dom-style", "dojo/query", "dojo/parser", "dojo/on", "dojo/_base/connect",
        "dijit/registry",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane",  "dijit/layout/AccordionContainer",
        "dijit/TitlePane", "dijit/form/CheckBox", "dijit/form/ComboBox", "dojo/parser", "dijit/Toolbar", "dijit/form/DropDownButton", "dijit/form/TextBox",
        "dojo/domReady!"
      ], function(
        Map, esriConfig, HomeButton, BasemapGallery, arcgisUtils, Scalebar,
        ArcGISDynamicMapServiceLayer, Legend,
        Geoprocessor, FeatureSet, Draw,
        SimpleFillSymbol, SimpleLineSymbol,
        Graphic,
        Color, ClassBreaksRenderer, TOC,
        dom, domStyle, query, parser, connect, on,
        registry
      ) {

These are out of sync with each other.  they have to match PERFECTLY, in order.

SO you added the "Legend" to the function, but not to the require.

So Geoprocessor is being aliased "Legend". FeatureSet is now "Geoprocessor" etc....

First of all, thank you for your answer. I have reorder (a little) my code as you rightly mentioned. I did reorder my modules/ functions better (TOC comes right after the dynamic layer) and removed the dojo/on, dojo/connect, because I am not sure how useful they are for what I want to do. However it still did not work...

[JeffPace]

you have extra /section tags

(line 327)

[AlexGole1]

you have extra /section tags

(line 327)

Thanks for noticing! I corrected that. However the layout already worked fine before I added the "TOC" widget. Something went wrong when I added the TOC.

[JeffPace]

did you download and add the agsjs folder and files to your project?

[AlexGole1]

did you download and add the TOC.js folder and files to your project?

That is a very good point. I only downloaded the CSS file but not the JS. However, I just moved it, tried running it and and was still unsuccessful...

[JeffPace]

ok i think you are skipping alot of steps

you need to download the agsjs package

in your project you should have (at least)

the agsjs folder
the TOC.js file
the css/TOC.css
the templates/tocNode.html and templates/tocNode_files/${_blankGif}

plus you need to add the agsjs to the packages of your dojoConfig

[AlexGole1]

ok i think you are skipping alot of steps

you need to download the agsjs package

in your project you should have (at least)

the agsjs folder
the TOC.js file
the css/TOC.css
the templates/tocNode.html and templates/tocNode_files/${_blankGif}

plus you need to add the agsjs to the packages of your dojoConfig

That is what I did once you mentioned i did not have the TOC.js, I brought over all the downloaded TOC files/folders in my wwroot folder. I believe I have it all well linked too now. Here is my code as it is now. I am not really where to reference the tocNode.html and templates/tocNode_files/${_blankGif}. Let me know if you would like me to zip/mail my app.
Thanks again for all your help!
Alex

[AlexGole1]

Can anybody help me out with this TOC widget? Thank you,
Alex