<!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" /> <script type="text/javascript"> var djConfig = { parseOnLoad: true }; </script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script> <style type="text/css" media="screen"> html, body { height: 100%; width: 100%; margin: 0; } body{ background-color:white; overflow:hidden; font-family: "Trebuchet MS"; } #header { background-image: url(../images/banner.jpg); background-repeat: repeat-x; margin: 2px; border: solid 4px #224a54; color:white; font-size:18pt; text-align:left; font-weight:bold; height:70px; } #subheader { font-size:small; color:white; padding-left:20px; } #rightPane{ background-color:white; color:#3f3f3f; border: solid 2px #224a54; width:20%; } #leftPane{ margin: 5px; padding:2px; background-color:white; color:#3f3f3f; border: solid 2px #224a54; width:20%; } #map { margin: 5px; border:solid 4px #224a54; -moz-border-radius: 4px; } #footer { margin: 2px; border: solid 2px #224a54; background-color:#ecefe4;color:#3f3f3f; font-size:10pt; text-align:center; height:40px; } .dijitTabInnerDiv{ background-color:#ecefe4; } #tabs{ padding:5px; } </style> <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"> <div id="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" > </div> </div> </div> <div id="map" dojotype="dijit.layout.ContentPane" region="center"> </div> <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" > </div> </div> </body> </html>
Are you trying to add a checkbox to the legend to toggle a layer on/off? Here's an example:<!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" /> <script type="text/javascript"> var djConfig = { parseOnLoad: true }; </script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script> <style type="text/css" media="screen"> html, body { height: 100%; width: 100%; margin: 0; } body{ background-color:white; overflow:hidden; font-family: "Trebuchet MS"; } #header { background-image: url(../images/banner.jpg); background-repeat: repeat-x; margin: 2px; border: solid 4px #224a54; color:white; font-size:18pt; text-align:left; font-weight:bold; height:70px; } #subheader { font-size:small; color:white; padding-left:20px; } #rightPane{ background-color:white; color:#3f3f3f; border: solid 2px #224a54; width:20%; } #leftPane{ margin: 5px; padding:2px; background-color:white; color:#3f3f3f; border: solid 2px #224a54; width:20%; } #map { margin: 5px; border:solid 4px #224a54; -moz-border-radius: 4px; } #footer { margin: 2px; border: solid 2px #224a54; background-color:#ecefe4;color:#3f3f3f; font-size:10pt; text-align:center; height:40px; } .dijitTabInnerDiv{ background-color:#ecefe4; } #tabs{ padding:5px; } </style> <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"> <div id="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" > </div> </div> </div> <div id="map" dojotype="dijit.layout.ContentPane" region="center"> </div> <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" > </div> </div> </body> </html>
infoTemplate = new esri.InfoTemplate("Building ID: ${BuidlingID}", "<tr><b>Address:</b> <td>${Address}\ <br><br><input type='checkbox' id='check1' onchange='moreInfo()'>More info"); var dynamicLayer = new esri.layers.FeatureLayer(dynamicUrl, { mode: esri.layers.FeatureLayer.MODE_ONDEMAND, infoTemplate: infoTemplate, outFields: ["*"] function moreInfo(){ if(document.getElementById("check1").checked==true){ .........additional code......... }