AppStudio for ArcGIS

Creating a simple basemap picker for your apps in AppStudio using QML and JavaScript

A basemap is an essential mapping component for providing relativity and context to spatial data displayed on a map. Providing users the option to select from a variety of basemaps can offer a more refined finish and custom option to end users. The short video below demonstrates a simple basemap picker written in QML and JavaScript with AppStudio for ArcGIS.

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.

[sourcecode language=”javascript”]
//Base Map Picker model
property alias baseMapPickerModel: baseMapPickerModel
ListModel {
id: baseMapPickerModel
ListElement {
name: "Topography"
url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
image: "images/topo_thumbnail.png"
}
ListElement {
name: "Satellite"
url: "http://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer"
image: "images/satellite_thumbnail.png"
}
ListElement {
name: "Streets"
url: "http://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer"
image: "images/streets_thumbnail.png"
}
ListElement {
name: "Oceans"
url: "http://services.arcgisonline.com/arcgis/rest/services/Ocean_Basemap/MapServer"
image: "images/oceans_thumbnail.png"
}
ListElement {
name: "Light Gray"
url: "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer"
image: "images/lightgray_thumbnail.png"
}
}
[/sourcecode]

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.

When an item is selected from the list, the call-out graphic’s visible property is set to false and a function (signal) is called with the name and URL of the selected basemap. In the MapPage.qml inside of the “onChange” event using JavaScript we can then remove current basemap and add a new basemap based on the selection.

[sourcecode language=”javascript”]
//BasemapPicker Component
BasemapPicker {
id: basemapPicker
fontFamilyName: app.fontSourceSansProReg.name
textFontPointSize: app.baseFontSize*0.65
currentBaseMapName: "Topography"

anchors {
right: rectBaseMapControlBox.left
bottom: rectBaseMapControlBox.bottom
bottomMargin: -60*app.scaleFactor
}

onChange: {
//This function gets called when a new basemap has been selected
console.log("Got: ", name, url);

//1. Remove any exisiting basemap layer
groupLayer.removeAllLayers();

//2. Create a new tiled layer
var layer = ArcGISRuntime.createObject("ArcGISTiledMapServiceLayer");
layer.url = url;
layer.name = name;
layer.initialize();

//3. Add this new layer to the groupLayer
groupLayer.add(layer);
}
}
[/sourcecode]

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!

Link to GitHub Repo

Contributed by Sathya Prasad and Brooke Reams

About the author

Group Engineer Manager and Software Development Lead. Story Maps + AppStudio + Survey123 + ArcGIS Companion + Esri Labs. Sathya Prasad has been with Esri for 14 years and currently works in the Software Development group. Sathya has spent more than fifteen years in the intersection of software and GIS industry and has extensive experience with Mobile, Web, Social, Spatial and Cloud technologies. Sathya enjoys solving hard problems especially in the GIS and spatial world and coming up with very creative solutions. His background is in both computer science and business education.

Connect:

Next Article

A classical visualization of earthquakes using ArcGIS API for JavaScript

Read this article