ESRI JS API 4.0beta3 Basemap Switcher Views

Using the BasemapToggleViewModel

by Alex Azuero

HTML

<link rel="stylesheet" href="https://js.arcgis.com/4.0beta3/esri/css/main.css">
<script src="https://js.arcgis.com/4.0beta3/init.js"></script>
<script type="text/javascript">
  var dojoConfig = {
    async: true
  };

</script>
<div id="viewDiv"></div>
<div id="appDiv"></div>

CSS

#appDiv {
  top: 5px;
  right: 5px;
  position: absolute;
}

JavaScript

require([
  "esri/Map",
  "esri/views/SceneView",
  "esri/views/MapView",
  "esri/widgets/BasemapToggle",
  "esri/widgets/BasemapToggle/BasemapToggleViewModel",
  "dojo/domReady!"
],
function(Map, SceneView, MapView, BasemapToggle, BasemapToggleVM) {
  var map = new Map({
    basemap: "streets"
  });
  
  var viewOptions = {
    container: "viewDiv",
    map: map,
    center: [-101.17, 21.78],
    scale: 50000000
  };

  // 2D:
  var view = new MapView(viewOptions);

	// Basemap
  var basemapToggle = new BasemapToggle({
    viewModel: new BasemapToggleVM({
      view: view,  //view with map that uses "streets" basemap
      secondaryBasemap: "hybrid"  //allows for toggling to "hybrid" basemap
    })
  }, "appDiv");
  basemapToggle.startup();
});