8.1.1 BasemapToggle

8.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:

const map = new Map({
 basemap: "topo-vector" // STEP 1
});

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

const toggle = new BasemapToggle({
 view: view, // STEP 2
 nextBasemap: "hybrid" // STEP 3
});

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