Thank you Sage_Wall. You got me pointed in the right direction as far as the LayerList. I've gotten that code to work. It includes some code for another app of mine that has filtered jurisdictional boundaries in the webmap. So now it goes to the geometry and not full extent.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Map components LayerList Example</title>
<link rel="icon" href="data:;base64,=" />
<style>
html,
body {
margin: 0;
}
.tool-container {
display: flex;
gap: 0.5rem;
}
arcgis-map {
display: block;
height: 100vh;
}
</style>
<!-- Load Calcite Components-->
<!-- Load the ArcGIS Maps SDK for JavaScript -->
</head>
<body>
<arcgis-map
item-id="237b9584339446a0b56317b5962a4971">
<arcgis-home>
</arcgis-home>
<arcgis-layer-list
position="bottom-left">
</arcgis-layer-list>
</arcgis-map>
<script type="module">
const arcgisMap = document.querySelector("arcgis-map");
arcgisMap.addEventListener("arcgisViewReadyChange", (event) => {
const view = event.detail;
if (!view) {
console.warn("View not ready");
return;
}
console.log("View is ready via arcgisViewReadyChange");
const homeWidget = view.ui.find("home");
if (homeWidget) {
console.log("Home widget found");
homeWidget.on("go", () => {
console.log("Home button clicked");
view.map.layers.forEach((layer) => {
console.log("Layer:", layer.title);
layer.visible = layer.title === "Trailheads" ? true :
layer.title === "Trails" ? false :
layer.visible;
});
});
} else {
console.warn("Home widget not found in view.ui");
}
});
// Layer list logic
const arcgisLayerList = document.querySelector("arcgis-layer-list");
arcgisLayerList.listItemCreatedFunction = (event) => {
const { item } = event;
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"
}
]];
}
};
arcgisLayerList.addEventListener("arcgisTriggerAction", async (event) => {
const { id } = event.detail.action;
const clickedLayer = event.detail.item.layer;
if (id !== "zoom-to-layer") return;
const view = await document.querySelector("arcgis-map").view;
try {
const layerView = await view.whenLayerView(clickedLayer);
await layerView.when(); // wait until it's fully loaded
// Try getting filter from layerView
let where = "1=1"; // default
if (layerView.filter && layerView.filter.where) {
where = layerView.filter.where;
} else if (clickedLayer.definitionExpression) {
where = clickedLayer.definitionExpression;
}
// Build the query using the determined filter
const query = clickedLayer.createQuery();
query.where = where;
query.returnGeometry = true;
query.outSpatialReference = view.spatialReference;
const result = await clickedLayer.queryFeatures(query);
if (result.features.length) {
// Calculate the union extent of all features
let extent = result.features[0].geometry.extent;
for (let i = 1; i < result.features.length; i++) {
extent = extent.union(result.features[i].geometry.extent);
}
if (extent) {
await view.goTo(extent.expand(1.2));
} else {
console.warn("Features found but no extent available.");
}
} else {
console.warn("No features found with the applied filter.");
}
} catch (error) {
if (error.name !== "AbortError" && error.name !== "view:goto-interrupted") {
console.error("Zoom error:", error);
} else {
console.info("Zoom was interrupted:", error.message);
}
}
});
</script>
