Hello,
I noticed that it is making several calls as well. I just made one call to the legend. Below is my solution. Its a lot, but it looks and acts the way I want. I would like to remove the opacity setting for non-polygon layers and add a slider, but that is for a latter time. Thanks for sharing your code it got me started.
<!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.11</title>
<!-- <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css"> -->
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.esri-layer-list__child-toggle + .esri-layer-list__item-label:not([role="radio"]) > .esri-layer-list__item-toggle {
display:none;
}
.esri-icon-non-visible::before {
content: "\e610";
}
.esri-icon-visible::before {
content: "\e611";
}
/*
.esri-icon-right-triangle-arrow::before {
content: "\e63c";
}
.esri-icon-down-arrow::before {
content: "\e63b";
}
*/
.esri-layer-list__list {
list-style: none;
margin: 0 0 0 0;
padding: 0;
}
.esri-layer-list__item--has-children {
padding-bottom: 0;
}
.esri-layer-list-panel__content esri-layer-list-panel__content--html-element{
margin: 0 0 0 0;
}
.esri-layer-list__item-container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding: 1px 1px 1px 1px;
}
.esri-layer-list__item--has-children > .esri-layer-list__item-container {
padding-left: 1px;
padding-right: 1px;
}
.esri-layer-list__item {
background-color: $background-color;
border-bottom: 1px solid $border-color;
position: relative;
overflow: hidden;
list-style: none;
margin: 0 5px;
padding: 0;
}
.esri-layer-list-panel {
margin: 3px 20px;
}
.esri-layer-list-panel__content--legend .esri-legend__service {
padding: 0 10px 0 0;
}
.esri-layer-list__list {
margin: 0 3px 3px 0;
}
.esri-layer-list__item-actions {
position: relative;
background-color: $background-color--offset;
color: $interactive-font-color;
margin: -1px 2px 2px;
height: auto;
}
.esri-layer-list__item-actions-list {
display: flex;
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
padding: 2px 0;
list-style: none;
border-top: 2px solid $background-color;
}
</style>
<script src="https://js.arcgis.com/4.11/"></script>
<script>
var layerList;
var CountyBaseMapURL = "https://gis.santacruzcounty.us/arcserver/rest/services/Cache/CountyBasemap/MapServer";
var mapImageLayerURL = "https://gis.santacruzcounty.us/arcserver/rest/services/giswebp/MapServer";
require([
"esri/Map",
"esri/request",
"esri/Basemap",
"esri/layers/TileLayer",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/widgets/LayerList",
"esri/widgets/Legend",
"dojo/_base/array"
], function (
Map, esriRequest, Basemap, TileLayer, MapView, MapImageLayer, LayerList, Legend, arrayUtils
) {
const layer1 = new MapImageLayer({
url: mapImageLayerURL
});
var imageryTilelayer = new TileLayer({ url: CountyBaseMapURL});
var customBasemap = new Basemap({
baseLayers: [imageryTilelayer],
title: "Custom Basemap",
id: "myBasemap"
});
const map = new Map({
basemap: customBasemap
});
// Add the map to a MapView
const view = new MapView({
container: "viewDiv",
map: map
});
map.add(layer1);
var theURL = "https://gis.santacruzcounty.us/arcserver/rest/services/" + layer1.title.toLowerCase() + "/MapServer/legend";
esriRequest(theURL, {
query: {
f: 'json'
},
responseType: "json"
}).then(function (response) {
layerList = new LayerList({
view: view,
listItemCreatedFunction: function (event) {
const item = event.item;
if (item.title === layer1.title) {
item.title = "Legend";
}
event.item.layer.opacity = 1; //added opacity here, was set to undefined
if (item.children.items.length === 0 && item.title != "Legend") {
//let theArray = [];
var aDiv = document.createElement("Div");
var layerNumber = -1;
for (let i = 0; i < response.data.layers.length; i++) {
if(response.data.layers.layerId === item.layer.id) {
layerNumber = i;
}
}
if(layerNumber != -1){
for (let j = 0; j < response.data.layers[layerNumber].legend.length; j++) {
var para = document.createElement("P");
para.style.margin = "2px";
para.style.verticalAlign = "middle";
var img = document.createElement("img");
img.style.height = "20px";
img.style.verticalAlign = "bottom";
img.src = item.layer.url + "/images/" + response.data.layers[layerNumber].legend.url;
theLabel = response.data.layers[layerNumber].legend.label;
var t = document.createTextNode(theLabel);
para.appendChild(img);
para.appendChild(t);
aDiv.appendChild(para);
}
item.panel = {
className: "esri-icon-drag-horizontal",
content: aDiv,
open: false,
visible: true
}
} // if(layerNumber != -1){
item.actionsSections = [
[ {
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 (item.chil
else{ // added this so users can turn off group layers by clicking on the name
item.layer.watch("visible", function (){
item.layer.visible = true;
});
}
} // listItem
}); // new layerlist
view.ui.add(layerList, "top-right");
layerList.on("trigger-action", function(event) {
var visibleLayer = event.item.layer;
// Capture the action id.
var id = event.action.id;
if (id === "full-extent") {
// to the full extent of the visible layer
view.goTo(visibleLayer.layer.fullExtent);
} else if (id === "information") {
// open the item details page of the service layer
var themetaURL = "NONE";
switch(visibleLayer.parent.title) {
case "Parcel Related":
themetaURL = "https://gis.santacruzcounty.us/gisweb/help/Parcel%20Related.pdf";
break;
case "Transportation":
themetaURL = "https://gis.santacruzcounty.us/gisweb/help/Transportation.PDF";
break;
case "Biotic and Water Resources":
themetaURL = "https://gis.santacruzcounty.us/gisweb/help/Biotic%20and%20Water%20Resources.PDF";
break;
case "Hazards and Geophysical":
themetaURL = "https://gis.santacruzcounty.us/gisweb/help/Hazards%20and%20Geophysical.PDF";
break;
case "Zoning":
themetaURL = "https://gis.santacruzcounty.us/gisweb/help/Zoning.PDF";
break;
case "Land Use and General Plan":
themetaURL = "https://gis.santacruzcounty.us/gisweb/help/Land%20Use%20and%20General%20Plan.PDF";
break;
case "Special Districts":
themetaURL = "https://gis.santacruzcounty.us/gisweb/help/Special%20Districts.PDF";
break;
case "Jurisdictional, Elections, Census":
themetaURL = "https://gis.santacruzcounty.us/gisweb/help/Jurisdictional,%20Elections,%20Census.pdf";
break;
case "School Districts and CSAs":
themetaURL = "https://gis.santacruzcounty.us/gisweb/help/School%20Districts%20and%20CSAs.pdf";
break;
case "Utilities":
themetaURL = "https://gis.santacruzcounty.us/gisweb/help/Utilities.pdf";
break;
default:
alert("No additonal information available");
}
if(themetaURL != "NONE"){
window.open(themetaURL);
}
} else if (id === "increase-opacity") {
// increase the opacity of the GroupLayer by 0.25
if (visibleLayer.opacity < 1) {
visibleLayer.opacity += 0.2;
}
} else if (id === "decrease-opacity") {
// if the decrease-opacity action is triggered, then
// decrease the opacity of the GroupLayer by 0.25
if (visibleLayer.opacity > 0) {
visibleLayer.opacity -= 0.2;
}
}
});
}); // then(function (response
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>