topic Re: layer list widget with actions in ArcGIS JavaScript Maps SDK Questions

layer list widget with actions

litch — Mon, 29 Aug 2022 10:36:18 GMT

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

```

Re: layer list widget with actions

ChipMorgan65 — Mon, 29 Aug 2022 11:42:05 GMT

Try this:

var visibleLayer=event.item.layer

Re: layer list widget with actions

litch — Tue, 30 Aug 2022 03:40:58 GMT

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

Re: layer list widget with actions

ChipMorgan65 — Tue, 30 Aug 2022 18:34:05 GMT

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

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");

});