nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Widget: BasemapGallery dropdown question

JanBenson

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!

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

VivekPrasad

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.

BarryGuidry

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.

khutchins

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

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?

khutchins

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

Actually, I would like to copy the BasemapGallery functionality from the sample here, but cannot figure it out. There is a dojo requirement "dojo.require("myModules.custommenu")" that I guess cannot be utilized. Or, at least, can someone see how the "Basemaps" menu button collapses after changing the basemap? That is actually all I need to add to my code possibly.

BarryGuidry

It should be built into the sample. My button from the sample does collapse after I make a selection. If I select the Basemaps button, but then do nothing, it will stay open until I click anywhere in the window.

OK, I see, there is a difference between the samples. The one I started with, here, does not collapse automatically, and is a "digit.TitlePane" rather than a "dijit.form.DropDownButton" as this one.

khutchins

Barry,

Something like this should close the dropdown after a selection is made:

      dojo.connect(bookmarks, 'onClick', function(evt) {
        dojo.query('.dijitDropDownButton').forEach(function(node,idx){
            var btn = dijit.getEnclosingWidget(node);

            btn.closeDropDown();
        });
        });

If you have multiple dropdown buttons in your app you'll have to tweak the code a bit to just get the one for the Bookmarks.

JanBenson

It should be built into the sample. My button from the sample does collapse after I make a selection. If I select the Basemaps button, but then do nothing, it will stay open until I click anywhere in the window.

BarryGuidry

How do you make the "Basemapgallery" drop-down menu collapse after making a selection within?

JanBenson

John,

When you reply to a thread, below the text input window there are Additional Options. Under Additional Options there is Subscriptions. Here you can opt for email instantly, daily, or weekly.

JohnWall

Is there a way for me to add this thread to my favorites or something?

AndrewDavis

Hi,

I have read the entries here and I am working with something similar, but having limited success.

I have my .api's (2.8) installed locally and running fine on my server.

I have 3 cached services which I would like to display in the BasemapGallery dropdown. So far I have gotten two do display (Names of the services) in the dropdown button. However, I am only able to get the first one to work on the click event. This is a manually loaded gallery.

I am unsure of the changes I have made to the function.

function createBasemapGallery(){
//Manually creating a list of basemaps to display
var basemaps = [];
var myStreets = new esri.dijit.BasemapLayer({url: "http://myLittleServer/rest/services/myfolders/MapServer"});
var theStreets = new esri.dijit.Basemap({layers: [myStreets], title: "The StreetNetwork"});
basemaps.push (theStreets);

var myHouses = new esri.dijit.BasemapLayer({url: "http//myLittleServer/rest/services/myotherfolders/MapServer"});
var theHouses = new esri.dijit.Basemap({layers:[myHouses], title: "The Houses"});
basemaps.push (theHouses);

basemapGallery = new esri.dijit.BasemapGallery({
   showArcGISBasemaps: false,
   basemaps: basemaps,
   bingMapskey: bingKey,
   map: map
});
//BasemapGallery.startup isnt 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);
})
}));

Why is there only one working service, and the second one does not display on the click event?

Andy...

Jose_FranciscoSánchez_Díaz

Really easy!
Thank you Kelly!

khutchins

You'll want to follow the instructions on this page to create a group:

http://help.arcgis.com/en/arcgisonline/help/010q/010q00000016000000.htm

Once the group is created you can add web maps to the group that contain the basemaps you want to display. So if your organization has a basemap you'd like to add just create a web map with just that basemap added then share it to the group.

Kelly

Jose_FranciscoSánchez_Díaz

Hello Kelly:
I just want to do same thing. I don't know how to create a group in ArcGIS.com that contains only the basemaps.
Could you tell me how? Thanks!!

khutchins

Chris,

I look forward to seeing the finished app. One simple way to show a filtered list of basemaps would be to create a group in ArcGIS.com that contains only the basemaps you want to display in the gallery. You can then specify this group when creating the BasemapGallery and the gallery will display your custom basemaps. This is often easier than typing out the urls, thumbnails etc for each of the basemaps you want to include.

var basemapGallery = new esri.dijit.BasemapGallery({
   showArcGISBasemaps: true,
   basemapsGroup:{owner:"esri",title:"Community Basemaps"},
   map: map
}, dojo.create('div'));

ChristopherPollard

Kelly,
Perfect again.
I'll make sure to send you the link to the final web app when I'm done.
I'll probably add it to my Public ArcGIS.com contents as well (user:map12).
I have a few already listed and this will be a good example to add.

My next step is to manually build the galley with the code you already provided to only include just few basemap options.
enjoy,
Chris

khutchins

Christopher,

Here's an example that shows how to add the basemap gallery basemaps to the map in a dropdown button.


