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>
<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;
}
#divDialogProcess
{
z-index:50;
position:absolute;
right:0%;
top:0%;
background-color:White;
}
</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) {
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>
<body class="soria">
<div id="mapDiv">
<div id="tocDiv"></div>
</div>
<div id="divDialogProcess">
<button id="buttonClose" title="Close"></button>
</div>
</body>
</html>