Is there a way that map services in the layer list can be separated with different colors. I have attached an example.
Solved! Go to 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);
}
},
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);
}
},
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?
Sure that is just a matter of adding the correct style to the text.
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
//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
Thanks, out of curiosity what does 900 and 500 refer to?
900 is the font weight and 500 is a half second of time that the setTimeout is waiting for.