Switching Basemaps Programmatically

[ChrisHavel]

I am trying to change basemaps without the BaseMap widget.

I can accomplish this BUT I have two buttons and I only want ONE..

I am trying to invision how to do this with one button....
1. I should be able to use a toggler of some sort
2. if not I can use an If Then statement or a Case as seen below BUT would need to fidn out how to determine the name of the current basemap that is being displayed..

    
    map = new esri.Map("map", {
       basemap: "topo",
    });

If I am looking at the code above....

1. How do I test for the basemap? Return to a variable and then I can use in the Case below.

I tried this and got 'undefined'

 var layer = map.getLayer('basemap');
 var layerUrl;
 switch(basemap){
    case 'topo':
            layerUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer';
            break;
    case 'imagery':
            layerUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer';
            break;
 }
 var basemap = new esri.layers.ArcGISTiledMapServiceLayer(layerUrl,{id:'basemap'});
 map.addLayer(basemap,0);

alert(layer);

WORKING CODE BUT TWO BUTTONS

 <div dojotype='dijit.layout.ContentPane' region='top' style='height:20px;'>
      <input type='button' value='Topo' onclick='switchMap("topo");'/>
      <input type='button' value ='Imagery' onclick='switchMap("imagery");'/>
 </div>

        map = new esri.Map("map",{
          extent:initExtent
        });
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer",{id:'basemap'});
        map.addLayer(basemap);


      function switchMap(basemap){
        //remove the existing basemap layer
        var layer = map.getLayer('basemap');
        map.removeLayer(layer);
        var layerUrl;
        switch(basemap){
          case 'topo':
            layerUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer';
            break;
          case 'imagery':
            layerUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer';
            break;
        }
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer(layerUrl,{id:'basemap'});
        map.addLayer(basemap,0);

      }

[ChristianSailer2]

Thank you this has helped to find the ids names! Great!

//But when I'm using the default-widget.

var basemapGallery = new BasemapGallery({

  showArcGISBasemaps: true,

  map: map

  }, "basemapGallery");

  basemapGallery.startup();

//I cannot add

  basemapGallery.remove("basemap_0");

//to remove a basemap. It return Null!

//I think basemap_0 is not yet recognized after the startup()

//Do you have a solution for that?

//Thank you

[KenBuja]

I would suggest starting a new discussion on this. It would help get the attention of the Javascript API experts at Esri.

[ChristianSailer2]

new discussion; Adapt basemap collection in Dijit BasemapGallery

thanks.

[AndrewPratt]

Take a look at my demo site. I just the basemap toggle and then just applied CSS to override the defaults.

Javascript

var toggle = new BasemapToggle({

  map: app.map,

  basemap: "hybrid"

   }, "BasemapToggle");

   toggle.startup();

CSS

#BasemapToggle {

      position: absolute;

      top: 20px;

      right: 20px;

      z-index: 50;

    }

  .BasemapToggle .basemapImage {

     height: 0;

     overflow: hidden;

     width: 0px;

  }

  .BasemapToggle .basemapTitle {

  width: 80px;

  }

Project Map Viewer

[YungKaiChin]

Just want to add to Andrew Pratt‌'s code.

You could add an event listener to the toggle and do switch there between 2 or more base layer.

Example:

toggler.on("toggle", changeNextBasemap);

function changeNextBasemap(event){

     switch(event.currentBasemap){

          case 1:

               toggle.basemap = "whatever";

               break;

          case 2:

          case 3:

          case 4:

          ...

     }

}