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; } } }

TOC Example

jaykapalczynski

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>

Vind meer berichten getagd met

Accepted answers

jaykapalczynski

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>

All comments

Mr_Kirkwood

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?

kenbuja

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

RichardMoussopo

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

jaykapalczynski

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>

jaykapalczynski

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]

jaykapalczynski

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

JeffPace1

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!

jaykapalczynski

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

jaykapalczynski

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?

jaykapalczynski

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

See image below

errors.jpg

jaykapalczynski

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

kenbuja

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.

jaykapalczynski

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

jaykapalczynski

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

hmmmmm

kenbuja

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.

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.