nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Vind meer berichten getagd met

Accepted answers

All comments

AlexGole1

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

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

JeffPace1

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

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

JeffPace1

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

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.

JeffPace1

you have extra /section tags

(line 327)

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

JeffPace1

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.