
8.1.1 BasemapToggle
There are four key steps in implementing this widget:
- Set the basemap property of the Map object to the basemap you want the user to see when the app loads.
- Create the new BasemapToggle object, associating it with a View.
- Set the BasemapToggle’s nextBasemap property to the other basemap you’d like the user to be able to switch to.
- 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