Include Legend in Layerlist

795
2
08-08-2017 09:27 AM
ShakibaMorvarid
New Contributor

Hello Everyone. I am doing a project and I am new to API 4.4. What I want to do is to include legend in layerlist below the name of each layer. In 3.21 there is showlegend option in layerlist but in 4.4 it is not. I tried to use actionsSections to define listItem createdfunction and add Legend widget in this way but I am  not sure even the logic is going to work.

I want to look like this. Do you think it is posiible to do that by defining item.actionsSections?

        var legend = new Legend({
            view: view,
            layerInfos: [{
                layer: fl,
                title: "Legend"
            }],
        });


        var layerList = new LayerList({
            view: view,
            listItemCreatedFunction: defineActions,
            container: "layers"

        });


        function defineActions(event) {


            var item = event.item;


            item.actionsSections =[
                [{
                    title: "showlegend",
                    id: "legendlayers"

            }],
            [{
                title: "Increase opacity",
                className: "esri-icon-up",
                id: "increase-opacity"
            }, {
                title: "Decrease opacity",
                className: "esri-icon-down",
                id: "decrease-opacity"
            }]];
        }

        layerList.on("trigger-action", function (event) {

            var id = event.action.id;

            if (id === "legendlayers") {

                legend.show();

            }
        });

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

2 Replies
JadeFreeman
Occasional Contributor III

I also have this need!  Thanks!

0 Kudos
KellyHutchins
Esri Frequent Contributor

I just ran a quick test and was able to display the legend based on a layer list action. Here's a quick sample showing this: 

JS Bin - Collaborative JavaScript Debugging