I am just starting out with WAB and I am trying to figure out how to keep certain items off the layer list widget. I am dynamically loading a couple ArcGISDynamicMapServiceLayer layers upon a widget load. One of the services has a table on the service that I am trying to not show in the layer list. The other service I only want to see some layers on the layer list. Any ideas?
startup: function() {
this.inherited(arguments);
//this.mapIdNode.innerHTML = 'map id:' + this.map.id;
console.log('startup');
//Load wildfire layer but only show first 4 layers
geoMacLayer = new ArcGISDynamicMapServiceLayer("https://rmgsc.cr.usgs.gov/arcgis/rest/services//geomac_dyn/MapServer");
geoMacLayer.setVisibleLayers([0,1,2,3],true);
this.map.addLayer(geoMacLayer);
//Load policy layer but to not show table (layer 2) in layer list
policyLayer = new ArcGISDynamicMapServiceLayer("http://myserver/arcgis/rest/services//Policies/HOPolicies/MapServer");
policyLayer.setOpacity(0.75);
policyLayer.setVisibleLayers([0,1],true);
this.map.addLayer(policyLayer);
}
Solved! Go to Solution.
Brain,
In the LayerList widget Widget.js find the showLayers function and add (line 4):
showLayers: function() {
// summary:
// create a LayerListView module used to draw layers list in browser.
this.config.layerOptions["ESRI 2015 Geographic Data_0"].display = false;
this.layerListView = new LayerListView({
operLayerInfos: this.operLayerInfos,
layerListWidget: this,
config: this.config
}).placeAt(this.layerListBody);
},
add line 4 multiple times for the layers(sublayers) you do not want to show in the Layer List. "ESRI 2015 Geographic Data_0" is the actual id of the layer/sublayer you want to hide. You will have to use your browsers developertools to get this info. Here is how. After you add the layers they appear in the LayerList (even the ones you don't want showing) so you right click on the layers title text in the LL widget and choose inspect (chrome browser) and you will see in the class property there is the actual id in there (i.e class="layer-title-div-ESRI 2015 Geographic Data_0 div-content jimu-float-leading ").
Brain,
In the LayerList widget Widget.js find the showLayers function and add (line 4):
showLayers: function() {
// summary:
// create a LayerListView module used to draw layers list in browser.
this.config.layerOptions["ESRI 2015 Geographic Data_0"].display = false;
this.layerListView = new LayerListView({
operLayerInfos: this.operLayerInfos,
layerListWidget: this,
config: this.config
}).placeAt(this.layerListBody);
},
add line 4 multiple times for the layers(sublayers) you do not want to show in the Layer List. "ESRI 2015 Geographic Data_0" is the actual id of the layer/sublayer you want to hide. You will have to use your browsers developertools to get this info. Here is how. After you add the layers they appear in the LayerList (even the ones you don't want showing) so you right click on the layers title text in the LL widget and choose inspect (chrome browser) and you will see in the class property there is the actual id in there (i.e class="layer-title-div-ESRI 2015 Geographic Data_0 div-content jimu-float-leading ").
Thank you for sharing.
As I researched further I found the LL config file (config_LayerList.json) that has layer options that I can set. It appears that either of these will accomplish what I need. I am not sure if one way is better than the other but I think the config will be easier to modify if needed. Not I need to work on a way to delete a layer. Thanks again!
"layerOptions": {
"layer3": {
"display": true
},
"layer3_0": {
"display": true
},
"layer3_1": {
"display": true
},
"layer2": {
"display": true
},
"layer2_0": {
"display": true
},
"layer2_1": {
"display": true
},
"layer2_2": {
"display": true
},
"layer2_3": {
"display": true
},
"layer2_4": {
"display": true
},
"layer2_5": {
"display": true
},
"layer2_6": {
"display": true
},
"layer2_7": {
"display": true
},
"layer2_8": {
"display": true
},
"layer2_9": {
"display": true
},
"layer2_10": {
"display": true
},
"layer2_11": {
"display": true
},
"layer2_12": {
"display": true
},
"layer2_13": {
"display": true
},
"layer2_14": {
"display": true
},
"layer2_15": {
"display": true
},
"layer2_16": {
"display": true
},
"layer2_17": {
"display": true
},
"layer2_18": {
"display": true
},
"layer2_19": {
"display": true
},
"layer2_20": {
"display": true
},
"layer2_21": {
"display": true
},
"layer2_22": {
"display": true
},
"layer2_23": {
"display": true
},
"layer2_24": {
"display": true
},
"layer2_25": {
"display": true
},
"layer2_26": {
"display": true
},
"layer3_2": {
"display": false
},
"layer3_2_1": {
"display": false
Brian,
Ok I thought that you were adding your layers dynamically at runtime. If so then the config will not have them listed. The provided code would work in that case.
I am adding the layers at runtime but since I know what I am adding I am able to provide the layer options in the config and when the layers are added they honor the info in that config file.
OK.
Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.
I have some "data only" layers included in my map and need to eliminate from Layer widget but not actually removed from the map. I saw this post, but I think the code has changed quite a bit since 2016. Both of these lines return an empty Layer widget.
showLayers: function() {
// summary:
// create a LayerListView module used to draw layers list in browser.
//this.config.layerOptions["Comm_Qual_Sale_Latest_2608"].display = false;
this.operLayerInfos("Comm_Qual_Sale_Latest_2608").display = false;
this.layerListView = new LayerListView({
operLayerInfos: this.operLayerInfos,
layerListWidget: this,
config: this.config
}).placeAt(this.layerListBody);
},
William,
I just tested in 2.11 and it still works fine.
this.config.layerOptions["LOJIC_LandRecords_Louisville_5062"].display = false;
odd...
this.config.layerOptions
layerOptions "undefined" in debug in this file
Did you not open the settings dialog for the layerlist in WAB and save?