Hide Table of Contents
View Display Bing maps in basemap gallery sample in sandbox
Display Bing maps in basemap gallery

Description

This sample shows how to use the BasemapGallery widget to update the map's basemap. This widget allows you to define a collection of basemaps to display in a default gallery or you can define a custom user interface. In this sample we add the Bing Maps basemaps to the basemap gallery.

var basemaps = [];
var basemapRoad = new esri.dijit.Basemap({
layers
: [new esri.dijit.BasemapLayer({
type
: "BingMapsRoad"
})],
title
: "Road"
});
basemapGallery
= new esri.dijit.BasemapGallery({
showArcGISBasemaps
: false,
basemaps
: basemaps,
bingMapsKey
: bingKey,
map
: map
});

Once the basemaps are added to the basemap gallery widget a custom menu is built to display the three basemaps from the gallery: Roads, Aerial and Aerial with Labels.

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() {
this.basemapGallery.select(basemap.id);
})
}));
});
When a menu item is selected, the basemap's select method is used to change the map's basemap to the newly selected item.

Code

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Basemap Gallery - Bing Maps</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.37/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.37/esri/css/esri.css">
    <style>
      html,body {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
      body {
        background-color:#feffff;
        overflow:hidden;
        font-family:"Trebuchet MS";
        margin:2%;
      }
      #map {
        -moz-border-radius:4px;
        overflow:hidden;
        border:solid 2px #03c;
      }

      .claro .dijitButtonText {
        color:#03c;
        font-family: Arial, Helvetica, sans-serif
        font-weight:bold;
      }
      .claro td.dijitMenuItemLabel {
        color:#03c;
        font-family: Arial, Helvetica, sans-serif
        font-weight:500;
      }
    </style>

    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="https://js.arcgis.com/3.37/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.dijit.BasemapGallery");
      dojo.require("dijit.Tooltip");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Menu");

      var map, basemapGallery;

      function init() {
        map = new esri.Map("map", {
          center: [6.389, 36.054],
          zoom: 4
        });

        createBasemapGallery();
      }
      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: prompt("Please enter your bing maps key"),
          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() {
              this.basemapGallery.select(basemap.id);
            })
          }));
          
        });
      }

      //show map on load
      dojo.ready(init);
    </script>
  </head>
  
  <body class="claro">
    <div data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline', gutters:false"
         style="width: 96%; height: 94%;">

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

    </div>
  </body>

</html>
 
          
Show Modal