chagan02

API Table of Contents Help

Discussion created by chagan02 on May 21, 2014
Latest reply on May 21, 2014 by chagan02
Hello all,

I'm working with the TOC widget and I cant seem to get the code to even load initially once I plug in the "require" and "function" calls.  Code is below.  When I remove "agsjs/dijit/TOC" from the "require" statement, and remove "TOC" from the funtion call, the page loads fine.  If I leave those two in the script, it just stops loading after a few seconds.  Seems like it might be having trouble finding the agsjs folder, however I followed the instructions and placed the src folder containing agsjs in the directory of the webpage.  I haven't even gotten to getting the TOC in the page itself yet. 


  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
  <link rel='stylesheet' type='text/css' href='index2.css' />
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="../src/agsjs/css/agsjs.css" />
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

  <script>
  $(function() {
  $( "#accordion" ).accordion()});
  </script>
  
  
    <script type="text/javascript">
    // helpful for understanding dojoConfig.packages vs. dojoConfig.paths:
    // http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/
    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' 
    }
    };
        </script>

  <script src="http://js.arcgis.com/3.9/"></script>
  <script>
      
    require([
   "esri/map", 
   "esri/geometry/Extent", 
   "dojo/_base/connect",
   "dojo/parser",
   "dojo/ready",
   "dijit/layout/BorderContainer",
   "dijit/layout/ContentPane",
   "dojo/dom",
   "dojo/on",
   "dojo/query",
   "esri/layers/FeatureLayer",
   "esri/layers/ImageParameters",
   "esri/layers/CSVLayer",
   "esri/layers/ArcGISTiledMapServiceLayer", 
   "esri/layers/ArcGISDynamicMapServiceLayer",
   "agsjs/dijit/TOC",
   "esri/Color",
   "esri/symbols/SimpleMarkerSymbol",
   "esri/renderers/SimpleRenderer",
   "esri/symbols/SimpleFillSymbol",
   "esri/renderers/ClassBreaksRenderer",
   "esri/InfoTemplate",
   "esri/urlUtils",
   "esri/arcgis/utils",
   "esri/dijit/Legend",
   "esri/dijit/Scalebar",
   "dojo/domReady!"
    ], function(
   Map,
   Extent,
   connect,
   parser,
   ready,
   BorderContainer,
   ContentPane,
   dom,
   on,
   query,
   FeatureLayer,
   ImageParameters,   
   CSVLayer,
   ArcGISTiledMapServiceLayer,
   ArcGISDynamicMapServiceLayer,
   TOC,
   Color, 
   SimpleMarkerSymbol, 
   SimpleRenderer, 
   SimpleFillSymbol,
   ClassBreaksRenderer,
   InfoTemplate,
   urlUtils,
   arcgisUtils,
   Legend,
   Scalebar
    ) {
    
   ready(function(){

   parser.parse();
   

   var visible = [] ,layers = [];
   
   arcgisUtils.createMap("964718e320ea4fc4abcc73ada068d015","map").then(function(response){
     //update the app 

   var map = response.map;
     
   //Use the ImageParameters to set the invisible layers in the map service during ArcGISDynamicMapServiceLayer construction.
   var imageParameters = new ImageParameters();
   imageParameters.layerIds = [0,1];
   imageParameters.layerOption = ImageParameters.LAYER_OPTION_HIDE;
   //can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE
     
   //Takes a URL to a non cached map service.
   var dynamicMapServiceLayer0 = new ArcGISDynamicMapServiceLayer("http://gis.srh.noaa.gov/ArcGIS/rest/services/RIDGERadar/MapServer", {
      "opacity" : 0.5,"imageParameters":imageParameters});
   
   //Takes a URL to a non cached map service.
   var dynamicMapServiceLayer1 = new ArcGISDynamicMapServiceLayer("http://gisdev.srh.noaa.gov/arcgis/rest/services/GSP/gffg/MapServer", {
      "opacity" : 0.5,"imageParameters":imageParameters});
   
   map.addLayer(dynamicMapServiceLayer0);
   layers.push(dynamicMapServiceLayer0);
   map.addLayer(dynamicMapServiceLayer1);
   layers.push(dynamicMapServiceLayer1);
    
   // on(dom.byId("0"), "change", updateLayerVisibility);
   // on(dom.byId("1"), "change", updateLayerVisibility);
       
     // var csv = new CSVLayer("./data/180query.csv");
     // var orangeRed = new Color([238, 69, 0, 0.5]); // hex is #ff4500
     // var marker = new SimpleMarkerSymbol("solid", 15, null, orangeRed);
     // var renderer = new SimpleRenderer(marker);
     // csv.setRenderer(renderer);
     // var template = new InfoTemplate("${lid}", "${name}");
     // csv.setInfoTemplate(template);

     // map.addLayer(csv);
     

     // var layerIdsArr = map.layerIds; // This gives ids of all layers added to map.
     // var inactivelayers = map.getLayer(layerIdsArr[3]);// Say you want layer with an id at first index of layerIdsArr
     // inactivelayers.hide();// Will hide layer

    


   });

   });

    });
  </script>

Outcomes