Part 1: Reset Layer Visibility on Home Button Click
The <arcgis-home> component triggers a zoom to the default extent, but doesn't reset layers by default. To do this, manually listen for the click on the Home button and reset layer visibility like this:
const homeBtn = document.querySelector("arcgis-home");
homeBtn.addEventListener("click", () => {
const view = document.querySelector("arcgis-map").view;
// Reset visibility for each layer to default (example: make all layers off)
view.map.layers.forEach((layer) => {
layer.visible = layer.title === "Basemap" ? true : false; // customize per your need
});
});
Replace the logic based on your layer names or default visibility needs.
Part 2: Add ZoomTo Action in LayerList Items
To add a ZoomTo button and make it functional, customize the listItemCreatedFunction:
document.querySelector("arcgis-layer-list").listItemCreatedFunction = (event) => {
const { item } = event;
// Skip group layers
if (item.layer.type !== "group") {
item.panel = {
content: "legend",
open: false,
};
item.actionsOpen = true;
item.actionsSections = [
[
{
title: "Zoom to layer",
className: "esri-icon-zoom-in-magnifying-glass",
id: "zoom-to-layer"
}
]
];
}
};
// Handle the ZoomTo action
document.querySelector("arcgis-layer-list").addEventListener("trigger-action", (event) => {
const actionId = event.action.id;
const layer = event.item.layer;
const view = document.querySelector("arcgis-map").view;
if (actionId === "zoom-to-layer" && layer.fullExtent) {
view.goTo(layer.fullExtent);
}
});
Ensure layers have fullExtent available (some service layers may require loading).
You can extend this to add more actions (e.g., toggle visibility, transparency).
