Brain,
Sure here is a sample:
<!DOCTYPE html>
<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>TOC</title>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.17/esri/css/esri.css" />
<link rel="stylesheet" type="text/css" href="agsjs/dijit/css/TOC.css" />
<style>
html,
body {
height: 98%;
width: 98%;
margin: 0;
padding: 5px;
font-family: helvetica, arial, sans-serif;
font-size: 90%;
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 50px;
left: 0;
background: silver;
}
#content {
position: fixed;
top: 32px;
width: 100%;
height: 100%;
left: 0;
margin: 0;
border: 0;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 35px;
left: 0;
background: silver;
}
#map {
position: fixed;
width: 100%;
height: 100%;
border: 0;
margin-left: -15px;
margin-top: -15px;
margin-right: -15px;
}
#tocDiv {
background-color: silver;
padding: 8px;
overflow: auto;
max-width: 600px;
max-height: 500px;
}
.IdentifyIcon {
background-image: url("images/Identify.png");
background-repeat: no-repeat;
width: 18px;
height: 18px;
text-align: center;
}
.FindIcon {
background-image: url("images/query.png");
background-repeat: no-repeat;
width: 18px;
height: 18px;
text-align: center;
}
.claro .dijitButton .dijitButtonNode,
.claro .dijitDropDownButton .dijitButtonNode,
.claro .dijitComboButton .dijitButtonNode,
.claro .dijitToggleButton .dijitButtonNode {
border: 0;
padding: 2px 4px 4px 4px;
color: #000000;
border-radius: 0;
box-shadow: none;
background: none;
}
.claro .dijitMenu {
background-color: silver;
border: 1px solid gray;
}
</style>
<script type="text/javascript">
var djConfig = {
paths: {
agsjs: "/js/agsjs"
}
};
</script>
<script src="https://js.arcgis.com/3.17/"></script>
<script type="text/javascript">
var map, toc, basemap, dynaLayer1, dynaLayer2;
require([
"dojo/dom",
"dojo/parser",
"dojo/on",
"dojo/_base/lang",
"esri/map",
"esri/geometry/Extent",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"agsjs/dijit/TOC",
"dijit/form/DropDownButton",
"dijit/DropDownMenu",
"dijit/MenuItem",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(dom, parser, on, lang,
Map, Extent, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
TOC, DropDownButton, DropDownMenu, MenuItem) {
parser.parse();
var initialExtent = new Extent({
xmin: -8119646.38042271,
ymin: 4986891.42830988,
xmax: -8102329.13378822,
ymax: 4999699.14992532,
"spatialReference": {
"wkid": 102100
}
});
map = new Map("map", {
extent: initialExtent,
smartNavigation: false,
slider: false
});
basemap = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
map.addLayer(basemap);
dynaLayer1 = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/NapervilleShelters/MapServer", {
opacity: 0.8
});
dynaLayer2 = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/LocalGovernment/Recreation/MapServer", {
opacity: 0.8
});
var h = map.on('LayersAddResult', lang.hitch(this, function(results) {
dynaLayer1.setVisibleLayers([0]);
dynaLayer2.setVisibleLayers([0, 1]);
try {
toc = new TOC({
map: map,
layerInfos: [{
layer: dynaLayer1,
title: "Contaminated Areas",
collapsed: true,
slider: false
}, {
layer: dynaLayer2,
title: "Other Constraints",
collapsed: true,
slider: false
}]
}, 'tocDiv');
toc.startup();
toc.on('load', function() {});
toc.on('TOCNodeChecked', function(rootLayer, serviceLayer, checked) {});
h.remove();
var myButton = new DropDownButton({
label: "Map Feature List",
dropDown: toc
});
dom.byId("header").appendChild(myButton.domNode);
var menu = new DropDownMenu({ style: "display: none;"});
var menuItem1 = new MenuItem({
label: "Identify Feature",
iconClass:"IdentifyIcon",
onClick: function(){ alert('Identify'); }
});
var menuItem2 = new MenuItem({
label: "Find Building",
iconClass:"FindIcon",
onClick: function(){ alert('Find'); }
});
menu.addChild(menuItem1);
menu.addChild(menuItem2);
var myButton2 = new DropDownButton({
label: "Identify Tools",
dropDown: menu
});
dom.byId("header").appendChild(myButton2.domNode);
} catch (e) {
alert(e);
}
}));
map.addLayers([dynaLayer1, dynaLayer2]);
});
</script>
</head>
<body class="claro">
<div id="content" data-dojo-type="dijit/layout/BorderContainer" design="headline" gutters="true">
<div id="tocDiv" style="display: none;"></div>
<div id="header"></div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" region="center"></div>
</div>
<div id="footer"></div>
</body>
</html>
