LayerList add colors feature request

deleted-user-NafuMc_hs6Px — Thu, 05 Oct 2017 20:46:04 GMT

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?

Re: LayerList add colors feature request

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:36:16 GMT

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

Re: LayerList add colors feature request

deleted-user-NafuMc_hs6Px — Mon, 09 Oct 2017 17:36:40 GMT

Perfect, thank you

Re: LayerList add colors feature request

RobertScheitlin__GISP — Mon, 09 Oct 2017 18:01:09 GMT

Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.

topic Re: LayerList add colors feature request in ArcGIS JavaScript Maps SDK Questions

LayerList add colors feature request

Re: LayerList add colors feature request

Re: LayerList add colors feature request

Re: LayerList add colors feature request