Why won't my Table on Contents Widget Work?

ChrisSergent · ‎12-05-2014

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

<!DOCTYPE html>

<html>

<head>

<title>Create a Map</title>

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

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>

</div>

</body>

</html>

KenBuja · ‎12-10-2014

I use a try...catch block to see if my TOC is having any issues. Are you getting errors in your console?

        try {
            var toc = new TOC({
                map: map,
                layerInfos: layerInfo
            }, "divLayers");
            toc.startup();

            toc.on("load", function () {
                console.log('TOC loaded');
            }
        }
        catch (e) { console.error(e.message); }

ChrisSergent · ‎12-10-2014

Here is the URL if you want to see the app live: maps.decaturil.gov/decaturToc

I modified my code like so and, it is still not working correctly:

<!DOCTYPE html>

<html>

<head>

<title>Create a Map</title>

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

}

#divDialogProcess

{

z-index:50;

position:absolute;

right:0%;

top:0%;

background-color:White;

}

</style>

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

try {

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

divDialogProcess.innerHTML = "Initializing the Table of Contents' legends, please be patient...";

for (var k = 0; k < layerInfo.length; k++) {

var layer = layerInfo.layer;

var layersArray = layerInfo.layerList;

if (layersArray !== null) {

var dynamicLayerInfos = layer.createDynamicLayerInfosFromLayerInfos();

for (var j = 0; j < dynamicLayerInfos.length; j++) {

toc.findTOCNode(layer, dynamicLayerInfos.id).hide();

for (var i = 0; i < layersArray.length; i++) {

if (dynamicLayerInfos.id === layersArray) {

//var test = toc.findTOCNode(layer, dynamicLayerInfos.id);

toc.findTOCNode(layer, dynamicLayerInfos.id).show();

}

domStyle.set(dom.byId("divDialogProcess"), "display", "none");

var test = registry.byId("buttonClose")

domStyle.set(registry.byId("buttonClose").domNode, "display", "block");

initializing = false;

});

}

catch (e) { console.error(e.message); }

});

}

);

</script>

</head>

</div>

</div>

</body>

</html>

KenBuja · ‎12-10-2014

OK, I've made a few changes to your script. The biggest one was to change the event where the TOC was loaded. Originally, that was in the "layer-add-result" function, which is fired every time you add a layer. Thus the script was trying to initialize a TOC whenever a layer was added. So now the layers are added in the "map.addLayers" method rather than in the "map.addLayer".

However...I'm still getting some strange activity that I haven't figured out. The dynamic layer is getting added twice with the error

TypeError: Unable to get property 'className' of undefined or null reference TypeError: Unable to get property 'className' of undefined or null reference

at n.contains (http://js.arcgis.com/3.11/:233:436)

at _toggleContainer (http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs/dijit/TOC.js:16:30)

at _adjustToState (http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs/dijit/TOC.js:18:218)

at Anonymous function (http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs/dijit/TOC.js:19:373)

at h.forEach (http://js.arcgis.com/3.11/:229:285)

at _adjustToState (http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs/dijit/TOC.js:19:331)

at Anonymous function (http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs/dijit/TOC.js:19:373)

at h.forEach (http://js.arcgis.com/3.11/:229:285)

at _adjustToState (http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs/dijit/TOC.js:19:331)

Here's the script so far. If i have time, I'll try to figure out what's going on with the operationalLayer. I commented out some things, like the proxy and geometry service.

<!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" />-->
    <link rel="stylesheet" type="text/css" href="http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs/css/agsjs.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;
        }

        #divDialogProcess {
            z-index: 50;
            position: absolute;
            right: 0%;
            top: 0%;
            background-color: White;
        }
    </style>
    <script>
        var dojoConfig = {
            packages: [{
                name: "agsjs",
                "location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs' // for xdomain load
            }]
        };
    </script>


    <script src="http://js.arcgis.com/3.11/"></script>
    <!--<script src="agsjs/dijit/TOC.js" type="text/javascript"></script>-->
    <script>
        var map, tiled, pointFeatureLayer, operationalLayer;
        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
                     tiled = new ArcGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer", { id: "Tiled" });
                     //map.addLayer(tiled);
                     // set operational layers
                     operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { id: "Operational", opacity: 0.5 });
                     // add operational layers
                     //map.addLayer(operationalLayer);

                     // add point feature layer
                     pointFeatureLayer = new FeatureLayer("http://maps.decaturil.gov/arcgis/rest/services/Test/FeatureServer/0", { id: "Points" });
                     //map.addLayer(pointFeatureLayer);

                     // declare geometry service
                     //esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");
                     map.addLayers([tiled, operationalLayer, pointFeatureLayer]);

                     // Add Table of Contents Start
                     map.on('layers-add-result', function (evt) {
                         try {
                             var 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 () {
                                 console.log("TOC loaded");
                             });
                         }
                         catch (e) { console.error(e.message); }


                     });
                 }
        );
    </script>
</head>
<body class="soria">
    <div id="mapDiv">
        <div id="tocDiv"></div>
    </div>
</body>
</html>

ChrisSergent · ‎12-10-2014

I receive a: Tried to register widget with id==tocDiv but that id is already registered

I removed the comments from the geometry declaration as well as the proxy and the TOC loads with the duplicate layers, but you can not turn them off on the map. If you refresh the map, the layers are removed from the TOC, and then you can remove the layer from the map.