Dynamically create layer list example

NathalieNeagle · ‎05-09-2012

I'm using the create Dynamically create layer list example in my application:
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/map_dynamiclayerlist.html

It works O.K. but it is not respecting my layer rest setting Default Visibility. When I published my msd I had several layers turned off and if I check the rest of these layers I can see the Default Visibility is set to False (Default Visibility: False).

All my layers are checked and drawing and i don't want this. I want to have it respect my Default Visibility settings or at the very least hard code a few layers to not draw on initial load.

Am I missing something???

Thanks
Nathalie

ThaoLe · ‎05-11-2012

There's a problem with the code in the sample. Specifically this line below:

return "<input type='checkbox' class='list_item' checked='" + (info.defaultVisibility ? "checked" : "") + "' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label>";

Using checked='' is the same as using checked='checked'. I corrected the code. Here's the correct code for the line:

return "<input type='checkbox' class='list_item' " + (info.defaultVisibility ? " checked='checked'" : "") + " id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label>";

Here's the full code. If this still doesn't work for you then try using a MXD rather than MSD.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <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>Dynamically Create Map Service Layer List</title>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>     <script type="text/javascript">          dojo.require("esri.map");          var layer, map, visible = [];          function init() {             map = new esri.Map("map");             layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://le/ArcGIS/rest/services/USA/MapServer");              if (layer.loaded) {                 buildLayerList(layer);             }             else {                 dojo.connect(layer, "onLoad", buildLayerList);             }         }          function buildLayerList(layer) {             var items = dojo.map(layer.layerInfos, function (info, index) {                 if (info.defaultVisibility) {                     visible.push(info.id);                 }                 var inputString = "<input type='checkbox' class='list_item' " + (info.defaultVisibility ? " checked='checked'" : "") + " id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label>";                 return inputString;             });              dojo.byId("layer_list").innerHTML = items.join();              layer.setVisibleLayers(visible);             map.addLayer(layer);          }          function updateLayerVisibility() {             var inputs = dojo.query(".list_item"), input;              visible = [];              dojo.forEach(inputs, function (input) {                 if (input.checked) {                     visible.push(input.id);                 }             });             //if there aren't any layers visible set the array to be -1             if (visible.length === 0) {                 visible.push(-1);             }             layer.setVisibleLayers(visible);         }          dojo.addOnLoad(init);      </script> </head> <body>     This sample loads an ArcGISDynamicMapServiceLayer.<br />     It determines the layers in the map service and presents them as checkboxes that     can be used to toggle their visibility.<br />     <br />     Layer List : <span id="layer_list"></span>     <br />     <br />     <div id="map" class="claro" style="width: 600px; height: 400px; border: 1px solid #000;">     </div> </body> </html>

View solution in original post

ThaoLe · ‎05-11-2012

There's a problem with the code in the sample. Specifically this line below:

return "<input type='checkbox' class='list_item' checked='" + (info.defaultVisibility ? "checked" : "") + "' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label>";

Using checked='' is the same as using checked='checked'. I corrected the code. Here's the correct code for the line:

return "<input type='checkbox' class='list_item' " + (info.defaultVisibility ? " checked='checked'" : "") + " id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label>";

Here's the full code. If this still doesn't work for you then try using a MXD rather than MSD.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <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>Dynamically Create Map Service Layer List</title>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>     <script type="text/javascript">          dojo.require("esri.map");          var layer, map, visible = [];          function init() {             map = new esri.Map("map");             layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://le/ArcGIS/rest/services/USA/MapServer");              if (layer.loaded) {                 buildLayerList(layer);             }             else {                 dojo.connect(layer, "onLoad", buildLayerList);             }         }          function buildLayerList(layer) {             var items = dojo.map(layer.layerInfos, function (info, index) {                 if (info.defaultVisibility) {                     visible.push(info.id);                 }                 var inputString = "<input type='checkbox' class='list_item' " + (info.defaultVisibility ? " checked='checked'" : "") + " id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label>";                 return inputString;             });              dojo.byId("layer_list").innerHTML = items.join();              layer.setVisibleLayers(visible);             map.addLayer(layer);          }          function updateLayerVisibility() {             var inputs = dojo.query(".list_item"), input;              visible = [];              dojo.forEach(inputs, function (input) {                 if (input.checked) {                     visible.push(input.id);                 }             });             //if there aren't any layers visible set the array to be -1             if (visible.length === 0) {                 visible.push(-1);             }             layer.setVisibleLayers(visible);         }          dojo.addOnLoad(init);      </script> </head> <body>     This sample loads an ArcGISDynamicMapServiceLayer.<br />     It determines the layers in the map service and presents them as checkboxes that     can be used to toggle their visibility.<br />     <br />     Layer List : <span id="layer_list"></span>     <br />     <br />     <div id="map" class="claro" style="width: 600px; height: 400px; border: 1px solid #000;">     </div> </body> </html>

derekswingley1 · ‎05-11-2012

Thanks, Thang. We'll update the sample.