Skip To Content ArcGIS for Developers Sign In Dashboard

ArcGIS Runtime SDK for Qt

Vector tiled layer (URL)

Sample Viewer View Sample on GitHub

Load an ArcGIS Vector Tiled Layer from a URL.

Use case

Vector tile basemaps can be created in ArcGIS Pro and published as offline packages or online services. ArcGISVectorTiledLayer has many advantages over traditional raster based basemaps (ArcGISTiledLayer), including smooth scaling between different screen DPIs, smaller package sizes, and the ability to rotate symbols and labels dynamically.

How to use the sample

Use the drop down menu to load different vector tile basemaps.

How it works

  1. An ArcGISVectorTiledLayer is constructed with an ArcGIS Online service URL
  2. The layer instance is added to the Map

Relevant API

  • ArcGISVectorTiledLayer
  • Basemap

Tags

tiles, vector, vector basemap, vector tiled layer, vector tiles

Sample Code

import QtQuick 2.6
import QtQuick.Controls 2.2
import Esri.ArcGISRuntime 100.9

Rectangle {
    width: 800
    height: 600
    
    //! [display vector tiled layer]
    // Create MapView that contains a Map
    MapView {
        id: mapview
        anchors.fill: parent
        Map {
            id: map
            Basemap {
                // Nest an ArcGISVectorTiledLayer Layer in the Basemap
                ArcGISVectorTiledLayer {
                    url: "https://www.arcgis.com/home/item.html?id=7675d44bb1e4428aa2c30a9b68f97822"
                }
            }
            initialViewpoint: ViewpointCenter {
                center: Point { x:-80.18; y: 25.778135; spatialReference: SpatialReference { wkid: 4326 } }
                targetScale: 150000
            }
        }
    }
    //! [display vector tiled layer]

    ComboBox {
        id: comboBoxBasemap
        anchors {
            left: parent.left
            top: parent.top
            margins: 15
        }
        property int modelWidth: 0
        width: modelWidth + leftPadding + rightPadding + indicator.width
        model: ["Mid-Century","Colored Pencil","Newspaper","Nova", "World Street Map (Night)"]
        onCurrentTextChanged: {
            // Call this JavaScript function when the current selection changes
            if (map.loadStatus === Enums.LoadStatusLoaded)
                changeBasemap();
        }

        Component.onCompleted : {
            for (let i = 0; i < model.length; ++i) {
                metrics.text = model[i];
                modelWidth = Math.max(modelWidth, metrics.width);
            }
        }

        TextMetrics {
            id: metrics
            font: comboBoxBasemap.font
        }

        function changeBasemap() {
            // Determine the selected basemap, create that type, and set the Map's basemap
            let layer;
            switch (comboBoxBasemap.currentText) {
            case "Mid-Century":
            default:
                layer = ArcGISRuntimeEnvironment.createObject("ArcGISVectorTiledLayer", {url:"https://www.arcgis.com/home/item.html?id=7675d44bb1e4428aa2c30a9b68f97822"});
                break;
            case "Colored Pencil":
                layer = ArcGISRuntimeEnvironment.createObject("ArcGISVectorTiledLayer", {url:"https://www.arcgis.com/home/item.html?id=4cf7e1fb9f254dcda9c8fbadb15cf0f8"});
                break;
            case "Newspaper":
                layer = ArcGISRuntimeEnvironment.createObject("ArcGISVectorTiledLayer", {url:"https://www.arcgis.com/home/item.html?id=dfb04de5f3144a80bc3f9f336228d24a"});
                break;
            case "Nova":
                layer = ArcGISRuntimeEnvironment.createObject("ArcGISVectorTiledLayer", {url:"https://www.arcgis.com/home/item.html?id=75f4dfdff19e445395653121a95a85db"});
                break;
            case "World Street Map (Night)":
                layer = ArcGISRuntimeEnvironment.createObject("ArcGISVectorTiledLayer", {url:"https://www.arcgis.com/home/item.html?id=86f556a2d1fd468181855a35e344567f"});
                break;
            }
            const newBasemap = ArcGISRuntimeEnvironment.createObject("Basemap");
            newBasemap.baseLayers.append(layer);
            map.basemap = newBasemap;
        }
    }
}