Rss Checkbox / Table of Contents map.on issue???
.png "JonathanUihlein"){kind=avatar}
Thank you for your response I decided to move in a slightly different direction. Where I scrapped the TOC widget and just went with the generate check-boxes. 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>HurricaneTracker</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: #000000;
}
#map {
height: 100%;
width:100%;
margin: 0;
padding: 0;
overflow: none;
}
legendDiv {
display: none;
}
.esriControlsBR {display:none;}
#header {
margin:0px;
padding: 0px;
text-align:right;
background: -webkit-gradient(linear, left top, left bottom, from(#005b8c), to(#1980b7));
background-color:#0072AF; color:#0072AF;
border: solid 1px #000000;
height: 56px;
}
#title {
font-size:150%;
color: #ffffff;
text-align:center;
margin: 2px;
}
#subfooter {
font-size:small;
color: #ffffff;
font-size:13px;
text-align:center;
margin: 2px;
}
#LayerDrop {
position: absolute;
top: 20px;
right: 20px;
z-index: 50;
}
#appToolbarButtons{
float: right;
vertical-align: middle;
}
#layerBTN {
vertical-align: right;
bottom: 15px;
cursor: pointer ;
margin-right: 5px;
z-index: 50;
cursor: pointer;
right: 10px;
width: 65px!important;
padding: 5px;
position: absolute;
-moz-box-shadow:inset 0px 0px 35px 0px #ccd8e0;
-webkit-box-shadow:inset 0px 0px 35px 0px #ccd8e0;
box-shadow: 1px 6px 12px #0093CA inset, -1px -10px 5px #00ACEC inset, 1px 2px 1px rgba(0, 0, 0, 0);
background-color: #00ACEC;
background:-moz-linear-gradient( center top, #145bb3 5%, #468ccf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#145bb3', endColorstr='#468ccf');
-webkit-border-top-left-radius:37px;
-moz-border-radius-topleft:37px;
border-top-left-radius:37px;
-webkit-border-top-right-radius:37px;
-moz-border-radius-topright:37px;
border-top-right-radius:37px;
-webkit-border-bottom-right-radius:37px;
-moz-border-radius-bottomright:37px;
border-bottom-right-radius:37px;
-webkit-border-bottom-left-radius:37px;
-moz-border-radius-bottomleft:37px;
border-bottom-left-radius:37px;
text-indent:0;
display:inline-block;
color:#FFFFFF;
font-family:Arial;
font-weight:bold;
font-style:normal;
text-decoration:none;
text-align:center;
text-shadow:0px 0px 0px #072038;
}
#LocateButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
#BasemapToggle {
position: absolute;
bottom: 30px;
left: 30px;
z-index: 50;
width:59px;
height:50px;
}
.BasemapToggle .basemapImage {
width:55px;
height:30px;
overflow:hidden;
}
</style>
<script src="http://js.arcgis.com/3.8/"></script>
<script>
var map;
require([
"dojo/parser",
"esri/map",
"esri/dijit/LocateButton",
"esri/dijit/BasemapToggle",
"esri/layers/KMLLayer",
"esri/InfoTemplate",
"esri/layers/FeatureLayer",
"dojo/_base/array",
"esri/symbols/PictureMarkerSymbol",
"esri/renderers/SimpleRenderer",
"esri/dijit/Legend",
"dijit/form/CheckBox", "dojo/dom", "dojo/dom-construct",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/Dialog",
"dojo/domReady!"
], function (parser,
Map, LocateButton, BasemapToggle, KMLLayer, InfoTemplate,
FeatureLayer, array, PictureMarkerSymbol, SimpleRenderer, Legend, CheckBox, dom, domConstruct
) {
map = new Map("map", {
basemap: "national-geographic",
fadeOnZoom: true,
center: [-80.013, 32.622],
zoom: 4
});
// create layout dijits
parser.parse();
geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();
var toggle = new BasemapToggle({
map: map,
basemap: "satellite"
}, "BasemapToggle");
toggle.startup();
var legendLayers = [];
var kmlUrl = "";
var kml = new KMLLayer(kmlUrl, {
id: "KML"
});
kml.setRefreshInterval(5);
var kmlHurricane = "";
var kmlH = new KMLLayer(kmlHurricane, {
id: "Hurricane"
});
kmlH.setRefreshInterval(10);
kmlH.setVisibility(false);
var kmlGaleURL = "";
var kmlGale = new KMLLayer(kmlGaleURL, {
id: "Gale"
});
kmlGale.setRefreshInterval(10);
kmlGale.setVisibility(false);
var kmlTropicalURL = "";
var kmlTropical = new KMLLayer(kmlTropicalURL, {
id: "Tropical"
});
kmlTropical.setRefreshInterval(3);
kmlTropical.setVisibility(false);
//////
var kmlRadarURL = "";
var kmlRadar = new KMLLayer(kmlRadarURL, {
id: "Radar"
});
kmlRadar.setRefreshInterval(7);
kmlRadar.setVisibility(false);
//////
var cities = new FeatureLayer(
mode: FeatureLayer.MODE_ONDEMAND,
id: "City",
outFields: ["*"]
});
cities.setVisibility(false);
///////////////////////////////////////////////////////////////////////////
////Add layers to Legend ////This Also Sets Order of Layers ////
legendLayers.push({ layer: cities, title: 'Cities' });
legendLayers.push({ layer: kmlH, title: 'Hurricane (64kt/73mph)' });
legendLayers.push({ layer: kmlGale, title: 'Gale (50kt/57mph)' });
legendLayers.push({ layer: kmlTropical, title: 'Tropical (34kt/ 39mph)' });
legendLayers.push({ layer: kmlRadar, title: 'Radar' });
legendLayers.push({ layer: kml, title: 'Path' });
//////////////////////////////////////////////////////////
///////////// Check-Box Created////////////////////////////////////
map.on('layers-add-result', function () {
//add check boxes
array.forEach(legendLayers, function (layer) {
var layerName = layer.title;
var checkBox = new CheckBox({
name: "checkBox" + layer.layer.id,
value: layer.layer.id,
checked: layer.layer.visible
});
checkBox.on("change", function () {
var targetLayer = map.getLayer(this.value);
targetLayer.setVisibility(!targetLayer.visible);
this.checked = targetLayer.visible;
});
//add the check box and label to the TOC
domConstruct.place(checkBox.domNode, "toggle",
"after");
var checkLabel = domConstruct.create('label', {
'for': checkBox.name,
innerHTML: layerName
}, checkBox.domNode, "after");
domConstruct.place("<br /><hr/>", checkLabel,
"after");
});
});
map.addLayers([cities, kml, kmlH, kmlGale, kmlTropical, kmlRadar]);
});
</script>
</head>
<body class="tundra">
<div id="content" data-dojo-type="dijit/layout/BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
<div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div id="title">Tropical Tracker
<div id="subfooter"> </div>
</div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" region="center">
<div id="appToolbarButtons">
<button id="layerBTN" type="button" onClick="myLayersDialog.show();"> Layers</button>
</div>
<div id="LocateButton"></div>
<div id="BasemapToggle"></div>
</div>
</div>
</div>
<!--Start Layers Dialog Btn -->
<div data-dojo-type="dijit/Dialog" data-dojo-id="myLayersDialog" style="width: 260px; height: 25em; overflow: auto;" title="Layers">
<div id="toggle" style="padding: 2px 2px;"></div>
<div class="dijitDialogPaneActionBar">
<button data-dojo-type="dijit/form/Button" type="button" onClick="myLayersDialog.hide()">OK</button>
</div>
</div>
<!--Start Legend Dialog BTN -->
</body>
</html>
