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]

  • 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? – Stephen Lead Nov 5 '14 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. – Omar Taha Nov 5 '14 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? – Stephen Lead Nov 5 '14 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 :) – Omar Taha Nov 5 '14 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. – Stephen Lead Nov 5 '14 at 23:31
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' } };

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.