bg3075

Not recognizing different layer id's.

Discussion created by bg3075 on Jul 30, 2012
Latest reply on Jul 31, 2012 by bg3075
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>

Outcomes