Add web tiled layer

View on GitHub

Display a tiled web layer.

Image of add web tiled layer

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. ArcGISTiledLayer and WMTSLayer are types of tiled map services used for specific data types. WebTiledLayer 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 the Maps SDK 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.

To display the web tiled layer, this sample:

Creates a WebTiledLayer from a URL.
Creates a new Basemap from the layer.
Updates the attribution on the layer. Note: this is a necessary step because web tiled services don't have associated service metadata.
Displays the basemap.

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

Relevant API

Basemap
WebTiledLayer

About the data

The basemap in this sample is provided by ArcGIS Living Atlas of the World. ArcGIS Living Atlas of the World provides tiled services with several unique styles.

Sample Code

add_web_tiled_layer.dart
Use dark colors for code blocksCopy
// Copyright 2024 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 'package:arcgis_maps/arcgis_maps.dart';
import 'package:arcgis_maps_sdk_flutter_samples/utils/sample_state_support.dart';
import 'package:flutter/material.dart';

class AddWebTiledLayer extends StatefulWidget {
  const AddWebTiledLayer({super.key});

  @override
  State<AddWebTiledLayer> createState() => _AddWebTiledLayerState();
}

class _AddWebTiledLayerState extends State<AddWebTiledLayer>
    with SampleStateSupport {
  // Create a controller for the map view.
  final _mapViewController = ArcGISMapView.createController();
  // A flag for when the map view is ready and controls can be used.
  var _ready = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        top: false,
        child: Stack(
          children: [
            Column(
              children: [
                Expanded(
                  // Add a map view to the widget tree and set a controller.
                  child: ArcGISMapView(
                    controllerProvider: () => _mapViewController,
                    onMapViewReady: onMapViewReady,
                  ),
                ),
              ],
            ),
            // Display a progress indicator and prevent interaction until state is ready.
            Visibility(
              visible: !_ready,
              child: const SizedBox.expand(
                child: ColoredBox(
                  color: Colors.white30,
                  child: Center(child: CircularProgressIndicator()),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // Called when the map view is ready.
  void onMapViewReady() {
    // Templated URL to the tile service.
    const templateUrl =
        'https://server.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{level}/{row}/{col}.jpg';
    // Attribution string for the Living Atlas service.
    const attribution =
        'Map tiles by ArcGIS Living Atlas of the World, under Esri Master License Agreement. Data by Esri, Garmin, GEBCO, NOAA NGDC, and other contributors.';

    // Create the WebTiledLayer from the URL.
    final webTiledLayer = WebTiledLayer(template: templateUrl)
      // Set the attribution.
      ..setAttribution(attribution);

    // Create a basemap from the WebTiledLayer.
    final basemap = Basemap.withBaseLayer(webTiledLayer);
    // Create a map to hold the BaseMap.
    final map = ArcGISMap.withBasemap(basemap);
    // Set the ArcGISMap to the map view controller.
    _mapViewController.arcGISMap = map;

    // Set the ready state variable to true to enable the sample UI.
    setState(() => _ready = true);
  }
}