Set check box initial load to unchecked??

MarkCunningham1 — Tue, 25 Mar 2014 15:05:07 GMT

I am wanting to set on initial load of the webmap the checkboxes for my layers to be unchecked(not display). Although I would still need specific layers turned on (Checked). I have gotten this far. You can just copy and paste the code in the Sandbox. Thanks for the help.

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>RssToggle</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: 100%; width: 100%; margin: 0; padding: 0; }   #map { height: 100%; margin: 0; padding: 0; }   #metaLegend {     position: absolute;     left: 20px;     bottom: 20px;     width: 20em;     height: 5em;     z-index: 40;     background: #fff;     color: #777;     padding: 5px;     border: 2px solid #666;     -webkit-border-radius: 5px;     -moz-border-radius: 5px;     border-radius: 5px;      font-family: arial;     font-size: 0.9em;   }   #metaLegend h3 {     color: #666;     font-size: 1.1em;     padding: 0px;     margin: 0px;     display: inline-block;   }  #metac {     position: absolute;     left: 20px;     bottom: 125px;     width: 20em;     height: 5em;     z-index: 40;     background: #fff;     color: #777;     padding: 5px;     border: 2px solid #666;     -webkit-border-radius: 5px;     -moz-border-radius: 5px;     border-radius: 5px;      font-family: arial;     font-size: 0.9em;   }    #metac h3 {     color: #666;     font-size: 1.1em;     padding: 0px;     margin: 0px;     display: inline-block;   } </style>  <script src="http://js.arcgis.com/3.8/"></script> <script>   var map;   require([     "esri/map",      "esri/layers/GeoRSSLayer",     "esri/InfoTemplate",     "dojo/parser",       "esri/layers/FeatureLayer",          "dojo/_base/array",               "esri/symbols/PictureMarkerSymbol",                "esri/renderers/SimpleRenderer",         "esri/dijit/Legend",         "dijit/form/CheckBox","dojo/dom", "dojo/dom-construct",      "dijit/layout/BorderContainer",     "dijit/layout/ContentPane",     "dojo/domReady!"   ], function(     Map, GeoRSSLayer, InfoTemplate,     parser, FeatureLayer,array, PictureMarkerSymbol, SimpleRenderer, Legend,CheckBox, dom, domConstruct   ) {     map = new esri.Map("map",{        basemap: "oceans",        center: [-122.399, 37.78],       zoom: 9     });      // create layout dijits     parser.parse();                     var cities = new FeatureLayer(                 "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0", {                     mode: FeatureLayer.MODE_ONDEMAND,                     outFields: ["*"]                 });      // var georssUrl = "http://geocommons.com/overlays/116926.atom"; // S.F. and East Bay Breweries http://geocommons.com/overlays/116926     var georss = new GeoRSSLayer("http://geocommons.com/overlays/116926.atom");      georss.on("load", function() {       //domStyle.set("loading", "display", "none");       // create an info template       var template = new InfoTemplate("${address}", "${zip}");       // set the info template for the feature layers that make up the GeoRSS layer       // the GeoRSS layer contains one feature layer for each geometry type       var layers = georss.getFeatureLayers();             var picRenderer = new PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Basic/RedShinyPin.png", 21, 21);             var georssRenderer = new SimpleRenderer(picRenderer);       array.forEach(layers, function(l) {          l.setInfoTemplate(template);          l.setRenderer(georssRenderer)       });     });           //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([georss,cities]);   }); </script> </head>  <body class="tundra"> <div data-dojo-type="dijit/layout/BorderContainer"       data-dojo-props="design:'headline',gutters:false"       style="width: 100%; height: 100%; margin: 0;">   <div id="map"         data-dojo-type="dijit/layout/ContentPane"         data-dojo-props="region:'center'">      <div id="metaLegend">             <h3>Legend</h3>       <br>       <div id="legendDiv"></div>      </div>     <div id="metac">             <h3>Layers</h3>       <br>        <div id="toggle" style="padding: 2px 2px;"></div>     </div> </div> </div>   </div>  </body> </html>

[ATTACH=CONFIG]32487[/ATTACH]

Re: Set check box initial load to unchecked??

JonathanUihlein — Tue, 25 Mar 2014 20:03:19 GMT

Have you tried setting the checked property of the checkbox to false after creation?

dijit.byId("this_is_the_id_of_your_checkbox").set("checked", false);

Re: Set check box initial load to unchecked??

TimWitt — Sun, 12 Dec 2021 16:50:04 GMT

Jamie,

you can also use the following code to not make layers visible and be unchecked, lets take your cities layer as example:

cities.setVisibility(false);

put this in your code, like shown below:

           var cities = new FeatureLayer(
                "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    outFields: ["*"]
                });
          cities.setVisibility(false);

This will make your city layer not visible and unchecked.

I hope this is what you are asking for.

Tim

Re: Set check box initial load to unchecked??

MarkCunningham1 — Wed, 26 Mar 2014 11:38:12 GMT

Thank you for the quick responses.

This is what I was looking for.

cities.setVisibility(false);

topic Re: Set check box initial load to unchecked?? in ArcGIS JavaScript Maps SDK Questions

Set check box initial load to unchecked??

Re: Set check box initial load to unchecked??

Re: Set check box initial load to unchecked??

Re: Set check box initial load to unchecked??