menu for changing basemap in ArcGIS API 4.x

Question

Is there a way to create a drop down menu for changing the basemap in ArcGIS api 4.x similar to the one here https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=map_agol I have a working version of it in 3.x but am hoping to upgrade to 4.x. I found a similar example for changing the basemap here: https://developers.arcgis.com/javascript/latest/sample-code/widgets-basemapgallery/index.html but am having trouble implementing a drop down menu version

I found a tutorial for creating a menu (https://dojotoolkit.org/reference-guide/1.10/dijit/DropDownMenu.html) but am having trouble implementing the basemap change portion

Does anyone have experience with this?

Answer 1

For the basemap change you just need to change the Map's basemap property. So if a user selects "satellite" from the dropdown you would just need to modify the property with the new value.

    var basemapDropdown = document.getElementById("basemap-select");
    basemapDropdown.addEventListener("change", changeBasemap);

    function changeBasemap(event){
      var newBasemap = basemapDropdown.value;
      view.map.basemap = newBasemap;
    }

See example I created her: https://codepen.io/anon/pen/LoyZaJ