The TileLayer lets you add a cached map service to a Map component as a tile layer. Instead of rendering images dynamically, a cached service retrieves pre-generated tiles, allowing layers to load and display more quickly than MapImageLayers.

This sample demonstrates adding a TileLayer from a portalItem to a Map instance, and subsequently, to a Map component. The resulting polygon features in the layer can be clicked to display a popup and highlight the selected features.

How it works

After loading the TileLayer, find the sublayer of interest in the cached map service. Then create a PopupTemplate and assign it to the sublayer’s popupTemplate property.

// Find the sublayer matching a particular title.
const sublayer = layer.allSublayers.find((sublayer) => {
  return sublayer.title === "Map Unit Polygons - CO_202310";
});

// Create a PopupTemplate instance.
const popupTemplate = new PopupTemplate({
  title: "{AREASYMBOL}",
  content: [
    {
      type: "fields",
      fieldInfos: [
        { fieldName: "MUSYM", label: "Map Unit Polygons" },
        { fieldName: "SPATIALVER", label: "Version" },
      ],
    },
  ],
});

// Assign the PopupTemplate instance to
// the sublayer's popupTemplate property.
sublayer.popupTemplate = popupTemplate;