Add tiled layer

View on GitHub

Load an ArcGIS tiled layer from a URL.

Image of add tiled layer

Use case

An ArcGISTiledLayer consumes raster tiles provided by an ArcGIS service or a tile package (.tpk & .tpkx). Dividing a raster into tiles provides the user with relevant tiles and level of detail while panning and zooming, allowing for rapid map visualization and navigation. For example, say you wanted an application with a map containing all museums in your city so that you could share this with tourists. Since only the museums would need to support being identifiable or queryable within the app, all other contextual information required to orient and direct the tourists could be sourced from a single ArcGIS tiled layer, leading to faster performance and minimizing the time to load the map.

How to use the sample

Launch the app to view the "World Topographic Map" tile layer as the basemap.

How it works

Create an ArcGISTiledLayer object from a URL.
Create a Basemap passing in the tiled layer.
Create an ArcGISMap with the basemap.
Set the map on the ArcGISMapView.

Relevant API

ArcGISMap
ArcGISMapViewController
ArcGISTiledLayer
Basemap

About the data

The application utilizes the "World Topographic Map" tile layer. This presents a simple yet powerful illustration of adding visualization context to a basemap through the use of an ArcGIS tiled layer.

Additional information

An ArcGISTiledLayer can also be added to the ArcGISMap as a layer, but it's best practice to use as a basemap since its purpose is to provide geographical context. ArcGIS tiled layers do not support reprojection, query, select, identify, or editing.

Sample Code

add_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:flutter/material.dart';

import '../../utils/sample_state_support.dart';

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

  @override
  State<AddTiledLayer> createState() => _AddTiledLayerState();
}

class _AddTiledLayerState extends State<AddTiledLayer> with SampleStateSupport {
  // Create a controller for the map view.
  final _mapViewController = ArcGISMapView.createController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Add a map view to the widget tree and set a controller.
      body: ArcGISMapView(
        controllerProvider: () => _mapViewController,
        onMapViewReady: onMapViewReady,
      ),
    );
  }

  void onMapViewReady() {
    // Create a tiled layer with a URL to a tiled map service.
    final tiledLayer = ArcGISTiledLayer.withUri(
      Uri.parse(
        'http://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer',
      ),
    );
    // Create a basemap with the tiled layer.
    final basemap = Basemap.withBaseLayer(tiledLayer);
    // Create a map with the basemap.
    final map = ArcGISMap.withBasemap(basemap);
    // Set the map to the map view.
    _mapViewController.arcGISMap = map;
  }
}