Change basemap

View inC++QMLView on GitHubSample viewer app

Change a map's basemap. A basemap is beneath all layers on a Map and is used to provide visual reference for the operational layers.

screenshot

Use case

Basemaps should be selected contextually, for example, in maritime applications, it would be more appropriate to use a basemap of the world's oceans as opposed to a basemap of the world's streets.

How to use the sample

Press the Change Basemap button to display the Basemap Gallery. When the gallery appears, select a basemap to be displayed.

How it works

A basemap can be changed by setting the basemap property of a map object to a new basemap object (e.g. map.basemap = basemap). However, this sample utilises the BasemapGallery toolkit component to manage this process and provide a common user experience. In this sample, the BasemapGallery creates a visual display of basemap options and automates the changing of the basemap.

  1. Create a Map.
  2. Set the map to the MapView.
  3. Create a BasemapGallery from the toolkit.
  4. Assign the map to the geoModel property of the BasemapGallery.

Relevant API

  • Enums.BasemapStyle
  • Map
  • MapView

Additional information

This sample uses the BasemapGallery toolkit component and requires the toolkit to be cloned and set-up locally. For information about setting up the toolkit, see the repository's root README file.

Tags

basemap, map

Sample Code

ChangeBasemap.qml
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// [WriteFile Name=ChangeBasemap, Category=Maps]
// [Legal]
// Copyright 2016 Esri.

// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0

// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
// [Legal]

import QtQuick
import QtQuick.Controls
import Esri.ArcGISRuntime
import Esri.ArcGISRuntime.Toolkit

Rectangle {
    width: 800
    height: 600

    // Create MapView that contains a Map
    MapView {
        id: view
        anchors.fill: parent

        Component.onCompleted: {
            // Set the focus on MapView to initially enable keyboard navigation
            forceActiveFocus();
        }

        Map {
            id: map
            // Set the initial basemap to Topographic
            Basemap {
                id: basemap
                initStyle: Enums.BasemapStyleArcGISTopographic
            }
        }

        Button {
            id: changeBasemapButton
            anchors {
                horizontalCenter: view.horizontalCenter
                bottom: view.attributionTop
                bottomMargin: 10
            }
            text: "Change Basemap"
            checkable: true
        }

        BasemapGallery {
            id: basemapGallery
            anchors.centerIn: view
            geoModel: map
            visible: changeBasemapButton.checked;
            onCurrentBasemapChanged: {
                changeBasemapButton.checked = false;
            }
        }
    }
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.