Intro to TileLayer

The TileLayer allows you to work with a cached map service and add it to a Map as a tile layer. A cached service accesses tiles from a cache instead of dynamically rendering images. Because they are cached, tiled layers render faster than MapImageLayers.

This sample shows how to add an instance of TileLayer from a portal to a WebMap in a MapView. The resulting polygon features can be clicked on to see the popup and the highlighted features.

How it works

After loading the TileLayer, find the layer of interest in the cached map service. Then create a PopupTemplate for one or more sublayers.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
layer.load().then(() => {
  const sublayer = layer.allSublayers.find((sublayer) => sublayer.title === "Map Unit Polygons - CO_202310");
  sublayer.popupTemplate = new PopupTemplate({
    title: "{AREASYMBOL}",
    content: [{
      type: "fields",
      fieldInfos: [{
          fieldName: "MUSYM",
          label: "Map Unit Polygons"
        },
        {
          fieldName: "SPATIALVER",
          label: "Version"
        }
      ]
    }]
  });
})