Widget: BasemapGallery dropdown question

JanBenson · ‎12-20-2011

I just posted this, but can't find it so I will try again.

I am trying to duplicate the widget BasemapGallery- dropdown (http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm) button. I want this particular one because I can customize the dropdown window and I want a simple dropdown button. The example uses all Bing items. I want to use the basemaps Ocean_Basemap, NatGeo_World_Map, and I3_Imagery_Prime_World_2D . My confusion is in the type and id. The example code shows the following:

      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
        });

Do I replace type: �??BingMapsAerial�?� with �??Ocean_Basemap�?�? What do I use instead for id: �??bmRoad�?�? I do not understand where type and id are coming from. When I look at http://services.arcgisonline.com/ArcGIS/rest/services/ and go into the individual layers, I still can�??t seem to find similar items. I realize the basemaps are already there, but it looks like I still have to define them to build the custom menu. If there is a simpler way, I�??m game, but I am a beginner.

Thanks for your help!

KellyHutchins · ‎08-28-2012

The code in custommenu is just used to assign images as icons to the menu items listed in the Basemap menu. You can view the code for custommenu.js by using either Firebug or Chrome Developer tools to inspect the scripts associated with the page.

Here's a simple sample based off the code (without the custommenu) that shows how to populate a dropdown menu with basemaps.

<!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,IE=9" />
    <!--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>Topographic Map</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      .esriScalebar{
        padding: 20px 20px;
      }
      #map{
        padding:0;
      }
    </style>
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.dijit.BasemapGallery");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Menu");
      dojo.require("esri.map");

      
      var map;

      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-122.46,"ymin":37.73,"xmax":-122.36,"ymax":37.77,"spatialReference":{"wkid":4326}});
        map = new esri.Map("map",{
          extent:esri.geometry.geographicToWebMercator(initExtent)
        });
        //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        dojo.connect(map, 'onLoad', function(theMap) { 
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
          createBasemapGallery();
        });
      }
      function createBasemapGallery() {
        basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        });

        dojo.connect(basemapGallery, 'onLoad', function () {
          //BasemapGallery.startup isn't needed because we aren't using the default basemap, instead
          dojo.forEach(basemapGallery.basemaps, function (basemap) {
            //Add a menu item for each basemap, when the menu items are selected
            dijit.byId('basemapMenu').addChild(new dijit.MenuItem({
              label: basemap.title,
              onClick: dojo.hitch(this, function () {
                this.basemapGallery.select(basemap.id);
              })
            }));
          });
        });

      }

      dojo.addOnLoad(init);
    </script>
  </head>
  
  <body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;">
           <div style="position:absolute; right:65px; top:10px; z-Index:99;">
          <button id="dropdownButton" baseClass='medium button green' iconClass="basemapIcon" label="Basemaps"  dojoType="dijit.form.DropDownButton">
            <div dojoType="dijit.Menu" id="basemapMenu">
              <!--The menu items are dynamically created using the basemap gallery layers-->
            </div>
          </button>
        </div>

     </div>
    </div>
  </body>

</html>

BarryGuidry · ‎08-29-2012

Thanks, Kelly. I cannot get the BasemapGallery portion of that code to play well with my web application either. Is there something I could simply add to my code to have the digit.TitlePane collapse, from this sample, upon selection of a basemap within?

KellyHutchins · ‎08-29-2012

Barry,

The TitlePane widget has a toggle method you can use to close the panel after selecting a basemap. Here's a snippet that shows how this would work:

 basemapGallery.startup();
        dojo.connect(basemapGallery,'onSelectionChange', function(){
          //close the title pane 
          var bp = dijit.byId('basemapPane');
          bp.toggle();
        });
 dojo.connect(basemapGallery, "onError", function(msg) {console.log(msg)});

BarryGuidry · ‎08-29-2012

Barry,

The TitlePane widget has a toggle method you can use to close the panel after selecting a basemap. Here's a snippet that shows how this would work:
 basemapGallery.startup();
        dojo.connect(basemapGallery,'onSelectionChange', function(){
          //close the title pane 
          var bp = dijit.byId('basemapPane');
          bp.toggle();
        });
 dojo.connect(basemapGallery, "onError", function(msg) {console.log(msg)});

Thank you, Kelly. That worked, only after adding a <div id="basemapPane"> to my TitlePane.

VivekPrasad · ‎05-15-2013

Thank you, Kelly. That worked, only after adding a <div id="basemapPane"> to my TitlePane.

Hi Kelly and all,

Could you guys please tell me if there is any way to add basemaps with different spatial references to the basemapgallery dijit. I read that all the basemaps which are going to be added to the basemapgallery dijit should share same spatial reference. However, I would request any suggestions to implement this, by extending or any other way.

Thanks in advance!

With Regards,
Vara.