How do I change the basemap programmatically?

[JoseVidal]

I am building a custom widget for WAB. To start with, I just want to build a button that switches between the 'streets' and the 'topo' basemap.

I created a working widget and in it I have this code:

let newMap = new Map("map", {
  basemap: "streets",
  center: [-105.255, 40.022],
  zoom: 13
});
console.log("newMap")
console.log(newMap)
this.map = newMap

Which creates a new Map, and does not generate any errors, but also does not change the map.

I am guessing I need to do more than just `this.map = newMap`. But, what?

There is no documentation on this.

[shaylavi]

Jose,

You should not recreate the map object unless you plan to display multiple map views.

To change a basemap you use the existing map object and use the function setBasemap

map.setBasemap("name_of_the_basemap");

alternatively, you can use the toggle widget that has this functionality built-in -

Basemap Toggle | ArcGIS API for JavaScript 3.31 

or the basemap gallery widget, which is similar -

Basemap gallery | ArcGIS API for JavaScript 3.31 

Shay.

[RobertScheitlin__GISP]

Here is a link to a thread about issues trying to use the JS API basemap toggle widget in WAB.

https://community.esri.com/thread/161760#comment-534257 

Here is how we switch a basemap in the custom Local Layer widget.

var bmLayerObj = {
  url: url,
  isReference: false
};
var _newBasemap = new Basemap({
  id: 'defaultBasemap',
  title: "blah blah",
  layers: [new BasemapLayer(bmLayerObj)]
});
var _basemapGallery = new BasemapGallery({
  showArcGISBasemaps: false,
  map: this.Map
});
_basemapGallery.add(_newBasemap);
_basemapGallery.select('defaultBasemap');
_basemapGallery.destroy();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[JoseVidal]

That worked! Thanks! 

I only had to change line 12 to: map: this.map. Uppercase this.Map does not work.

But, I am executing a printtask right after changing the basemap and the print uses the old map. I am guessing it is because I have to wait until the basemap has changed before a call the printtask.

Is there a way to get a callback (setup a .then()) for after the basemap changes?

[RobertScheitlin__GISP]

Jose,

  You can use https://developers.arcgis.com/javascript/3/jsapi/basemapgallery-amd.html#event-selection-change before you destroy the _basemapGallery.

[JoseVidal]

Thanks! That worked.

[JoseVidal]

I used the line:

this.map.setBasemap("topo");

but, it does not do anything. The map remains the same. It does not produce an error either.

I will try Scheitlin's solution next.

[Adarshvarma]

Jose,

it sets the base map at a particular zoom level, but again it vanishes after we change the zoom level