I develop the campus map here: arcmap.byu.edu - at the listItemCreatedFunction used in the layer list widget we can alter titles and actionSections for each Item, but we cannot change the color like you can with map symbols. If you look at the map you can see why this feature would be valuable - Users could reference the color in the list with the color of the layer in Parking.
Does anyone have a workaround for this feature? Can we submit a feature request for this?
Andy,
Sure there is here is a sample:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Intro to MapView - Create a 2D map - 4.5</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-layer-list__item-toggle-icon,
.esri-layer-list__item-title {
color: black;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/LayerList",
"dojo/query",
"dojo/domReady!"
], function(Map, MapView, FeatureLayer, LayerList, query) {
var featureLayerIDSet = [];
var flArr = [];
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-111.649278, 40.249251],
zoom: 16
});
var template = {
title: "{Lot}",
content: "{Description}"
};
for (var i = 2; i < 12; i++) {
var featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/FvF9MZKp3JWPrSkg/arcgis/rest/services/ParkingLayers/FeatureServer/" + i,
outFields: ["Lot", "Description", "Map_Category"],
popupTemplate: template
});
map.add(featureLayer);
featureLayerIDSet.push(featureLayer.id);
}
var layerListItem = {};
layerList = new LayerList({
view: view,
// executes for each ListItem in the LayerList
listItemCreatedFunction: function(event) {
setTimeout(function(){
var item = event.item;
var itemUid = layerList.id + "_" + item.uid + "__title";
var node = query("[aria-labelledby=\"" + itemUid +"\"]")[0];
if(node && node.children[0] && item.layer.renderer && item.layer.renderer.symbol){
node.children[0].style.backgroundColor = item.layer.renderer.symbol.color;
}
}, 50);
}
});
view.ui.add(layerList, {
position: "bottom-left"
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Perfect, thank you
Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.
Andy,
Sure there is here is a sample: