ESRI JS API 4.0beta3 Basemap Switcher Views

Using the BasemapToggleViewModel to create our own Basemap Toggle widget, using dojo Widget.

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>
<div id="viewDiv"></div>
<div id="appDiv" class="basemap-container"></div>

CSS

#viewDiv {
  height: 100%;
}
#appDiv {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #fff;
  color: #646464;
  width: 75px;
  height: 75px;
  margin: 1em;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.basemap-item {
  position: absolute;
  width: 75px;
  height: 75px;
  cursor: pointer;
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.2s;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.basemap-item-secondary {
  z-index: 999;
}

.basemap-item-current {
  z-index: 998;
  top: 1em;
  right: 1em;
}

JavaScript

// inspired by https://github.com/odoe/esrijs4-vm-react
// I've added links to the relative sections in Odoe's code.
var dojoConfig = {
  async: true
};
require([
  "esri/Map",
  "esri/views/SceneView",
  "esri/views/MapView",
  "dojo/_base/declare",
  "dijit/_WidgetBase",
  "dijit/_TemplatedMixin",
  "dojo/Stateful",
  "dojo/_base/lang",
  "dojo/dom-style",
  "esri/widgets/BasemapToggle/BasemapToggleViewModel",
  "dojo/domReady!"
],
function(Map, SceneView, MapView, declare, _WidgetBase, _TemplatedMixin, Stateful, lang, domStyle, BasemapToggleVM) {
	var BToggle = declare([_WidgetBase, _TemplatedMixin, Stateful], {
  
  	// https://github.com/odoe/esrijs4-vm-react/blob/master/src/components/basemaptoggle.jsx#L75-L78
  	templateString: '<div><div class="basemap-item basemap-item-secondary" data-dojo-attach-event="click:toggle" data-dojo-attach-point="secondaryBasemapItem"></div><div class="basemap-item basemap-item-current" data-dojo-attach-point="currentBasemapItem"></div></div>',
    
    // https://github.com/odoe/esrijs4-vm-react/blob/master/src/components/basemaptoggle.jsx#L5-L9
    bgImage: function(target, url) {
    	domStyle.set(target, 'background-image', 'url(' + url + ')');
    },
    
    // https://github.com/odoe/esrijs4-vm-react/blob/master/src/components/basemaptoggle.jsx#L13-L18
    constructor: function() {
      this.inherited(arguments);
      this.vm = new BasemapToggleVM();
      this.secondaryThumbnailUrl = '';
    },
    
    // https://github.com/odoe/esrijs4-vm-react/blob/master/src/components/basemaptoggle.jsx#L29-L50
    postCreate: function() {
    	this.inherited(arguments);
      this.vm.view = this.view;
      this.vm.secondaryBasemap = this.secondaryBasemap;
 
      var info = this.vm.getBasemapInfo(this.secondaryBasemap || 'topo');
      this.updateThumbnails(info, this.vm.currentBasemap);
      this.vm.watch('secondaryBasemap', lang.hitch(this, 'updateThumbnails'));
    },
    
    //...