I'm trying to create a tree view of layer groups and sub layers, I searched Google, and I found something called the Table Of Contents widget. I couldn't use it, or in other words, I don't know how to use it. I tried but didn't work for me.
Can anyone help me in this problem?
I'm trying to use this widget http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/examples/toc.html.
This is my code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Task</title>
<link href="tabcontent.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="../src/agsjs/css/agsjs.css" />
<script src="tabcontent.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
var dojoConfig = {
paths: {
agsjs: '../src/agsjs'
}
};
</script>
<script src="http://js.arcgis.com/3.11/"></script>
<script>
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){
map = new Map("map", {
basemap: "topo",
center: [-85.75, 38.25],
zoom: 13
});
});
</script>
<style>
#zoomin:hover,#zoomout:hover,#handtool:hover,#clip_map:hover
{
background-color:#fff;
border-radius:5px;
}
</style>
</head>
<body class="tundra" style="padding:5px;height:100%;background- image:url(background.jpg);">
<div id="header" style="width:99%;height:40px;">
<div id="tab_menu" style="width:29%;border:1px solid black;display:inline-block;height:95%;float:left;clear:both;">
<ul class="tabs" data-persist="true">
<li><a href="#layers">Layers</a></li>
<li><a href="#legendDiv">Legend</a></li>
<li><a href="#search_block">Search</a></li>
<li><a href="#tool_options">Measurement</a></li>
</ul>
</div>
<div id="tools" style="width:70%;border:1px solid black;display:inline- block;height:100%;margin:0px;clear:both;">
<div id="options" >
</div>
</div>
</div>
</div>
<div style="width:99%;height:950px">
<div id="tabcontents" style="width:29%;border:1px solid black;display:inline-block;height:100%;float:left;clear:both">
<div id="layers" style="padding:5px;"> <strong>Map Layers</strong><br/>
<img id="loading" style="display:none" src="//dl.dropbox.com/u/2654618/loading_black.gif">
<br>
<div id="layerList" style="margin-left:5px;"></div>
</div>
<div id="legendDiv" style="padding:5px;"> </div>
<div id="search_block" style="padding:5px;"><span> Search Map:</span>
<div id="search"></div>
<hr/>
<h3> Custom Search </h3>
<div id="search_critria" >
</div>
<div id="search_div">
</div>
</div>
<div id="tool_options" style="margin-top:5px;margin-left:5px;">
<div id="tool">
</div>
<div id="result">
<span style="cursor:pointer;" id="zoom_in" onclick="ZoomIn();">
<img style="height:25px" id="zoomin" src="images/zoomin.png" />
</span>
<span style="cursor:pointer;" id="zoom_out" onclick="ZoomOut()">
<img style="height:25px" id="zoomout"
src="images/zoomout.png" />
</span>
<span style="cursor:pointer;" id="hand" onclick="HandTool()">
<img style="height:25px" id="handtool"
src="images/handTool.ico" />
</span>
<span style="cursor:pointer;" id="clip" onclick="Print()">
<img style="height:25px" id="clip_map" src="images/icon-print.png" />
</span>
</div>
</div>
</div>
<div id="map" style="width:70%;border:1px solid black;display:inline-block;height:100%;margin:0px;clear:both;" >
<div style="height:200px;width:200px;overflow:hidden;position: absolute;bottom:60px; left: 83%;">
<div id="overviewMapDiv" style="height:90%;"></div>
</div>
</div>
<div id="grid"></div>
</div>
</body>
</html>
I have a folder named src, contains agsjs folder. when I run the page I got this error
GET http://js.arcgis.com/3.11/src/agsjs/dijit/TOC.js init.js:40
Error: scriptError {src: "dojoLoader", info: Array[2], stack: (…), message: "scriptError"} init.js:41
src: dojoLoader init.js:41
info: ["http://js.arcgis.com/3.11/src/agsjs/dijit/TOC.js", Event]
Best Answer
I found The problem, and it is working now, the problem was in this line
I changed it to this: