Add tiled layer as basemap

View on GitHub

Load an offline copy of a tiled map service as a basemap.

Image of add tiled layer as basemap

Use case

Constructing an ArcGISTiledLayer from a local tile package (.tpk & .tpkx), allows you to use that basemap tiled service when the application is offline. Dividing a raster into tiles allows the map to provide relevant tiles and level of detail to the user when panning and zooming. For example, when working in an environment that has no connectivity, this could provide access to a map for navigating your surroundings.

How to use the sample

Launch the app to view the "San Francisco offline tile package" as the basemap.

How it works

  1. Create a TileCache, specifying the path to the local tile package.
  2. Create an ArcGISTiledLayer with the tile cache.
  3. Create a Basemap with the tiled layer.
  4. Create an ArcGISMap with the basemap and set it on the ArcGISMapView.

Relevant API

  • ArcGISMap
  • ArcGISTiledLayer
  • Basemap
  • TileCache

Offline data

San Francisco offline tile package

About the data

The map opens to a view of the city of San Francisco, CA. In a disconnected environment, this basemap tile service would be fully accessible to zoom and pan as if you were connected to an online service.

Additional information

ArcGISTiledLayer and TileCache supports both .tpk and .tpkx file formats.

Tags

cache, layers, offline, tile

Sample Code

add_tiled_layer_as_basemap.dart
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
//
// 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_data.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';

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

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

  @override
  AddTiledLayerAsBasemapState createState() => AddTiledLayerAsBasemapState();
}

class AddTiledLayerAsBasemapState extends State<AddTiledLayerAsBasemap>
    with SampleStateSupport {
  // Create a controller for the map view.
  final _mapViewController = ArcGISMapView.createController();
  // A flag for when the map view is ready.
  var _ready = false;

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

  void onMapViewReady() async {
    await downloadSampleData(['e4a398afe9a945f3b0f4dca1e4faccb5']);
    final appDir = await getApplicationDocumentsDirectory();

    // Create a tile cache, specifying the path to the local tile package.
    const tilePackageName = 'SanFrancisco.tpkx';
    final pathToFile = '${appDir.absolute.path}/$tilePackageName';
    final tileCache = TileCache.withFileUri(Uri.parse(pathToFile));

    // Create a tiled layer with the tile cache.
    final tiledLayer = ArcGISTiledLayer.withTileCache(tileCache);
    // 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;
    // Set the ready state variable to true to enable the UI.
    setState(() => _ready = true);
  }
}

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