AnsweredAssumed Answered

TOC Legend widget/Basemap widget isn't working for me

Question asked by rachellinonis on Apr 25, 2012
Latest reply on Apr 30, 2012 by esrijay
Hey everyone,

I'm trying to incorporate this TOC example with this Basemap example - using buttons. I got the TOC working (you won't be able to see the layer because its on my server, but I can see it from my end). I can't seem to get the basemaps to work at all.

I can't seem to figure out what I'm missing here? I'm starting towards the bottom since my code is really long.

        </script>         <script type="text/javascript" src=""></script>         <script type="text/javascript">             dojo.require("dijit.dijit");             dojo.require("dijit.layout.BorderContainer");             dojo.require("dijit.layout.ContentPane");             // uncomment if want dojo widget style checkbox             //dojo.require('dijit.form.CheckBox');             dojo.require("");             dojo.require("dijit.layout.AccordionContainer");             dojo.require("agsjs.dijit.TOC");             dojo.require("esri.dijit.BasemapGallery");             dojo.require("dijit.Tooltip");             dojo.require("dijit.form.Button");             dojo.require("dijit.Menu");          </script>         <script type="text/javascript">             var map, basemapGallery;             var bingKey = 'Enter your Bing Maps Key';             function init() {                 var initialExtent = new esri.geometry.Extent({                     "xmin" : -123.5328,                     "ymin" : 32.4344,                     "xmax" : -112.2582,                     "ymax" : 37.64041,                     "spatialReference" : {                         "wkid" : 102100                     }                 });                 map = new esri.Map("map", {                     extent : esri.geometry.geographicToWebMercator(initialExtent),                 });                  //Add the terrain service to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service                 //var grayBasemapLayer = new esri.layers.ArcGISTiledMapServiceLayer("");                 //map.addLayer(grayBasemapLayer);                  var census = new esri.layers.ArcGISDynamicMapServiceLayer("", {                     id : 'census',                     opacity : 0.8                 });                 //var safety = new esri.layers.ArcGISDynamicMapServiceLayer("", {                 //    id : 'publicsafety',                 //    opacity : 0.8                 //});                  dojo.connect(map, 'onLayersAddResult', function(results) {                      var toc = new agsjs.dijit.TOC({                         map : map,                         layerInfos : [{                             //layer: safety,                             //title: "Safety Operations"                             //},{                             layer : census,                             title : "Partnerships"                         }]                     }, 'tocDiv');                     toc.startup();                  });                 //map.addLayers([census, safety]);                 map.addLayers([census]);                  //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in                 //the following help topic for more details                 var resizeTimer;                  createBasemapGallery();                  dojo.connect(map, 'onLoad', function(theMap) {                     dojo.connect(dijit.byId('map'), 'resize', function() {//resize the map if the div is resized                         clearTimeout(resizeTimer);                         resizeTimer = setTimeout(function() {                             map.resize();                             map.reposition();                         }, 500);                     });                 });             }              function createBasemapGallery() {                 //Manually create a list of basemaps to display                 var basemaps = [];                 var basemapRoad = new esri.dijit.Basemap({                     layers : [new esri.dijit.BasemapLayer({                         type : "BingMapsRoad"                     })],                     id : "bmRoad",                     title : "Road"                 });                 basemaps.push(basemapRoad);                 var basemapAerial = new esri.dijit.Basemap({                     layers : [new esri.dijit.BasemapLayer({                         type : "BingMapsAerial"                     })],                     id : "bmAerial",                     title : "Aerial"                 });                 basemaps.push(basemapAerial);                 var basemapHybrid = new esri.dijit.Basemap({                     layers : [new esri.dijit.BasemapLayer({                         type : "BingMapsHybrid"                     })],                     id : "bmHybrid",                     title : "Aerial with labels"                 });                 basemaps.push(basemapHybrid);                 basemapGallery = new esri.dijit.BasemapGallery({                     showArcGISBasemaps : false,                     basemaps : basemaps,                     bingMapsKey : bingKey,                     map : map                 });                  //BasemapGallery.startup isn't needed because we aren't using the default basemap, instead                 //we are going to create a custom user interface to display the basemaps, in this case a menu.                 dojo.forEach(basemapGallery.basemaps, function(basemap) {                     //Add a menu item for each basemap, when the menu items are selected                     dijit.byId("bingMenu").addChild(new dijit.MenuItem({                         label : basemap.title,                         onClick : dojo.hitch(this, function() {                   ;                         })                     }));                  });             }               dojo.addOnLoad(init);          </script>     </head>     <body class="claro">         <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">             <div id="header" dojotype="dijit.layout.ContentPane" region="top">                 <div>                     <b>Table Of Content (TOC/Legend) Widget</b><a style="right:20px;position: absolute" href="../docs/toc/examples.html">Documentation</a>                 </div>                 <ul style="margin:2px">                     <li>                         Click check box to turn on/off layers. When click on groups, all sublayers will be turned on/off.                     </li>                 </ul>             </div>             <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left" splitter="true">                 <div id="tocDiv"></div>             </div>             <div id="map" dojotype="dijit.layout.ContentPane" region="center">                 <div style="position:absolute; right:50px; top:10px; z-Index:99;">                     <button id="dropdownButton" iconClass="bingIcon" label="Basemaps"  dojoType="dijit.form.DropDownButton">                         <div dojoType="dijit.Menu" id="bingMenu">                             <!--The menu items are dynamically created using the basemap gallery layers-->                         </div>                     </button>                 </div>             </div>         </div>     </body> </html>

Thanks for your help...