Skip to content

Add WMTS layer

View on GitHub

Display a layer from a Web Map Tile Service.

Image of Add WMTS Layer sample

Use case

WMTS services can have several layers. You can use the ArcGIS Maps SDKs to explore the layers available from a service. This would commonly be used to enable a browsing experience where users can choose which layers they want to display at run time.

How to use the sample

The layer will be displayed automatically. Use the buttons to choose a different method of loading the layer.

How it works

To display a WMTS layer directly from a URL:

  1. Create a WMTSService object using the URL of the WMTS service.
  2. Create a WMTSLayer object with the ID of the layer to display.

To explore layers from a WMTS service:

  1. Create a WMTSService object using the URL of the WMTS service.
  2. After loading the WMTS service, get the list of WMTSLayerInfo objects from the service info of the WMTS service.
  3. Use one of the layer infos to create the WMTS layer.
  4. Create a basemap with the WMTS layer and set it to the map.

Relevant API

  • WMTSLayer
  • WMTSLayerInfo
  • WMTSService
  • WMTSServiceInfo

About the data

The map visualizes world time zones.

Tags

layer, OGC, raster, tiled, web map tile service

Sample Code

AddWMTSLayerView.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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
// Copyright 2025 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
//
//   https://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 ArcGIS
import SwiftUI

struct AddWMTSLayerView: View {
    /// The view model for the sample.
    @StateObject private var model = Model()

    /// The WMTS layer source selected by the picker.
    @State private var selectedLayerSource = WMTSLayerSource.wmtsLayerInfo

    /// The error shown in the error alert.
    @State private var error: Error?

    var body: some View {
        MapView(map: model.map)
            .task {
                do {
                    try await model.loadService()
                    model.setWMTSLayer(for: selectedLayerSource)
                } catch {
                    self.error = error
                }
            }
            .toolbar {
                ToolbarItem(placement: .bottomBar) {
                    Picker("WMTS Layer", selection: $selectedLayerSource) {
                        ForEach(WMTSLayerSource.allCases, id: \.self) { source in
                            Text(source.label)
                        }
                    }
                    .onChange(of: selectedLayerSource) {
                        model.setWMTSLayer(for: selectedLayerSource)
                    }
                }
            }
            .errorAlert(presentingError: $error)
    }
}

private extension AddWMTSLayerView {
    /// The view model that contains the map and WMTS layer.
    @MainActor
    final class Model: ObservableObject {
        /// A map with no specified style.
        let map = Map()

        /// The web map tile service.
        private let service = WMTSService(url: URL(string: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/WMTS")!)

        /// Loads the web map tile service.
        func loadService() async throws {
            try await service.load()
        }

        /// Sets a WMTS layer on the map.
        /// - Parameter source: The source that was used to create the WMTS layer.
        func setWMTSLayer(for source: WMTSLayerSource) {
            map.removeAllOperationalLayers()
            switch source {
            case .url:
                // Create a WMTS layer using the service URL and layer ID.
                let wmtsLayer = WMTSLayer(url: service.url, layerID: "WorldTimeZones")
                map.addOperationalLayer(wmtsLayer)
            case .wmtsLayerInfo:
                // Create a WMTS layer using a WMTS layer info.
                let serviceInfo = service.serviceInfo!
                let layerInfos = serviceInfo.layerInfos
                let layerInfo = layerInfos.first!
                let wmtsLayer = WMTSLayer(layerInfo: layerInfo)
                map.addOperationalLayer(wmtsLayer)
            }
        }
    }
}

private extension AddWMTSLayerView {
    /// A source that was used to create a WMTS layer.
    enum WMTSLayerSource: CaseIterable {
        case wmtsLayerInfo, url

        /// A human-readable label for the WMTS layer source.
        var label: String {
            switch self {
            case .wmtsLayerInfo: "WMTS Layer Info"
            case .url: "URL"
            }
        }
    }
}

#Preview {
    AddWMTSLayerView()
}

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