1

I was hoping someone might be able to take a look at my code and point out why this might not be working. I'm trying to use the Table of Contents (TOC)/Legend Widget for JavaScript API.

I thought at first that I wasn't linking properly to the stylesheet, so I ended up using their online hosted version. I also thought it might be an issue with not calling dijits/functions in the right order.

<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<link rel="stylesheet" type="text/css" href="http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs" />
<style>
html, body {
  padding: 5px;
  margin: 0;
  height: 100%;
  width: 100%;
}

#leftpane {
    width: 280px;
    overflow: auto
}


}
</style>
<script type="text/javascript">

              var djConfig = { 
                parseOnLoad: false,
            packages: [{
                "name": "agsjs",
                "location": "http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs"
            }]
              };


    </script>

<script src="http://js.arcgis.com/3.8/"></script>
<script type="text/javascript">
var map, toc, BOE30, APESections, NDMTWellBores, EOXDSUs, Rigs, EOXWellBores, Activity;

require(["dojo/_base/connect",
         "dojo/parser",
         "dojo/on",
         "esri/map",
         "agsjs/dijit/TOC",
         "esri/layers/ArcGISDynamicMapServiceLayer",
         "dojo/fx", 
         "dijit/layout/BorderContainer",
         "dijit/layout/ContentPane",
         "dojo/domReady!"], 
         function(connect, parser, on, Map, TOC, ArcGISDynamicMapServiceLayer) {

  //call the parser to create the dijit layout dijits
  parser.parse();

  map = new Map("map", {
    center: [-103.8, 47.6],
    zoom: 10,
    basemap: "topo"
  });


  BOE30 = new ArcGISDynamicMapServiceLayer("http://dndev01-v:6080/arcgis/rest/services/BOE30/MapServer", {"opacity" : 0.7}); 
  APESections = new ArcGISDynamicMapServiceLayer("http://dndev01-v:6080/arcgis/rest/services/APESections/MapServer", {"opacity" : 0.8});
  NDMTWellBores = new ArcGISDynamicMapServiceLayer("http://dndev01-v:6080/arcgis/rest/services/NDMTWellBores/MapServer");
  EOXDSUs = new ArcGISDynamicMapServiceLayer("http://dndev01-v:6080/arcgis/rest/services/EOXDSUs/MapServer");
  Rigs = new ArcGISDynamicMapServiceLayer("http://dndev01-v:6080/arcgis/rest/services/Rigs/MapServer");
  EOXWellBores = new ArcGISDynamicMapServiceLayer("http://dndev01-v:6080/arcgis/rest/services/EOXWellBores/MapServer");
  Activity = new ArcGISDynamicMapServiceLayer("http://dndev01-v:6080/arcgis/rest/services/Activity/MapServer");

  map.on('layers-add-result', function(evt){
      toc = new TOC({
        map: map,
        layerInfos: 
        [{layer: BOE30
          title: "BOE30"
          slider: true},
         {layer: APESections
          title: "Sections"
          slider: true},
         {layer: NDMTWellBores
          title: "ND, MT Well Bores"},
         {layer: EOXDSUs
          title: "EOX DSUs"},
         {layer: Rigs
          title: "Rig Locations"},
         {layer: EOXWellBores
          title: "EOX Well Bores"},
         {layer: Activity
          title: "Activity (Recent Completed/Permitted/Spud)"
          slider: true}
        ]
      }, 'tocDiv');
      toc.startup();
      toc.on('load', function(){
                if (console) 
                  console.log('TOC loaded');
                dom.byId("ChangeFeatureRenderer").disabled = false;
                dom.byId("SetVisibleLayersProgramatically").disabled = false;
                dom.byId("FindNodeByLayer").disabled = false;
                dom.byId("InsertNewLayer").disabled = false;
              });

    });
    map.addLayers([BOE30, APESections, NDMTWellBores, EOXDSUs, Rigs, EOXWellBores, Activity]);


});

</script>
</head>
<body class="claro">
    <div id="content" data-dojo-type="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">

        <div data-dojo-type="dijit.layout.ContentPane" id="leftPane" region="left" splitter="true">
            <div data-dojo-type="dijit.layout.AccordionContainer" style="height: 300px;">
                <div data-dojo-type="dijit.layout.ContentPane" title="TOC" selected="true">
                    <div id="tocDiv"></div>
                </div>
            </div>
        </div>
        <div id="map" data-dojo-type="dijit.layout.ContentPane" region="center"></div>
</body>

  • 1
    Welcome to GIS.SE. You might get more answers (or at least more people looking at your code) if you try to reduce the amount of code to read. For example, can you reduce the number of layers and reproduce the same problem? Also, you might want to add details of what debugging you've done. – BradHards Mar 18 '14 at 20:46
2

It looks like you just had some JavaScript errors.

You were missing commas in your layerInfos:

layerInfos: 
    [{layer: BOE30,
      title: "BOE30",
      slider: true},
     {layer: APESections,
      title: "Sections",
      slider: true},
     {layer: NDMTWellBores,
      title: "ND, MT Well Bores"},
     {layer: EOXDSUs,
      title: "EOX DSUs"},
     {layer: Rigs,
      title: "Rig Locations"},
     {layer: EOXWellBores,
      title: "EOX Well Bores"},
     {layer: Activity,
      title: "Activity (Recent Completed/Permitted/Spud)",
      slider: true}
    ]

And you were missing "esri/layers/ArcGISDynamicMapServiceLayer" in the require section:

require(["dojo/_base/connect",
     "dojo/parser",
     "dojo/on",
     "esri/map",
     "agsjs/dijit/TOC",
     "esri/layers/ArcGISDynamicMapServiceLayer",
     "dojo/fx", 
     "dijit/layout/AccordionContainer",
     "dijit/layout/BorderContainer",
     "dijit/layout/ContentPane",
     "dojo/domReady!"], 
     function(connect, parser, on, Map, TOC, ArcGISDynamicMapServiceLayer)
| improve this answer | |

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.