BaseMap Widget

NathalieNeagle

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

danbecker

In my top header I have a table, each cell containing a button; here's the html for the basemap dropdown. I used a form DropDownButton & dijit Menu.

<td align="center" style="width: 60px;" valign="middle">
<button id="dropdownButton" iconClass="btnImgBaseMap" title="Switch Basemap" dojoType="dijit.form.DropDownButton">
<div dojoType="dijit.Menu" id="bingMenu">
<!--The menu items are dynamically created using the basemap gallery layers-->
</div>
</button>
</td> 

here's my createbasemap function

function createBasemapGallery() {
    var streetBasemapURL = new esri.dijit.BasemapLayer({
        url:"https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
    });
    var topoBasemapURL = new esri.dijit.BasemapLayer({
        url:"https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
    });
    var basemaps= [];

    var bingBasemap = new esri.dijit.Basemap({
        id: "Bing",
    layers:[new esri.dijit.BasemapLayer({
        type: "BingMapsAerial"})
        ],
        title:"BingImagery"
        //thumbnailUrl:"images/imagery_thumb.png"
    });
    basemaps.push(bingBasemap);
    var streetBasemap = new esri.dijit.Basemap({
        id: "Street",
        layers:[streetBasemapURL],
        title:"Street"
        //thumbnailUrl:"images/street_thumb.png"
    });
    basemaps.push(streetBasemap);
    var topoBasemap = new esri.dijit.Basemap({
        id: "Topo",
        layers:[topoBasemapURL],
        title:"Topo"
        //thumbnailUrl:"images/topo_thumb.png"
    });
    basemaps.push(topoBasemap);
    var basemapGallery = new esri.dijit.BasemapGallery({
        showArcGISBasemaps: false,
        bingMapsKey: 'mykey',
        basemaps: basemaps,
        map: map
    });
    basemapGallery.startup();
    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,
            iconClass: basemap.title,
            onClick: function(){basemapGallery.select(basemap.id)}
        }));
    });
}

For the Thumbnail images, pay attention to the iconClass: basemap.title when the dijit.MenuItem is built.
In my CSS I have the following classes defined

.BingImagery {
    background-image: url("images/imagery_thumb.png");
    background-repeat: no-repeat;
    height: 60px;
    width: 60px;
}
.Street {
    background-image: url("images/street_thumb.png");
    background-repeat: no-repeat;
    height: 60px;
    width: 60px;
}
.Topo {
    background-image: url("images/topo_thumb.png");
    background-repeat: no-repeat;
    height: 60px;
    width: 60px;
}