Ben,
Here is a sample that demos what you are wanting:
<!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>Layer List Dijit</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<style>
html,
body,
.container,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
margin: 0;
font-family: "Open Sans";
}
#map {
padding: 0;
}
#layerListPane {
width: 25%;
}
.esriLayer {
background-color: #fff;
}
.esriLayerList .esriList {
border-top: none;
}
.esriLayerList .esriTitle {
background-color: #fff;
border-bottom: none;
}
.esriLayerList .esriList ul {
background-color: #fff;
}
</style>
<script>
var dojoConfig = {
parseOnLoad: true
};
</script>
<script src="https://js.arcgis.com/3.18/"></script>
<script>
var _operLayers, theMap;
require([
"esri/arcgis/utils",
"esri/dijit/LayerList",
"dojo/on",
"dojo/_base/lang",
"dojo/_base/array",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
arcgisUtils,
LayerList,
on,
lang,
array
) {
arcgisUtils.createMap("f63fed3f87fc488489e27c026fa5d434", "map").then(function(response) {
theMap = response.map;
_operLayers = response.itemInfo.itemData.operationalLayers;
array.map(_operLayers, lang.hitch(this, function(lyr){
if(lyr.layerObject){
if(lyr.title === "NDFD_Precipitation"){
lyr.layerObject.setVisibility(true);
lyr.visibility = true;
}else{
lyr.layerObject.setVisibility(false);
lyr.visibility = false;
}
}
}));
var myWidget = new LayerList({
map: response.map,
layers: arcgisUtils.getLayerList(response)
}, "layerList");
myWidget.startup();
on(myWidget, "toggle", lang.hitch(this, function(evt){
array.map(myWidget.layers, function(layer, indx){
if(evt.visible){
if(indx !== evt.layerIndex){
layer.layer.setVisibility(false);
layer.visibility = false;
}
}
});
}));
});
});
</script>
</head>
<body class="claro">
<div class="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false">
<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="layerList"></div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>