Problem setting visibility of layers in a MapServe

GeorgePeters · ‎08-19-2013

I am trying to set the visibility of layers from a MapService based upon whether they contain the phrase "lidar" in the name field. Here is the problem code, first. Also, I have some code that works, but can't seem to make it work in the first. The working code is second:

Any help would be appreciated.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"> 
    <!--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></title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css" />
    <link rel="stylesheet" href="css/layout.css"/> 

    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://js.arcgis.com/3.6/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("dijit.layout.TabContainer");
      dojo.require("esri.dijit.Legend");
      
      var layer, map, visible = [];

      function init() {
        
        map = new esri.Map("map", {
          center: [-90.000, 30.000],
          zoom: 6
        });
        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 basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl);
        var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer(referenceUrl);
        layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://www.csc.noaa.gov/ArcGISPUB/rest/services/USInteragencyElevation_Inventory/USInteragencyElevationInventory/MapServer");


        map.addLayer(basemap);
        map.addLayer(referenceLayer);

        var items = dojo.map(layer.layerInfos,function(info,index){
          re = /^.*lidar.*$/i
          validLidarLayer = re.exec(info.name);
          if (validLidarLayer) {
            visible.push(info.id);
            return "<input type='checkbox' class='list_item'" + (info.defaultVisibility ? "checked=checked" : "") + "' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label>";
          }
          return " ";
        });

//        dojo.byId("layer_list").innerHTML = items.join(' ');

        layer.setVisibleLayers(visible);
        map.addLayer(layer);
      }




      function buildLayerList(layer) {
        var items = dojo.map(layer.layerInfos,function(info,index){
          re = /^.*lidar.*$/i
          validLidarLayer = re.exec(info.name);
          if (validLidarLayer) {
            visible.push(info.id);
            return "<input type='checkbox' class='list_item'" + (info.defaultVisibility ? "checked=checked" : "") + "' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label>";
          }
          return " ";
        });

        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.ready(init);


    </script>
  </head>
  
  <body class="claro">
    <div id="mainWindow" 
         data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline', gutters:false" 
         style="width:100%; height:100%;">

      <div id="header" 
           data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">

        This is the header section
       <div id="subheader">subheader</div>

      </div>
      <div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'left'">
        <div data-dojo-type="dijit.layout.TabContainer">

          <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Legend', selected:true">
            <div id="legendDiv"></div>
          </div>

          <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Tab 2'" >
            Content for the second tab
          </div>

        </div>
      </div>

      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>

      <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
        this is the footer section
      </div>
      
    </div>
  </body>

</html>

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <!--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" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
 
    <script src="http://js.arcgis.com/3.6/"></script>

    <script>
      dojo.require("esri.map");

      var layer, map, visible = [];

      function init() {
        map = new esri.Map("map", {
          center: [-90.000, 30.000],
          zoom: 6
        });
        layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://www.csc.noaa.gov/ArcGISPUB/rest/services/USInteragencyElevation_Inventory/USInteragencyElevationInventory/MapServer");
        var basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl);
        map.addLayer(basemap);

        if (layer.loaded) {
          buildLayerList(layer);
        } else {
          dojo.connect(layer, "onLoad", buildLayerList);
        }
      }

      function buildLayerList(layer) {
        var items = dojo.map(layer.layerInfos,function(info,index){
          re = /^.*lidar.*$/i
          validLidarLayer = re.exec(info.name);
          if (validLidarLayer) {
            visible.push(info.id);
            return "<input type='checkbox' class='list_item'" + (info.defaultVisibility ? "checked=checked" : "") + "' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label>";
          }
//        return " ";
        });

        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.ready(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>