Web tiled layer

View on GitHub

Sample viewer app

Display a tiled web layer.

Web tiled layer sample

Use case

Tiled map services are a set of pre-generated images (e.g. "tiles") arranged in folders for each row, column, and zoom level. As you navigate the map, map tiles are requested for the current extent. AGSArcGISTiledLayer and AGSWMTSLayer are types of tiled map services used for specific data types. AGSWebTiledLayer is useful for displaying other data sources that contain tiles arranged in a row/column/level directory structure, such as OpenStreetMap.

How to use the sample

Run the sample and a map will appear. As you navigate the map, map tiles will be fetched automatically and displayed on the map.

How it works

Web tiled services use a uniform addressing scheme with pre-rendered tiles. Image tiles are accessed via a URL template string, with parameters for subdomain, level, column, and row.

Subdomain is optional and allows Runtime to balance requests among multiple servers for enhanced performance.
Level, row, and column select the tiles to load based on the visible extent of the map.

Create an AGSWebTiledLayer from a URL and a list of subdomains.
Create an AGSBasemap from the layer.
Update the attribution on the layer. Note: this is a necessary step because web tiled services don't have associated service metadata.

Relevant API

AGSBasemap
AGSWebTiledLayer

About the data

The basemap in this sample is provided by Stamen Design. Stamen publishes tiled services based on OpenStreetMap data with several unique styles applied.

Additional information

For more information about web tiled layers, see the following resources:

Sample Code

WebTiledLayerViewController.swift
Use dark colors for code blocksCopy
//
// Copyright 2017 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
import ArcGIS

class WebTiledLayerViewController: UIViewController {
    @IBOutlet private var mapView: AGSMapView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // add the source code button item to the right of navigation bar
        (self.navigationItem.rightBarButtonItem as! SourceCodeBarButtonItem).filenames = ["WebTiledLayerViewController"]

        // add web tiled layer at index 0 at start
        self.applyWebTiledLayer(at: 0)
    }

    private func applyWebTiledLayer(at index: Int) {
        // web tiled layer
        let webTiledLayer = self.webTiledLayer(for: index)

        // initialize basemap with web tiled layer
        let basemap = AGSBasemap(baseLayer: webTiledLayer)

        // initialize map with the basemap
        let map = AGSMap(basemap: basemap)

        self.mapView.map = map
    }

    private func webTiledLayer(for index: Int) -> AGSWebTiledLayer {
        // url template for web tiled layer
        let urlTemplate: String

        switch index {
        case 0:
            // toner
            urlTemplate = "https://stamen-tiles-{subDomain}.a.ssl.fastly.net/toner/{level}/{col}/{row}.png"
        case 1:
            // terrain
            urlTemplate = "https://stamen-tiles-{subDomain}.a.ssl.fastly.net/terrain/{level}/{col}/{row}.jpg"
        default:
            // water color
            urlTemplate = "https://stamen-tiles-{subDomain}.a.ssl.fastly.net/watercolor/{level}/{col}/{row}.jpg"
        }

        // sub domains
        let subDomains = ["a", "b", "c", "d"]

        // attribution
        let attribution = """
            Map tiles by <a href="http://stamen.com/">Stamen Design</a>, \
            under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. \
            Data by <a href="http://openstreetmap.org/">OpenStreetMap</a>, \
            under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.
            """

        // initialize web tiled layer
        let webTiledLayer = AGSWebTiledLayer(urlTemplate: urlTemplate, subDomains: subDomains)

        // assign attribution
        webTiledLayer.attribution = attribution

        return webTiledLayer
    }

    @IBAction private func segmentedControlValueChanged(_ sender: UISegmentedControl) {
        // update web tiled layer
        self.applyWebTiledLayer(at: sender.selectedSegmentIndex)
    }
}