LayerList add colors feature request

deleted-user-NafuMc_hs6Px · ‎10-05-2017

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?

RobertScheitlin__GISP · ‎10-05-2017

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

View solution in original post

RobertScheitlin__GISP · ‎10-05-2017

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

deleted-user-NafuMc_hs6Px · ‎10-09-2017

Perfect, thank you

RobertScheitlin__GISP · ‎10-09-2017

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