AnsweredAssumed Answered

Can't get checkbox to work

Question asked by timw1984dev on Feb 10, 2014
Latest reply on Feb 10, 2014 by timw1984dev
Hey everybody,

I was looking at this example, that lets me toggle layers via checkboxes. I tried to implement it into my application, but I just can't get it to work. Everything works, but the checkboxes won't show up in my TOC.

<!DOCTYPE html> <html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <!--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>Map with legend</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: 97%;       width: 98%;       margin: 1%;     }      #rightPane {       width: 30%;     }      #pane1 {       border: solid #97DCF2 1px;     }     #header{       border: solid #C0C0C0 2px;       background-color:#C0C0C0     }     #HomeButton {       position: absolute;       top: 98px;       left: 26px;       z-index: 50;     }     #legendPane {       border: solid #97DCF2 1px;     }   </style>      <script src="http://js.arcgis.com/3.8/"></script>   <script>      var map;     require([             "dojo/parser", "esri/map", "esri/dijit/HomeButton", "esri/layers/FeatureLayer", "dojo/on", "esri/dijit/Legend", "dojo/_base/array", "dijit/form/CheckBox",  "esri/dijit/BasemapGallery", "esri/dijit/Geocoder",             "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/geometry/screenUtils", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dojo/domReady!"     ], function(       parser, Map, HomeButton, FeatureLayer, on, Legend, array, CheckBox, BasemapGallery, Geocoder, Graphic, SimpleMarkerSymbol, screenUtils, Color,  domConstract, BorderContainer, ContentPane, AccordionContainer     ) {       parser.parse();       //Create the map       var map = new Map("map", {         center: [-80.734, 28.297],         zoom: 10,         basemap: "topo"       });       //Add a home button       var home = new HomeButton({         map:map       }, "HomeButton");       home.startup();       //Add Feature Layers        var cities = new FeatureLayer(           "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0", {           mode: FeatureLayer.MODE_ONDEMAND,           outFields: ["*"]       });       var rivers = new FeatureLayer(           "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/1", {           mode: FeatureLayer.MODE_ONDEMAND,           outFields: ["*"]       });       var states = new FeatureLayer(           "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/2", {           mode: FeatureLayer.MODE_ONDEMAND,           opacity: 0.5,           outFields: ["*"]       });              //add the legend       map.on("layers-add-result", function (evt) {           var layerInfo = array.map(evt.layers, function (layer,           index) {               return {                   layer: layer.layer,                   title: layer.layer.name               };           });           if (layerInfo.length > 0) {               var legendDijit = new Legend({                   map: map,                   layerInfos: layerInfo               }, "legendDiv");               legendDijit.startup();           }                 //add check boxes           array.forEach(layerInfo,            function (layer) {               var layerName = layer.title;               var checkBox = new 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               domConstruct.place(checkBox.domNode, "toggle",                   "after");               var checkLabel = domConstruct.create('label', {                   'for': checkBox.name,                   innerHTML: layerName               }, checkBox.domNode, "after");               domConstruct.place("<br />", checkLabel,                   "after");           });       });       map.addLayers([states, rivers, cities]);       //Create the Basemap       var basemapGallery = new BasemapGallery({         showArcGISBasemaps: true,         map: map       }, "basemapGallery");       basemapGallery.startup();       basemapGallery.on("error", function(msg) {         console.log("basemap gallery error:  ", msg);                  });       //Create the Address Search       geocoder = new Geocoder ({         arcgisGeocoder: false,         geocoders: [ {           url: "http://<server URL>/gissrv/rest/services/Geocode/Address_Locator_WKID2881/GeocodeServer",           name: "Brevard County",           placeholder: "Find a place",           outfields: "*",         }],         map:map       }, "search");       geocoder.startup();       geocoder.on("select", showLocation);       // Zoom to the result and put a point       function showLocation(evt) {         map.graphics.clear();         var point = evt.result.feature.geometry;         var symbol = new SimpleMarkerSymbol()           .setStyle("square")           .setColor(new Color([255,0,0,0.5]));         var graphic = new Graphic(point, symbol);         map.graphics.add(graphic);          map.infoWindow.setTitle("Search Result");         map.infoWindow.setContent(evt.result.name);         map.infoWindow.show(evt.result.feature.geometry);       };     });   </script>  </head> <body class="tundra"> <!--[if IE 7]> <style>   html, body {     margin: 0;   } </style> <![endif]--> <div id="content"      data-dojo-type="dijit/layout/BorderContainer"      data-dojo-props="design:'headline', gutters:true"      style="width: 100%; height: 100%; margin: 0;">   <div id="header"        data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">       <strong>Brevard County Test Map</strong>   </div>       <div id="rightPane"        data-dojo-type="dijit/layout/ContentPane"        data-dojo-props="region:'left'">      <div data-dojo-type="dijit/layout/AccordionContainer">       <div data-dojo-type="dijit/layout/ContentPane" id="pane1"            data-dojo-props="title:'Base Maps', selected:false">         <div id="basemapGallery"></div>       </div>       <div data-dojo-type="dijit/layout/ContentPane"            data-dojo-props="title:'Address Search'">         <div id="search"></div>         i.e. 2725 Judge Fran Jamieson Way, Melbourne       </div>       <div data-dojo-type="dijit/layout/ContentPane"            data-dojo-props="title:'Layers'">           <span style="padding: 10px 0;">Click to toggle each layer on or off</span>           <div id="toggle" style="padding: 2px 2px;"></div>       </div>       <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"            data-dojo-props="title:'Legend', selected:true">         <div id="legendDiv"></div>       </div>     </div>   </div>   <div id="map"        data-dojo-type="dijit/layout/ContentPane"        data-dojo-props="region:'center'"        style="overflow:hidden;">   <div id="HomeButton"></div>        </div>  </div> </body>  </html>


Any help would be greatly appreciated!

Tim

Outcomes