topic Re: How do I change the basemap programmatically? in Web AppBuilder Custom Widgets Questions

How do I change the basemap programmatically?

JoseVidal — Sun, 12 Dec 2021 09:06:55 GMT

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.

Re: How do I change the basemap programmatically?

shaylavi — Mon, 23 Dec 2019 05:08:33 GMT

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.

Re: How do I change the basemap programmatically?

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:06:57 GMT

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();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How do I change the basemap programmatically?

JoseVidal — Sat, 11 Jan 2020 20:17:04 GMT

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.

Re: How do I change the basemap programmatically?

JoseVidal — Sat, 11 Jan 2020 20:48:20 GMT

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?

Re: How do I change the basemap programmatically?

RobertScheitlin__GISP — Mon, 13 Jan 2020 15:12:07 GMT

Jose,

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

Re: How do I change the basemap programmatically?

JoseVidal — Tue, 14 Jan 2020 00:10:00 GMT

Thanks! That worked.

Re: How do I change the basemap programmatically?

Adarshvarma — Mon, 17 May 2021 13:30:28 GMT

Jose,

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