nathalieneagle

BaseMap Widget

Discussion created by nathalieneagle on Apr 17, 2012
Latest reply on Apr 18, 2012 by dbecker88
I looked through some old post and was able to create the drop down basemap picker with a using custom group.  The only thing I can't seem to grasp is how to include the icons along with the title of the basemaps (similar to the basemap dropdown on the JS API home/start page). 

WOuld you take a second to look at my code and let me know what I'm missing? 


MY JS


 function createBasemapGallery() {
           basemapGallery = new esri.dijit.BasemapGallery({
           showArcGISBasemaps: true,
           basemapsGroup:{owner:"esri",title:"Community Basemaps"},
      map: map
     }, dojo.create("basemapGallery")); 
     
          dojo.connect(basemapGallery, 'onLoad', function () {
            //add the basemaps to the menu
            dojo.forEach(basemapGallery.basemaps, function (basemap) {
              dijit.byId("basemapMenu").addChild(new dijit.MenuItem({
                label: basemap.title,   
               icon:basemap.thumbnailUrl,
          //Onclick select the appropiate basemap
             onClick: dojo.hitch(this, function () {
                   this.basemapGallery.select(basemap.id);})
              }));
            });
          });
    }
      


MY HTML

 <div id="map" data-dojo-type="dijit.layout.ContentPane" class="roundedCorners"
      data-dojo-props="region:'center'"> 
      
      
        <!-- basemap dropdown -->
        <div style="position:absolute; right:50px; top:10px; z-Index:99;">
          <button id="dropdownButton" label="Basemaps" dojoType="dijit.form.DropDownButton">
            <div dojoType="dijit.Menu" id="basemapMenu"></div>
          </button>
        </div>
      
      
      </div>



Thanks
NATHALIE

Outcomes