How do I change the basemap programmatically?

12-21-2019 05:38 PM
New Contributor III

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) = 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 ` = newMap`. But, what?

There is no documentation on this.

0 Kudos
7 Replies
Esri Contributor


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


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 


MVP Emeritus

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

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
New Contributor III

That worked! Thanks! 

I only had to change line 12 to: 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?

0 Kudos
MVP Emeritus
New Contributor III

Thanks! That worked.

0 Kudos
New Contributor III

I used the line:"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.

0 Kudos
New Contributor


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

0 Kudos