AnsweredAssumed Answered

Why won't my Table on Contents Widget Work?

Question asked by csergent08 Champion on Dec 5, 2014
Latest reply on Dec 10, 2014 by csergent08

@@@Sometimes my table of contents displays and sometimes it does not; why is this?

 

<!DOCTYPE html>

<html>

    <head>

        <title>Create a Map</title>

        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">

        <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/soria/soria.css">

        <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">

        <link href="agsjs/dijit/css/TOC.css" rel="stylesheet" type="text/css" />

        <style>

            html, body, #mapDiv

            {

                padding:0;

                margin:0;

                height:100%;

                width:100%;

                overflow:hidden;

            }

         

                    

            #tocDiv

            {

                z-index:50;

                position:absolute;

                top:0%;

                left:0%;

                width:300px;

                height:auto;

                background-color:White;

             

            }

         

            #scaleDiv .agsjsTOCOutOfScale {

              display:none;

            }

 

 

         

         

        </style>

        <script src="http://js.arcgis.com/3.11/"></script>

        <script src="agsjs/dijit/TOC.js" type="text/javascript"></script>

        <script>

            var map;

            require(["esri/map", "esri/config",

                     "esri/geometry/Extent",

                     "esri/layers/ArcGISDynamicMapServiceLayer",

                     "esri/layers/ArcGISTiledMapServiceLayer",

                     "esri/layers/FeatureLayer",

                     "esri/renderers/ClassBreaksRenderer",

                     "esri/symbols/SimpleFillSymbol",

                     "esri/tasks/GeometryService",

                     "dojo/dom",

                     "dojo/dom-geometry",

                     "dojo/fx",

                     "dojo/on",

                     "dojo/parser",

                     "dojo/_base/Color",

                     "agsjs/dijit/TOC",

                     "dojo/domReady!"], function (Map, esriConfig, Extent, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, FeatureLayer, ClassBreaksRenderer, SimpleFillSymbol, GeometryService, dom, domGeom, coreFx, on, parser, Color, TOC

            ) {

 

 

                         /* The proxy comes before all references to web services */

                         /* Files required for security are proxy.config, web.config and proxy.ashx

                         - set security in Manager to Private, available to selected users and select Allow access to all users who are logged in

                         (Roles are not required)

                         /*

                         The proxy section is defined on the ESRI sample. I have included it as

                         part of the documentation reads that the measuring will not work.

                         I thought that might be important.

                         */

 

 

                         // Proxy Definition Begin

                         //identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.

                         //If this null or not available the project and lengths operation will not work.

                         // Otherwise it will do a http post to the proxy.

                         esriConfig.defaults.io.proxyUrl = "proxy.ashx";

                         esriConfig.defaults.io.alwaysUseProxy = true;

 

 

                         // Proxy Definition End

 

 

 

 

                         // set custom extent

                         var initialExtent = new Extent({

                             "xmin": 777229.03,

                             "ymin": 1133467.92,

                             "xmax": 848340.14,

                             "ymax": 1185634.58,

                             "spatialReference": {

                                 "wkid": 3435

                             }

                         });

 

 

                         // create map and set slider style to small

                         map = new Map("mapDiv", {

                             showAttribution: false,

                             sliderStyle: "small",

                             extent: initialExtent,

                             logo: false

                         });

 

 

                         // add imagery

                         var tiled = new ArcGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

                         map.addLayer(tiled);

                         // set operational layers

                         var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });

                         // add operational layers

                         map.addLayer(operationalLayer);

 

 

                         // add point feature layer

                         var pointFeatureLayer = new FeatureLayer("http://maps.decaturil.gov/arcgis/rest/services/Test/FeatureServer/0");

                         map.addLayer(pointFeatureLayer);

 

 

                         // declare geometry service

                         esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");

 

 

 

 

                         // Add Table of Contents Start

                         map.on('layer-add-result', function (evt) {

                             // overwrite the default visibility of service.

 

 

                             //try {

                             toc = new TOC({

                                 map: map,

                                 layerInfos: [{

                                     layer: pointFeatureLayer,

                                     title: "My Feature"

                                 }, {

                                     layer: operationalLayer,

                                     title: "Dynamic Map"

                                 }, {

                                     layer: tiled,

                                     title: "Imagery"

                                 }]

                             }, 'tocDiv');

                             toc.startup();

 

 

                         });

 

 

                         toc.on('load', function () {

                             if (console)

                                 console.log('TOC loaded');

                         });

                         toc.on('toc-node-checked', function (evt) {

                             if (console) {

                                 console.log("TOCNodeChecked, rootLayer:"

  + (evt.rootLayer ? evt.rootLayer.id : 'NULL')

  + ", serviceLayer:" + (evt.serviceLayer ? evt.serviceLayer.id : 'NULL')

  + " Checked:" + evt.checked);

                             }

                         });

 

 

                     }

            );

        </script>

    </head>

    <body class="soria">

        <div id="mapDiv">

            <div id="tocDiv"></div>

        </div>

    </body>

</html>

Outcomes