We have this sample app on GitHub ready for you to drop into your AppStudio app and customize further as you see fit.
If you are curious to learn more here are the details.
The code is organized in three main QML files:
1. BasemapPicker_Sample.qml – stores the app properties and global variables.
2. MapPage.qml – stores the Map component, a button image for basemap picker and logic to change basemap in the map control.
3. BasemapPicker.qml – custom component that contains the basemap layers, basemap picker’s interface and functionality.
The basemap picker uses a ListModel component to store information about each basemap, including the basemap’s name, the REST URL of the basemap’s map service, as well as the relative path to the basemap’s thumbnail png within the project folder.
//Base Map Picker model
property alias baseMapPickerModel: baseMapPickerModel
name: "Light Gray"
The basemap picker’s interface consists of a call-out graphic with a scrollable list of basemap thumbnails and names. The call-out graphic becomes visible when the user clicks the basemap control button on the map. The list of basemaps in the call-out interface is created using a Repeater component along with the ListModel described above. A Flickable component within the call-out graphic allows the items in the ListModel to scroll.
//This function gets called when a new basemap has been selected
console.log("Got: ", name, url);
//1. Remove any exisiting basemap layer
//2. Create a new tiled layer
var layer = ArcGISRuntime.createObject("ArcGISTiledMapServiceLayer");
layer.url = url;
layer.name = name;
//3. Add this new layer to the groupLayer
Download the BasemapPickerSample code on GitHub to add a basemap picker to your own mobile (or Desktop) apps built using AppStudio for ArcGIS. Or, borrow from the code below to create your very own custom basemap picker. Add/remove basemaps, change the design, or update the interface – the possibilities are limitless!
Contributed by Sathya Prasad and Brooke Reams