<!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,IE=9" /> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>Cardno Web-Mapping</title> <!-- Add ESRI style --> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"> <!-- Add Custom style --> <link rel="stylesheet" type="text/css" href="cardno.css"> <!-- Required for dijits --> <script type="text/javascript">var djConfig = {parseOnLoad: true};</script> <!-- Add ESRI Javascript API --> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script> <script type="text/javascript"> // Add Dojo elements dojo.require("dijit.dijit"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.AccordionContainer"); dojo.require("dijit.TitlePane"); dojo.require("dojo.parser"); dojo.require("esri.map"); dojo.require("esri.dijit.Legend"); dojo.require("esri.dijit.Measurement"); dojo.require("esri.SnappingManager"); dojo.require("esri.arcgis.utils"); dojo.require("dijit.form.CheckBox"); var map; var legendLayers = []; function init() { // Set initial extent var startExtent = new esri.geometry.Extent(-115.489, 42.973, -115.317, 43.066, new esri.SpatialReference({wkid:4326}) ); // Create map map = new esri.Map("map", { extent: startExtent }); // Add base layer var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"); map.addLayer(basemap); // Setup Dynamic layer var projLayers = new esri.layers.ArcGISDynamicMapServiceLayer("http://map.entrix.com/ArcGIS/rest/services/IdahoWind/IdahoWind/MapServer",{id:'proj'}); // Push layers to Legend legendLayers.push({layer:projLayers,title:'Project Data'}); // Add Legend dojo.connect(map,'onLayersAddResult',function(results){ var legend = new esri.dijit.Legend({ map:map, layerInfos:legendLayers },"legendDiv"); legend.startup(); }); // Add layers to map map.addLayers([projLayers]); // Add checkboxes dojo.connect(map,'onLayersAddResult',function(results){ 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"); }); }); // Add Measurement Widget var measurement = new esri.dijit.Measurement({ map: map }, dojo.byId('measurementDiv')); measurement.startup(); dojo.connect(map, 'onLoad', function(theMap) { //resize the map when the browser resizes dojo.connect(dijit.byId('map'), 'resize', map,map.resize); }); }; dojo.addOnLoad(init); </script> </head> <body class="claro"> <div dojoType="dijit.layout.BorderContainer" design="headline" style="width: 100%; height: 100%;"> <div dojotype="dijit.layout.ContentPane" region="top"> <span> This is the header section </span> </div> <div id="leftPane" dojotype="dijit.layout.ContentPane" region="left" style="width: 300px;"> <div dojoType="dijit.layout.AccordionContainer"> <div dojoType="dijit.layout.ContentPane" id="legendPane" title="Legend" selected="true"> <div id="legendDiv"></div> </div> <div dojoType="dijit.layout.ContentPane" title="Natural Disasters" > <span style="padding:10px 0;">Click to toggle the visibilty of the various natural disasters</span> </div> <div id="toggle" style="padding: 2px 2px;"></div> </div> </div> <div dojotype="dijit.layout.ContentPane" region="center"> <div id="map"></div> </div> <div dojotype="dijit.layout.ContentPane" region="right" style="width: 100px;"> This is the right section </div> <div dojotype="dijit.layout.ContentPane" region="bottom"> This is the bottom section </div> </div> </body> </html>
<div dojoType="dijit.layout.AccordionContainer"> <div dojoType="dijit.layout.ContentPane" id="legendPane" title="Legend" selected="true"> <div id="legendDiv"></div> </div> <div dojoType="dijit.layout.ContentPane" title="Natural Disasters" > <span style="padding:10px 0;">Click to toggle the visibilty of the various natural disasters</span> </div> <div id="toggle" style="padding: 2px 2px;"></div> </div>
<div dojoType="dijit.layout.AccordionContainer"> <div dojoType="dijit.layout.ContentPane" id="legendPane" title="Legend" selected="true"> <div id="legendDiv"></div> </div> <div dojoType="dijit.layout.ContentPane" title="Natural Disasters" > <span style="padding:10px 0;">Click to toggle the visibilty of the various natural disasters</span> <div id="toggle" style="padding: 2px 2px;"></div> </div> </div>
<!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,IE=9" /> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>Cardno Web-Mapping</title> <!-- Add ESRI style --> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"> <!-- Add Custom style --> <link rel="stylesheet" type="text/css" href="cardno.css"> <!-- Required for dijits --> <script type="text/javascript">var djConfig = {parseOnLoad: true};</script> <!-- Add ESRI Javascript API --> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script> <script type="text/javascript"> // Add Dojo elements dojo.require("dijit.dijit"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.AccordionContainer"); dojo.require("dijit.TitlePane"); dojo.require("dojo.parser"); dojo.require("esri.map"); dojo.require("esri.dijit.Legend"); dojo.require("esri.dijit.Measurement"); dojo.require("esri.SnappingManager"); dojo.require("esri.arcgis.utils"); dojo.require("dijit.form.CheckBox"); var map; var legendLayers = []; function init() { // Set initial extent var startExtent = new esri.geometry.Extent(-115.489, 42.973, -115.317, 43.066, new esri.SpatialReference({wkid:4326}) ); // Create map map = new esri.Map("map", { extent: startExtent }); // Add base layer var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"); map.addLayer(basemap); // Setup project layers and push to Legend var HammettHillWTGs_pts = new esri.layers.FeatureLayer("http://map.entrix.com/ArcGIS/rest/services/IdahoWind/IdahoWind/FeatureServer/24",{id:'Turbines'}); legendLayers.push({layer:HammettHillWTGs_pts,title:'Turbines'}); var HammettHillWindFarm_poly = new esri.layers.FeatureLayer("http://map.entrix.com/ArcGIS/rest/services/IdahoWind/IdahoWind/FeatureServer/27",{id:'Boundary'}); legendLayers.push({layer:HammettHillWindFarm_poly,title:'Hammett Hill Boundary'}); // Add Legend dojo.connect(map,'onLayersAddResult',function(results){ var legend = new esri.dijit.Legend({ map:map, layerInfos:legendLayers },"legendDiv"); legend.startup(); }); // Add layers to map map.addLayers([HammettHillWTGs_pts,HammettHillWindFarm_poly]); // Add checkboxes dojo.connect(map,'onLayersAddResult',function(results){ 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"); }); }); // Add Measurement Widget var measurement = new esri.dijit.Measurement({ map: map }, dojo.byId('measurementDiv')); measurement.startup(); dojo.connect(map, 'onLoad', function(theMap) { //resize the map when the browser resizes dojo.connect(dijit.byId('map'), 'resize', map,map.resize); }); }; dojo.addOnLoad(init); </script> </head> <body class="claro"> <div dojoType="dijit.layout.BorderContainer" design="headline" style="width: 100%; height: 100%;"> <div dojotype="dijit.layout.ContentPane" region="top"> <span>Mountain Air Wind</span> </div> <div id="leftPane" dojotype="dijit.layout.ContentPane" region="left" style="width: 300px;"> <div dojoType="dijit.layout.AccordionContainer"> <div dojoType="dijit.layout.ContentPane" id="legendPane" title="Legend" selected="true"> <div id="legendDiv"></div> </div> <div dojoType="dijit.layout.ContentPane" title="Natural Disasters" > <span style="padding:10px 0;">Click to toggle the visibilty of the various natural disasters</span> <div id="toggle" style="padding: 2px 2px;"></div> </div> </div> </div> <div dojotype="dijit.layout.ContentPane" region="center"> <div id="map"></div> </div> <div dojotype="dijit.layout.ContentPane" region="right" style="width: 100px;"> This is the right section </div> <div dojotype="dijit.layout.ContentPane" region="bottom" style="height: 200px;"> This is the bottom section </div> </div> </body> </html>
var mapLayers = []; //array of layers in client map - for feature layers to map
var yourFeatureLayer = new esri.layers.FeatureLayer("http://yourserver/ArcGIS/rest/services/yourFeatureLayer/FeatureServer/1", { mode: esri.layers.FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); mapLayers.push(yourFeatureLayer);
// ************* THIS IS THE CODE to make the checkboxes turn on and off the feature layer **************************** function layerVisibility(layer) { (layer.visible) ? layer.hide() : layer.show(); }
<div dojoType="dijit.layout.ContentPane" title="Toggle Layers" selected="true" > <span style="padding:10px 0;">Click to toggle the visibilty of layers</span> <br/> <input type="checkbox" checked="true" onchange="layerVisibility(mapLayers[0]);"/>TitleNameOfYourFeatureLayer <br/> <span id="toggle"></span> </div>