<!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/2.7/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=2.7"></script>
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.dijit.BasemapGallery");
      dojo.require("dijit.Menu");
      dojo.require("dijit.form.Button");

      var map;
      var basemapGallery;

      function init() {
        var initExtent = new esri.geometry.Extent({
          "xmin": -75.50,
          "ymin": 39.84,
          "xmax": -74.67,
          "ymax": 40.14,
          "spatialReference": {
            "wkid": 4326
          }
        });
        map = new esri.Map("map", {
          extent: esri.geometry.geographicToWebMercator(initExtent)
        });


        dojo.connect(map, 'onLoad', function () {
          //create the basemap gallery dropdown 
          createBasemapGallery();
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
        });
        //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/Canvas/World_Light_Gray_Base/MapServer");
        map.addLayer(basemap);

        //add dynamic layers
        var imageParameters = new esri.layers.ImageParameters();
        imageParameters.layerIds = [6];
        imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
        var cii = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.dvrpc.org/ArcGIS/rest/services/Ci2_raster/MapServer", {
          id: "cii",
          "imageParameters": imageParameters,
          "opacity": 1.00
        });
        map.addLayer(cii);

        var admin = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.dvrpc.org/ArcGIS/rest/services/Ci2_raster/MapServer", {
          id: "admin",
          visible: true,
          "opacity": 0.80
        });
        map.addLayer(admin);
        admin.setVisibleLayers([0, 1, 2]);

        var transmap = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.dvrpc.org/ArcGIS/rest/services/Ci2_raster/MapServer", {
          id: "transmap",
          visible: true,
          "opacity": 1.00
        });
        map.addLayer(transmap);
        transmap.setVisibleLayers([3, 4, 5]);


      }

      function createBasemapGallery() {
        basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        });
        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,
              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;">
        <!-- basemap dropdown -->
        <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="basemapMenu">
              <!--The menu items are dynamically created using the basemap gallery layers-->
            </div>
          </button>
        </div>
      </div>
    </div>
  </body>

</html>

ChristopherPollard

Thanks for the code sample. Its exactly what I was looking for.
I was also looking for any sample code that shows how to use the basemap gallery menu and overlay my own dynamic map services as operational layers?
I really like the sample on the main JS page:http://help.arcgis.com/en/webapi/javascript/arcgis/index.html

I currently have the Canvas map as my basemap with a few dynamic map services (which the user can toggle) and NOW I want to add the Dropdown Menu to allow users to switch to ESRI World Imagery,etc.

Here's the first few lines of code...I keep running into an issue when I add the create basemap galley.
Any help or suggestions would be perfect...if you need to see all or more of my code please let me know.
Thanks,
Chris Pollard

function init() {
   //  DVRPC region   initExtent = new esri.geometry.Extent({"xmin":-8502778.91,"ymin":4784652.06,"xmax":-8227605.61,"ymax":4968100.93,"spatialReference":{"wkid":102100}});
    initExtent = new esri.geometry.Extent({"xmin":-8513951.985121,"ymin":4786968.660565,"xmax":-8248256.864588,"ymax":4996406.126118,"spatialReference":{"wkid":102100}});

        //setup the popup window 
        var popup = new esri.dijit.Popup({marginTop:35,
          fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, 
    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), 
    new dojo.Color([255,255,0,0.25]))
        }, 
   dojo.create("div"));
   
        map = new esri.Map("map",{
          infoWindow:popup,
          extent:initExtent
        });

    
        dojo.connect(map,"onLoad",mapReady);
  
  
  //   imagemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
     //   map.addLayer(imagemap);
  
  basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer");
        map.addLayer(basemap);
    
        refmap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer");
        map.addLayer(refmap);
  
  var imageParameters = new esri.layers.ImageParameters();
        imageParameters.layerIds = [6];
        imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
     cii = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.dvrpc.org/ArcGIS/rest/services/Ci2_raster/MapServer",{id:"cii",  "imageParameters": imageParameters, "opacity":1.00});
        map.addLayer(cii);
  
  admin = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.dvrpc.org/ArcGIS/rest/services/Ci2_raster/MapServer",{id:"admin", visible:true,"opacity":0.80});
        map.addLayer(admin);
  admin.setVisibleLayers([0,1,2]);
        
  transmap = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.dvrpc.org/ArcGIS/rest/services/Ci2_raster/MapServer",{id:"transmap", visible:true,"opacity":1.00});
        map.addLayer(transmap);
  transmap.setVisibleLayers([3,4,5]);   

      }

JanBenson

Kelly,
I was just getting ready to post my code which now works when yours appeared. Yes it works.

Thanks again. It is a learning process.

khutchins

Yes your code should work. I updated my sample to add the world imagery and remove the thumbnails and it worked for me.
Here's the code:

