GEOG 863:
Web Application Development for Geospatial Professionals

7.1.1 BasemapToggle


7.1.1 BasemapToggle

There are four key steps in implementing this widget:

  1. Set the basemap property of the Map object to the basemap you want the user to see when the app loads.
  2. Create the new BasemapToggle object, associating it with a View.
  3. Set the BasemapToggle’s nextBasemap property to the other basemap you’d like the user to be able to switch to.
  4. Add the widget to the desired screen location.

The four steps are annotated in the code sample below:

var map = new Map({
 basemap: "topo" // STEP 1

var view = new MapView({
 container: "viewDiv",
 map: map,
 center: [-86.049, 38.485],
 zoom: 3

var toggle = new BasemapToggle({
 view: view, // STEP 2
 nextBasemap: "hybrid" // STEP 3

view.ui.add(toggle, "top-right"); // STEP 4