Layer List Window, change colors of individual services listed

[GeorgeKatsambas]

Is there a way that map services in the layer list can be separated with different colors. I have attached an example.

[RobertScheitlin__GISP · Accepted solution]

George,

   Sure here is a rough solution.

In the LayerList widget.js find this function and make this change:

      showLayers: function() {
        // summary:
        //    create a LayerListView module used to draw layers list in browser.
        this.layerListView = new LayerListView({
          operLayerInfos: this.operLayerInfos,
          layerListWidget: this,
          layerFilter: this.layerFilter,
          config: this.config
        }).placeAt(this.layerListBody);

//RJS code changes begin
        setTimeout(lang.hitch(this, function(){
          var nodes = query('div[class^="layer-title-div"]');
          nodes.map(function(node){
            var randomColor = Math.floor(Math.random()*16777215).toString(16);
            html.setStyle(node, 'color', "#"+randomColor);
          });
        }), 1000);
//RJS code changes end

        if(this.config.expandAllLayersByDefault) {
          this.layerListView.foldOrUnfoldAllLayers(false);
        }
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[GeorgeKatsambas]

Thanks Robert, That did what I wanted but font size was made smaller and some colors hard to see, can I add Bold or larger font and better colors?

[RobertScheitlin__GISP]

Sure that is just a matter of adding the correct style to the text.

CSS font-weight property 

[GeorgeKatsambas]

p.thicker {
  font-weight: 900;
}

Where would I add this in the widget.js , after RJS code changes ?

showLayers: function() {
// summary:
// create a LayerListView module used to draw layers list in browser.
this.layerListView = new LayerListView({
operLayerInfos: this.operLayerInfos,
layerListWidget: this,
layerFilter: this.layerFilter,
config: this.config
}).placeAt(this.layerListBody);
//RJS code changes begin
setTimeout(lang.hitch(this, function(){
var nodes = query('div[class^="layer-title-div"]');
nodes.map(function(node){
var randomColor = Math.floor(Math.random()*16777215).toString(16);
html.setStyle(node, 'color', "#"+randomColor);
});
}), 1000);
//RJS code changes end

[RobertScheitlin__GISP]

//RJS code changes begin
        setTimeout(lang.hitch(this, function(){
          var nodes = query('div[class^="layer-title-div"]');
          nodes.map(function(node){
            var randomColor = Math.floor(Math.random()*16777215).toString(16);
            html.setStyle(node, 'color', "#"+randomColor);
            html.setStyle(node, 'font-weight', 900);
          });
        }), 500);
//RJS code changes end‍‍‍‍‍‍‍‍‍‍

[GeorgeKatsambas]

Thanks, out of curiosity what does 900 and 500 refer to?

[RobertScheitlin__GISP]

900 is the font weight and 500 is a half second of time that the setTimeout is waiting for.