<!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>
      Basemap Gallery - Bing Maps
    </title>
       <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dijit/themes/claro/claro.css">

    <style type="text/css">
      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 type="text/javascript">
      var djConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6">
    </script>
    <script type="text/javascript">
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      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() {
        var initialExtent = new esri.geometry.Extent({
          "xmin": -1641867,
          "ymin": 2647172,
          "xmax": 3064207,
          "ymax": 4765395,
          "spatialReference": {
            "wkid": 102113
          }
        });
        map = new esri.Map("map", {
          extent: initialExtent
        });

        createBasemapGallery();
 
        dojo.connect(map, 'onLoad', function(map) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });

      }
      function createBasemapGallery(){
        //Manually create a list of basemaps to display
        var basemaps = [];
      
      var oceanLayer = new esri.dijit.BasemapLayer({
        url: "http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"
      });
       var oceansBasemap = new esri.dijit.Basemap({
          layers:[oceanLayer],
          title:"World Oceans"
        });
        basemaps.push(oceansBasemap);
        
       var basemapImagery = new esri.dijit.Basemap({ 
         layers: [new esri.dijit.BasemapLayer({ 
           url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" 
         })], 
         id: "bmImagery", 
         title: "Imagery" 
       }); 
       basemaps.push(basemapImagery);        
        
        var natGeoLayer = new esri.dijit.BasemapLayer({
          url:"http://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer"
        });
        var natGeoBasemap = new esri.dijit.Basemap({
          layers:[natGeoLayer],
          title:"National Geographic"
        });

       basemaps.push(natGeoBasemap);
      
        basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: false,
          basemaps: basemaps,
          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.addOnLoad(init);
    </script>
  </head>
  
  <body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
    style="width: 95%; height: 94%;">

      <div id="map" dojotype="dijit.layout.ContentPane" region="center">
        <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="bingMenu">
              <!--The menu items are dynamically created using the basemap gallery layers-->
            </div>
          </button>
        </div>
      </div>

    </div>
  </body>

</html>

JanBenson

Thanks Kelly. I am still confused though.   In the Widgets-BasemapGallery-Dropdown description it says �??This widget allows you to define a collection of basemaps to display in a default gallery or you can define a custom user interface.�?� The sample you provided has a thumbnailURL which I do not want, just a clean dropdown text window. From reading the documentation on the API reference- digits-BasemapLayer (http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi_start.htm), it looks like you can specify url for type. I am thinking I put in whatever I want for id: or is there an id for each map resource? Here is what I have so far. I commented out any reference to bingMapsKey. Shouldn�??t this work or is it not possible to modify this widget to a user defined subset?

        function createBasemapGallery(){
        //Manually create a list of basemaps to display
        var basemaps = [];
        var basemapOcean = new esri.dijit.Basemap({
          layers: [new esri.dijit.BasemapLayer({
            url: "http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"
          })],
          id: "bmOcean",
          title: "Ocean"
        });
        basemaps.push(basemapOcean);

        var basemapImagery = new esri.dijit.Basemap({
          layers: [new esri.dijit.BasemapLayer({
            url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
          })],
          id: "bmImagery",
          title: "Imagery"
        });
        basemaps.push(basemapImagery);

        var basemapNatGeo = new esri.dijit.Basemap({
          layers: [new esri.dijit.BasemapLayer({
            url: "http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer"
          })],
          id: "bmNatGeo",
          title: "National Geographic"
        });
        basemaps.push(basemapNatGeo);

        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() {
              this.basemapGallery.select(basemap.id);
            })
          }));

        });
      }

Thanks!

khutchins

You will need to manually build the basemaps you want to add to the gallery. Here's an example that shows adding the Oceans and National Geographic basemaps. You can't include the Imagery Prime map with these because its in a different spatial reference (4326) and all the basemaps in the gallery need to share the same spatial reference.

        //Manually create a list of basemaps to display
        var basemaps = [];
      
      var oceanLayer = new esri.dijit.BasemapLayer({
        url: "http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"
      });
       var oceansBasemap = new esri.dijit.Basemap({
          layers:[oceanLayer],
          title:"World Oceans",
          thumbnailUrl:"http://www.arcgis.com/sharing/content/items/2adf08a4a1a84834a773805a6e86f69e/info/thumbnail/oceans.jpg"
        });
        basemaps.push(oceansBasemap);
        
        var natGeoLayer = new esri.dijit.BasemapLayer({
          url:"http://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer"
        });
        var natGeoBasemap = new esri.dijit.Basemap({
          layers:[natGeoLayer],
          title:"National Geographic",
          thumbnailUrl:"http://www.arcgis.com/sharing/content/items/b9b1b422198944fbbd5250b3241691b6/info/thumbnail/natgeo3.jpg"
        });

       basemaps.push(natGeoBasemap);
      
        basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: false,
          basemaps: basemaps,
          map: map
        });

Alternatively you could create a group in ArcGIS.com that contains the basemaps you want to display then use the new (at version 2.6) basemapsGroup option to specify the owner and name of the group you created:

 var basemapGallery = new esri.dijit.BasemapGallery({
   showArcGISBasemaps: true,
   basemapsGroup:{owner:"esri",title:"Community Basemaps"},
   map: map
 }, dojo.create('div'));

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.