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>
