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 popup 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;