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