AnsweredAssumed Answered

LayerList add colors feature request

Question asked by arzon94 on Oct 5, 2017
Latest reply on Oct 9, 2017 by rscheitlin
  • Comment • 3

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?

rscheitlin
rscheitlin Champion Oct 5, 2017 9:08 PM
Correct Answer

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>
See the reply in context
No one else had this question

Outcomes