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......... }
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>
<!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>
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.