0

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]

asked Nov 5, 2014 at 21:25
5
  • Could you please use the Edit button above and let us know the URL to the TOC widget you're trying to configure? Eg is it this one or this one? Commented Nov 5, 2014 at 22:36
  • I edited the the question, the problem is that I'm not able to get the widget working on localhost on my computer. Commented Nov 5, 2014 at 22:42
  • Cool, thanks. That makes things a bit easier. Did you follow the steps in the documentation? Can you share the relevant sections of your code, and/or some screenshots of what you're seeing? Commented Nov 5, 2014 at 22:56
  • It is working now, the problem was in this line var dojoConfig = { paths: { agsjs: '../src/agsjs' } }; I changed it to this: var dojoConfig = { paths: { //if you want to host on your own server, download and put in folders then use path like: agsjs: location.pathname.replace(/\/[^/]+$/, '') + '../src/agsjs' } }; Thanks man :) Commented Nov 5, 2014 at 23:29
  • No worries, I did nothing! You should paste the above comment into an Answer instead, so you can then Accept the answer and close off this issue. Commented Nov 5, 2014 at 23:31

1 Answer 1

0

I found The problem, and it is working now, the problem was in this line 

 var dojoConfig = { paths: 
 { agsjs: '../src/agsjs' } };

I changed it to this: 

 var dojoConfig = { paths: { 
 agsjs: location.pathname.replace(/\/[^/]+$/, '') + '../src/agsjs' } };
answered Nov 5, 2014 at 23:33

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.