Community
Select to view content in your preferred language

TOC Example

6011
15
Jump to solution
06-04-2014 07:39 AM
jaykapalczynski
by
Honored Contributor
‎06-04-2014 07:39 AM
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>
15 Replies
jaykapalczynski
by
Honored Contributor
‎06-04-2014 09:39 AM
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
0 Kudos
JeffPace
by MVP Alum
MVP Alum
‎06-04-2014 09:48 AM
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!
0 Kudos
jaykapalczynski
by
Honored Contributor
‎06-04-2014 10:01 AM
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
    ) {
0 Kudos
jaykapalczynski
by
Honored Contributor
‎06-04-2014 10:02 AM
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]
0 Kudos
jaykapalczynski
by
Honored Contributor
‎06-04-2014 11:18 AM
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>
RobertKirkwood
by
Frequent Contributor
‎02-02-2022 12:05 PM

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? 

0 Kudos