AnsweredAssumed Answered

Display LayerList with Legend using a MapImageLayer's sublayers

Question asked by cpl09c_FREAC on Oct 18, 2018
Latest reply on Nov 23, 2018 by aslaken

I am trying to modify one of the samples that combines the Legend and LayerList widgets to also accommodate sublayers. It seems that if leave the default layerlist declaration (as the sample provides), it gives me all of the symbology for the sublayers at the top, and nothing inside of each sublayer. 

 

 

Originally, I had thought that I would just assign the "legend" to the panel of the children the parent layer, but that didn't seem to work. Any thoughts or references where this has been done before? 

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Add a Legend to LayerList - 4.9</title>

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

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


    <script src="https://js.arcgis.com/4.9/"></script>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/MapImageLayer",
            "esri/widgets/LayerList"
        ], function (
            Map, MapView, MapImageLayer, LayerList
        ) {

            const citiesStatesHighways = new MapImageLayer({
                url: "https://sampleserver6.arcgis.com/arcgis/rest/services/USA/MapServer",
                sublayers: [{
                        id: 2,
                        title: "States"
                    },
                    {
                        id: 1,
                        title: "Highways"
                    },
                    {
                        id: 0,
                        title: "Cities"
                    }
                ]
            });

            const map = new Map({
                basemap: "dark-gray",
                layers: [citiesStatesHighways]
            });

            // Add the map to a MapView
            const view = new MapView({
                container: "viewDiv",
                map: map
            });

            // Add a legend instance to the panel of a
            // ListItem in a LayerList instance
            const layerList = new LayerList({
                view: view,
                listItemCreatedFunction: function (event) {
                    const item = event.item;
                    if (item.layer.type != "group") { // don't show legend twice
                        item.panel = {
                            content: "legend",
                            open: true
                        };
                        console.log(item.panel.content);
                    }
                }
            });


            // Assigning "legend" to children of parent layer - not working
            // const layerList = new LayerList({
            //     view: view,
            //     listItemCreatedFunction: function (event) {
            //         const item = event.item;
            //         console.log(item);

            //         // target elements without children (the sublayers)
            //         if (item.children.items.length !== 0) {
            //             let childrenArr = item.children.items
            //             for (let i = 0; i < childrenArr.length; i++) {
            //                 childrenArr[i].panel = {
            //                     content: "legend",
            //                     open: true
            //                 }
            //             }
            //         }
            //     }
            // });

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


        });
    </script>


</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

Outcomes