Not recognizing different layer id's.

BarryGuidry · ‎07-30-2012

I am following the sample on ESRIs site here, but my web application displays both layers together for each instance I list in the html. What I am ending up with is both layers listed in the legend twice. Additionally, for each layer available to toggle on/off, in the second pane of the "AccordionContainer", each one activates both layers as well. A sample of my current html is below. I can add my dynamic layer to this sample, which works with it but cannot figure out how to add it's functionality my map format.

<!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" />  
    <!--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>
 Building Finder
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/Nihilo/Nihilo.css">
    <style type="text/css">
  html, body { 
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      } 
      body{
        background-color:white; overflow:hidden; 
        font-family: "Kimberley", sans-serif
      } 
      #header {
       -moz-border-radius: 5px;
        margin:2px;
        padding-top: 4px;
        padding-right: 15px;
        background-color:beige; 
        color:#421b14; 
        font-size:16pt; text-align:right;font-weight:bold;
        border: solid 2px #79663b;
        height:55px;
      }
   #infospace {
   font-size:small;
        color: #cfcfcf;
        text-align:right;
        padding-right:20px;
      }
      #subheader {
        font-size:small;
        color: #cfcfcf;
        text-align:right;
        padding-right:20px;
      }
      #footer {
        margin:2px;
        padding: 2px;
        background-color:white; color:#2a3537;
        border: solid 2px #79663b;
        font-size:10pt; text-align:center;
        height: 30px;
      }
      #leftPane{
        margin:3px;
        padding:5px;
        width:150px;
        color:#3C1700;
        background-color:white;
        border: solid 2px #79663b;
      }
   #legendPane{ 
        border: solid #97DCF2 1px; 
      } 
      #map {
        margin:5px;
        border:solid 4px #79663b;
      }
 #logo {
 position:absolute;
 bottom:20px;
 right:20px;
 z-index:100; 
 width:50px; 
 heigth:50px;
      }
   .shadow{
        -o-border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        box-shadow: 8px 8px 16px #323834;
        -webkit-box-shadow: 8px 8px 16px #323834;
        -moz-box-shadow: 8px 8px 16px #323834;
        -o-box-shadow: 8px 8px 16px #323834;
      }
     .nihilo .dijitAccordionText {
        margin-left:4px;
        margin-right:4px;
        color:#5c8503;
      }
    </style>
    <script type="text/javascript">var djConfig = {parseOnLoad: true};
   </script>
 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5">
    </script>
    <script type="text/javascript">
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.AccordionContainer");
      dojo.require("esri.map");
   dojo.require("esri.dijit.Legend"); 
   dojo.require("esri.layers.FeatureLayer"); 
   dojo.require("esri.virtualearth.VETiledLayer");
      dojo.require("dijit.TitlePane");
      dojo.require("esri.dijit.BasemapGallery");
      dojo.require("esri.arcgis.utils");
   dojo.require("dijit.dijit-all");
      dojo.require("dijit.form.CheckBox");
   
      var map
   var legendLayers = [];
   
   function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-11313409,"ymin":4196000,"xmax":-11300000,"ymax":4216000,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{extent:initExtent, logo: false});

        var initBasemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); //May change "World_Street_Map" to other default
        map.addLayer(initBasemap);
    
  var buildings = new esri.layers.ArcGISDynamicMapServiceLayer("https://<server>/arcgis/rest/services/<service>/MapServer", {id:'0',
                  mode: esri.layers.FeatureLayer.MODE_ONDEMAND, 
          outFields: ["*"] 
        }); 
   legendLayers.push({layer:buildings,title:"Buildings"}); //adds the "Buildings" layer to toggle on/off
  
  var roads = new esri.layers.ArcGISDynamicMapServiceLayer("https://<server>/arcgis/rest/services/<service>/MapServer", {id:'1',
        mode: esri.layers.FeatureLayer.MODE_ONDEMAND, 
          outFields: ["*"] 
        }); 
    legendLayers.push({layer:roads,title:"Roads"}); //adds the "Roads" layer to toggle on/off
         
        //add the legend 
        dojo.connect(map,'onLayersAddResult',function(results){ 
          var layerInfo = dojo.map(results, function(layer,index){ 
            return {layer:layer.layer,title:layer.layer.name}; 
          }); 
          if(layerInfo.length > 0){ 
            var legendDijit = new esri.dijit.Legend({ 
              map:map, 
              layerInfos:layerInfo 
            },"legendDiv"); 
            legendDijit.startup(); 
          } 
        }); 

    map.addLayers([roads,buildings]);
 
 dojo.connect(map,'onLayersAddResult',function(results){ 
          
        //add check boxes  
        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"); 
        }); 
 
        }); 
         
        createBasemapGallery();
        
        //resize the map when the browser resizes
        dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
      }

      function createBasemapGallery() {
        //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
        var basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: true,
          bingMapsKey: '',           
map: map
        }, "basemapGallery");

        basemapGallery.startup();
        
        dojo.connect(basemapGallery, "onError", function(msg) {console.log(msg)});
      }
   
   var configOptions;
    
      //show map on load 
   dojo.addOnLoad(init);
    </script>
 </head>
  <body class="nihilo">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;">
      <div id="header" dojotype="dijit.layout.ContentPane" region="top" >
   <!--<a href="http://www.pantex.com"><img id="logo" src="//Path/to/image.png"/></a>-->
        Building Finder
       <!--<div id="subheader">with a subheader</div>-->
      </div>
   <div id="infospace">
       
  </div>

      <div dojotype="dijit.layout.ContentPane" region="left" id="leftPane" >
      <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="Layer interactivity" > 
            <span style="padding:10px 0;">Click to toggle the visibilty of the various layers</span> 
            <div id="toggle" style="padding: 2px 2px;"></div> 
        </div>
        <div dojoType="dijit.layout.ContentPane" title="pane 3">
          <p>Content for pane 3</p>
        </div>
      </div>
      </div>
       <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" >
        <div id="links">
   
     <div class=fleft>
  <a href="http://www.website.com/about/index.htm">About</a>|
     <a href="javascript:openTab(1);void(0);">Legend</a>  |
  <a href="javascript:openTab(2);void(0);">How to Use</a>  |
  <a href="javascript:openTab(3);void(0);">Disclaimer</a>|
  <a href="javascript:openTab(4);void(0);">Contact Info</a>
  </div>
    
     <div class=clear></div>
 
      </div>
      </div>
     <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;">
           <a href="http://www.website.com"><img id="logo" src="//Path/to/image.png"/></a> 
     <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false"  open="false">
          <div dojoType="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
          <div id="basemapGallery" ></div>
   </div>
    </div>
  </body>
</html>

MostafaFouly · ‎07-30-2012

Hi,
try using setVisibleLayers method instead. it sets the visible layers of the exported map.

in the foreach loop, get the ids for the layers that you want to setVisibility, and apply the "setVisibleLayers" method.

BarryGuidry · ‎07-31-2012

Rather than trying to add the layer functionality from the sample "Natural Disasters", I have added my dynamic layer and map format to the sample, which works correctly.