<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<!--
ArcGIS API for JavaScript, https://js.arcgis.com
For more information about the widgets-layerlist-actions sample,
read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/latest/sample-code/widgets-layerlist-actions/index.html
-->
<title>
LayerList widget with actions | Sample | ArcGIS API for JavaScript 4.16
</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.error {
color: rgb(255,69,0);
}
.message {
font-style: italic;
font-size: 1.2em;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.16/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GroupLayer",
"esri/layers/MapImageLayer",
"esri/layers/Layer",
"esri/widgets/LayerList"
], function (Map, MapView, GroupLayer, MapImageLayer, Layer, LayerList) {
// Create layer showing sample data of the United States.
const USALayer = new MapImageLayer({
url:
"http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
title: "US Sample Data"
});
// Create layer showing sample census data of the United States.
// Set visibility to false so it's not visible on startup.
const censusLayer = new MapImageLayer({
url:
"http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
title: "US Sample Census",
visible: false
});
// Create GroupLayer with the two MapImageLayers created above
// as children layers.
const demographicGroupLayer = new GroupLayer({
title: "US Demographics",
visible: true,
visibilityMode: "exclusive",
layers: [USALayer, censusLayer],
opacity: 0.75
});
// Create a map and add the group layer to it
const map = new Map({
basemap: "dark-gray-vector",
layers: [demographicGroupLayer]
});
Layer.fromPortalItem({
portalItem: {
id: "a5ae5276bb6e4793a82d692d4d15ef98"
}
})
.then((layer) => layer.load())
.then((layer) => {
map.add(layer);
});
// Add the map to a MapView
const view = new MapView({
center: [-98.5795, 39.8282],
zoom: 4,
container: "viewDiv",
map: map
});
// Creates actions in the LayerList.
function defineActions(event) {
// The event object contains an item property.
// is is a ListItem referencing the associated layer
// and other properties. You can control the visibility of the
// item, its title, and actions using this object.
const item = event.item;
if (item.title === "US Demographics") {
// An array of objects defining actions to place in the LayerList.
// By making this array two-dimensional, you can separate similar
// actions into separate groups with a breaking line.
item.actionsSections = [
[
{
title: "Go to full extent",
className: "esri-icon-zoom-out-fixed",
id: "full-extent"
},
{
title: "Layer information",
className: "esri-icon-description",
id: "information"
}
],
[
{
title: "Increase opacity",
className: "esri-icon-up",
id: "increase-opacity"
},
{
title: "Decrease opacity",
className: "esri-icon-down",
id: "decrease-opacity"
}
]
];
}
if (event.item.layer.portalItem) {
if (event.item.layer.portalItem.tags.includes("deprecated")) {
const elem = document.createElement("div");
elem.classList.add("error");
elem.classList.add("message");
elem.innerText = "Item Deprecated";
item.panel = {
content: elem,
className: "esri-icon-notice-triangle error"
};
}
}
}
view.when(function () {
// Create the LayerList widget with the associated actions
// and add it to the top-right corner of the view.
const layerList = new LayerList({
view: view,
// executes for each ListItem in the LayerList
listItemCreatedFunction: defineActions
});
// Event listener that fires each time an action is triggered
layerList.on("trigger-action", function (event) {
// The layer visible in the view at the time of the trigger.
const visibleLayer = USALayer.visible ? USALayer : censusLayer;
// Capture the action id.
const id = event.action.id;
if (id === "full-extent") {
// if the full-extent action is triggered then navigate
// to the full extent of the visible layer
view.goTo(visibleLayer.fullExtent).catch(function (error) {
if (error.name != "AbortError") {
console.error(error);
}
});
} else if (id === "information") {
// if the information action is triggered, then
// open the item details page of the service layer
window.open(visibleLayer.url);
} else if (id === "increase-opacity") {
// if the increase-opacity action is triggered, then
// increase the opacity of the GroupLayer by 0.25
if (demographicGroupLayer.opacity < 1) {
demographicGroupLayer.opacity += 0.25;
}
} else if (id === "decrease-opacity") {
// if the decrease-opacity action is triggered, then
// decrease the opacity of the GroupLayer by 0.25
if (demographicGroupLayer.opacity > 0) {
demographicGroupLayer.opacity -= 0.25;
}
}
});
// Add widget to the top right corner of the view
view.ui.add(layerList, "top-right");
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.