Hiding items from layer list

1685
10
Jump to solution
12-15-2016 06:49 AM
BrianLeroux
Regular Contributor

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);

}

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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 ").

View solution in original post

10 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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 ").

BrianLeroux
Regular Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
BrianLeroux
Regular Contributor

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.

RobertScheitlin__GISP
MVP Esteemed Contributor

OK.

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

0 Kudos
WilliamBailey
New Contributor II

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);
 },
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

William,

   I just tested in 2.11 and it still works fine.

this.config.layerOptions["LOJIC_LandRecords_Louisville_5062"].display = false;
0 Kudos
WilliamBailey
New Contributor II

odd...  

this.config.layerOptions

layerOptions "undefined" in debug in this file

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Did you not open the settings dialog for the layerlist in WAB and save?

0 Kudos