ArcGIS vector tiled layer (custom style)

View on GitHubSample viewer app

Load ArcGIS vector tiled layers using custom styles.

Custom styled ArcGIS vector tiled layer Offline custom style

Use case

Vector tile basemaps can be created in ArcGIS Pro and published as offline packages or online services. You can create a custom style tailored to your needs and easily apply them to your map. AGSArcGISVectorTiledLayer has many advantages over traditional raster based basemaps (AGSArcGISTiledLayer), including smooth scaling between different screen DPIs, smaller package sizes, and the ability to rotate symbols and labels dynamically.

How to use the sample

Pan and zoom to explore the vector tile basemap.

How it works

  1. Construct an AGSArcGISVectorTiledLayer with the URL of a custom style from AGOL.
    • Follow these steps to create a vector tiled layer with a custom style from offline resources:
    i. Construct an AGSVectorTileCache using the name of the local vector tile package.
    ii. Create an AGSPortalItem using the URL of a custom style.
    iii. Create an AGSExportVectorTilesTask using the portal item.
    iv. Get the AGSExportVectorTilesJob using AGSExportVectorTilesTask.exportStyleResourceCacheJob(withDownloadDirectory:).
    v. Start the job using AGSExportVectorTilesJob.start(statusHandler:completion:).
    vi. Once the job is complete, construct an AGSArcGISVectorTiledLayer using the vector tile cache and the AGSItemResourceCache from the job's result.
  2. Create an AGSBasemap from the AGSArcGISVectorTiledLayer.
  3. Assign the AGSBasemap to the map's basemap.

Relevant API

  • AGSArcGISVectorTiledLayer
  • AGSExportVectorTilesTask
  • AGSItemResourceCache
  • AGSMap
  • AGSVectorTileCache

Tags

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

Sample Code

VectorStylesViewController.swiftVectorStylesViewController.swiftVectorTileCustomStyleViewController.swift
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
//
// 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.
//

import UIKit

protocol VectorStylesVCDelegate: AnyObject {
    func vectorStylesViewController(_ vectorStylesViewController: VectorStylesViewController, didSelectItemWithID itemID: String)
}

class VectorStylesViewController: UITableViewController {
    /// The item IDs of the custom styles.
    var itemIDs: [String] = []
    /// The item ID of the selected style.
    var selectedItemID: String?

    weak var delegate: VectorStylesVCDelegate?

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = super.tableView(tableView, cellForRowAt: indexPath)
        // Indicate the displayed item.
        cell.accessoryType = itemIDs[indexPath.row] == selectedItemID ? .checkmark : .none
        return cell
    }

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let itemID = itemIDs[indexPath.row]
        delegate?.vectorStylesViewController(self, didSelectItemWithID: itemID)
        // Indicate that the previous item has been deselected.
        if let previousItemID = selectedItemID, let previousRow = itemIDs.firstIndex(of: previousItemID) {
            tableView.cellForRow(at: IndexPath(row: previousRow, section: 0))?.accessoryType = .none
        }
        // Indicate which cell has been selected.
        tableView.cellForRow(at: indexPath)?.accessoryType = .checkmark

        selectedItemID = itemID
    }
}

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