I believe the problem may be that you do not have an array created for legendLayers. Ex:var legendLayers = [];
Here is the code I was able to get to work with a hosted feature service from ArcGIS.com:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>
</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("dijit.layout.TabContainer");
dojo.require("esri.dijit.Legend");
dojo.require("esri.layers.FeatureLayer");
dojo.require("dijit.form.CheckBox")
var map;
function init() {
var initialExtent = new esri.geometry.Extent({"xmin":-8396836.868209211,"ymin":4835062.442691721,"xmax":-8328196.416809216,"ymax":4891396.53253782,"spatialReference":{"wkid":102100}});
map = new esri.Map("map", {
extent: initialExtent
});
dojo.connect(map, 'onLoad', function (map) {
dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
});
var basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
var referenceUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer";
var dynamicUrl = "http://services.arcgis.com/Fz6BBJUji5ArUSDM/arcgis/rest/services/Service_Requests/FeatureServer/0";
var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl);
var dynamicLayer = new esri.layers.FeatureLayer(dynamicUrl);
var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer(referenceUrl);
var legendLayers = [];
legendLayers.push({ layer: dynamicLayer, title: "Service Requests" });
dojo.connect(map, 'onLayersAddResult', function (results) {
//add the legend
var legend = new esri.dijit.Legend({
map: map,
layerInfos: legendLayers,
arrangement: esri.dijit.Legend.ALIGN_RIGHT
}, "legendDiv");
legend.startup();
});
map.addLayer(basemap);
map.addLayers([dynamicLayer, referenceLayer]);
dojo.connect(map, 'onLayersAddResult', function (results) {
//add check boxes
dojo.forEach(legendLayers, function (layer) {
var layerName = layer.title;
var checkBox = new dijit.form.CheckBox({
name: "checkBox" + layer.layer.id,
value: layer.layer.id,
checked: layer.layer.visible,
onChange: function (evt) {
var clayer = map.getLayer(this.value);
clayer.setVisibility(!clayer.visible);
this.checked = clayer.visible;
}
});
//add the check box and label to the toc
dojo.place(checkBox.domNode, dojo.byId("toggle"), "after");
var checkLabel = dojo.create('label', { 'for': checkBox.name, innerHTML: layerName }, checkBox.domNode, "after");
dojo.place("<br />", checkLabel, "after");
});
});
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline"
gutters="false" style="width:100%; height:100%;">
<div id="header" dojotype="dijit.layout.ContentPane" region="top">
This is the header section
<div id="subheader">subheader</div>
</div>
<div dojotype="dijit.layout.ContentPane" id="leftPane" region="left">
<div dojotype="dijit.layout.TabContainer" >
<div dojotype="dijit.layout.ContentPane" title = "Legend" selected="true">
<div id="toggle"></div>
<div id="legendDiv"></div>
</div>
<div dojotype="dijit.layout.ContentPane" title="Tab 2" >
Content for the second tab
</div>
</div>
</div>
<div id="map" dojotype="dijit.layout.ContentPane" region="center">
</div>
<div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" >
this is the footer section
</div>
</div>
</body>
</html>
