layer list widget with actions

litch · ‎08-29-2022

hey, i want to add the link to the portal item/rest service to a layer list in Esri js api 4.

the way the official sample, starts the event is checking which one of only two possible layers is visible and assuming that's the layer to get properties from.

https://developers.arcgis.com/javascript/latest/sample-code/widgets-layerlist-actions/

I'm trying use a webmap with several layers and cant tell the widget which one of them is the one I'm trying to use.

I made a sample based on the original, id love help in filling the "visibleLayer" obj with the correct layer.
```

<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.17
</title>

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>

<link
rel="stylesheet"
href="https://js.arcgis.com/4.17/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.17/"></script>

<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GroupLayer",
"esri/layers/MapImageLayer",
"esri/widgets/LayerList",
"esri/layers/FeatureLayer",

], function (Map, MapView, GroupLayer, MapImageLayer, LayerList,FeatureLayer) {
// Create layer showing sample data of the United States.

var USALayer = new FeatureLayer({
url:"https://services3.arcgis.com/1pxU2hJU9ZszJDcX/ArcGIS/rest/services/Young_Adult_Treatment_Facilities/FeatureServer/0",
title: "TEST",
visible: false
});

// Create layer showing sample census data of the United States.
// Set visibility to false so it's not visible on startup.

var censusLayer = new FeatureLayer({
url:"https://services3.arcgis.com/1pxU2hJU9ZszJDcX/ArcGIS/rest/services/PrescriptionDrugLocations/FeatureServer",
title: "US Sample Census",
visible: true
});

// Create a map and add the group layer to it

var map = new Map({
basemap: "dark-gray-vector",
layers: [USALayer, censusLayer]
});

// Add the map to a MapView

var 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.

var item = event.item;
// 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"
}
]
];

}

view.when(function () {
// Create the LayerList widget with the associated actions
// and add it to the top-right corner of the view.

var 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.
// Capture the action id.
var visibleLayer
var 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);
}
});

// 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>

```

ChipMorgan65 · ‎08-29-2022

Try this:

var visibleLayer=event.item.layer

View solution in original post

ChipMorgan65 · ‎08-29-2022

Try this:

var visibleLayer=event.item.layer

litch · ‎08-29-2022

thank you, it works! did you manage to find the event propreties in the documantaion? can you link it?

ChipMorgan65 · ‎08-30-2022

I've been looking into layer list samples and stumbled across a variety of attributes and code.

Take a look at this code fragment. It combines several ESRI samples into a layerlist that:

Includes an integrated legend
Controls opacity of the layer
Zooms to full extent
Links to the layer's information page
Allows layers in the layer list to be draggable up or down in the list

///********** Layer Widget ***************///

// https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-layerlist-action...

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;

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: "Decrease transparency",

className: "esri-icon-up",

id: "increase-opacity"

},

{

title: "Increase transparency",

className: "esri-icon-down",

id: "decrease-opacity"

}

]

];

if (item.layer.type != "group") {

// don't show legend twice

item.panel = {

content: "legend",

open: false

};

}

// Adds a slider for updating a group layer's opacity

// if (item.children.length > 1 && item.parent) {

// const slider = new Slider({

// min: 0,

// max: 1,

// precision: 2,

// values: [1],

// visibleElements: {

// labels: true,

// rangeLabels: true

// }

// });

// item.panel = {

// content: slider,

// className: "esri-icon-sliders-horizontal",

// title: "Change layer opacity"

// };

// slider.on("thumb-drag", (event) => {

// const { value } = event;

// item.layer.opacity = value;

// });

// }

}

view.when(() => {

// Create the LayerList widget with the associated actions

// and add it to the top-right corner of the view.

var 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", (event) => {

// The layer visible in the view at the time of the trigger.

// Capture the action id.

const id = event.action.id;

const item = event.item;

const itemLayer = item.layer

if (id === "full-extent") {

// if the full-extent action is triggered then navigate

// to the full extent of the visible layer

view.goTo(itemLayer.fullExtent).catch((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(itemLayer.url);

} else if (id === "increase-opacity") {

// if the increase-opacity action is triggered, then

// increase the opacity of the GroupLayer by 0.1

if (itemLayer.opacity < 1) {

itemLayer.opacity += 0.1;

}

} else if (id === "decrease-opacity") {

// if the decrease-opacity action is triggered, then

// decrease the opacity of the GroupLayer by 0.1

if (itemLayer.opacity > 0) {

itemLayer.opacity -= 0.1;

}

});

// view.ui.add(layerList, "top-right");

layerList.selectionEnabled = true;

var LLExpand = new Expand({

view: view,

expanded: true,

content: layerList,

});

view.ui.add(LLExpand, "top-right");

});