API Table of Contents Help

CharlesGant — Wed, 21 May 2014 21:26:57 GMT

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="https://community.esri.com//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>

Re: API Table of Contents Help

CharlesGant — Thu, 22 May 2014 00:49:17 GMT

Ok, so I got the TOC to work. However, I guess it does not support a CSVLayer as a respectable Feature Layer?

topic API Table of Contents Help in ArcGIS JavaScript Maps SDK Questions

API Table of Contents Help

Re: API Table of Contents Help