This sample demonstrates how to create and add a CatalogLayer to 2D MapView. The CatalogLayer points to different portal items and services, helping you to organize and manage your data. It also makes it simpler for users to find information. Instead of manually gathering and adding each dataset separately in your map, you can create a CatalogLayer, a centralized reference point for all the data you need.
The map shows historic Sanborn fire insurance maps for different years for Cleveland, OH, Pittsburgh, PA and Toronto, Canada. The catalog layer also references the latest neighborhood and parcel feature services for the same areas.
The catalog layer is initialized as shown below when the application loads:
// Create a new CatalogLayer instance from a portal item
const layer = new CatalogLayer({
portalItem: {
id: "d457418d6d374bd08b899dccf4289bfd"
},
outFields: ["*"],
useViewTime: false
});
This time-enabled catalog layer can easily be set up with TimeSlider widget. Users can enable and disable the time in the application by setting the CatalogLayer's useViewTime property. If the time is enabled, users can filter the data on the map by time.
// enable or disable the time slider based on the time button state
const timeButton = document.getElementById("time-button");
timeButton.addEventListener("calciteSwitchChange", () => {
const isChecked = timeButton.checked;
layer.useViewTime = isChecked;
timeSlider.disabled = !isChecked;
});
CatalogLayer references different types of services including but not limited to feature services, map services, scene services and image services. This catalog layer references feature and map services. Users can filter apply featureEffect to the CatalogLayer's footprintLayer based on an item item as shown below.
// filter the layers in catalog layer based on selected item type
const itemTypeChip = document.getElementById("item-type-chips");
itemTypeChip.addEventListener("calciteChipGroupSelect", async (event) => {
await view.goTo(layer.fullExtent);
const itemType = event.target.selectedItems[0].value
// set the feature effect to show only the selected item type
layer.footprintLayer.featureEffect = itemType === "Show all" ? undefined : {
filter: {
where: `cd_itemType = '${itemType}'`
},
excludedEffect: "grayscale(70%) opacity(50%)"
};
});
Once the user finds and filters the layers they need in the map, they can save them to a GroupLayer, as shown below.
const groupLayerTitleInput = document.getElementById("grouplayer-title-input");
document.getElementById("save-grouplayer-button").addEventListener("click", async () => {
try {
// get all visible layers from the dynamicGroupLayer
const layers = await Promise.all(
layer.dynamicGroupLayer.layers.map((layer) => createLayerFromDynamicLayer(layer))
);
// create a new group layer and add the visible sub layers of the dynamicGroupLayer
const groupLayer = new GroupLayer({
title: groupLayerTitleInput.value,
layers
});
await groupLayer.loadAll();
// save the group layer as a portal item
const portalItem = new PortalItem({
title: groupLayerTitleInput.value
});
const savedItem = await groupLayer.saveAs(portalItem);
// open the portal item page in a new tab
window.open(savedItem.itemPageUrl, '_blank');
// Handle error
} catch (error) {
if (error.name != "identity-manager:user-aborted"){
return;
}
}
});