Re: Hiding Scale-specific Layers in Layer List?

686
2
Jump to solution
03-08-2017 07:50 AM
BillSpiking__GISP
Occasional Contributor

Branch from: https://community.esri.com/thread/176669 

Hi Robert,

Hope all is well!

I'm trying to hide, instead of gray out, scale dependent layers much like what Jason was trying to accomplish above though when I change the style to display none it just hides the text and not the checkbox to the left.  Do you have any recommendations on hiding the checkbox as well?  I'm using WAB Dev 2.3 and have tested with the otb layer list widget, your modified code for the layer list, and Kevin MacLeod‌ Ehanced Layer List and getting the same results for all three.  I've fiddled around with the code trying to hide the checkbox, but no luck as of yet.

Any help would be greatly appreciated!

Thank you sir,

Bill

Screen shot of layer list

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Bill,

  Here is the the updated LayerListView.js function:

    checkScale: function(){
      setTimeout(lang.hitch(this, function(){
        array.forEach(this.operLayerInfos.getLayerInfoArray(), function(layerInfo) {
          var titleNodes = query(".div-content.jimu-float-leading");
          for(var x = 0; x < titleNodes.length; x++){

            if(layerInfo.layerObject.layerInfos){
              for(var l = 0; l < layerInfo.layerObject.layerInfos.length; l++){
                if(layerInfo.layerObject.layerInfos[l].name === titleNodes[x].innerHTML){
                  var node = query(".checkbox", titleNodes[x].parentNode.parentNode)[0];
                  if(domClass.contains(titleNodes[x], "grayed-title")){
                    domClass.add(titleNodes[x].parentNode.parentNode, "sd");
                    domClass.add(node, "sd");
                  }else{
                    domClass.remove(titleNodes[x].parentNode.parentNode, "sd");
                    domClass.remove(node, "sd");
                  }
                }
              }
            }
            if(titleNodes[x].innerHTML === layerInfo.title){
              var node = query(".checkbox", titleNodes[x].parentNode.parentNode)[0];
              if(domClass.contains(titleNodes[x], "grayed-title")){
                domClass.add(titleNodes[x].parentNode.parentNode, "sd");
                domClass.add(node, "sd");
              }else{
                domClass.remove(titleNodes[x].parentNode.parentNode, "sd");
                domClass.remove(node, "sd");
              }
            }
          }
        }, this);
      }), 200);
    },

and the new css rule:

.jimu-widget-layerList .layer-row.sd  {
    display: none;
}

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Bill,

  Here is the the updated LayerListView.js function:

    checkScale: function(){
      setTimeout(lang.hitch(this, function(){
        array.forEach(this.operLayerInfos.getLayerInfoArray(), function(layerInfo) {
          var titleNodes = query(".div-content.jimu-float-leading");
          for(var x = 0; x < titleNodes.length; x++){

            if(layerInfo.layerObject.layerInfos){
              for(var l = 0; l < layerInfo.layerObject.layerInfos.length; l++){
                if(layerInfo.layerObject.layerInfos[l].name === titleNodes[x].innerHTML){
                  var node = query(".checkbox", titleNodes[x].parentNode.parentNode)[0];
                  if(domClass.contains(titleNodes[x], "grayed-title")){
                    domClass.add(titleNodes[x].parentNode.parentNode, "sd");
                    domClass.add(node, "sd");
                  }else{
                    domClass.remove(titleNodes[x].parentNode.parentNode, "sd");
                    domClass.remove(node, "sd");
                  }
                }
              }
            }
            if(titleNodes[x].innerHTML === layerInfo.title){
              var node = query(".checkbox", titleNodes[x].parentNode.parentNode)[0];
              if(domClass.contains(titleNodes[x], "grayed-title")){
                domClass.add(titleNodes[x].parentNode.parentNode, "sd");
                domClass.add(node, "sd");
              }else{
                domClass.remove(titleNodes[x].parentNode.parentNode, "sd");
                domClass.remove(node, "sd");
              }
            }
          }
        }, this);
      }), 200);
    },

and the new css rule:

.jimu-widget-layerList .layer-row.sd  {
    display: none;
}
BillSpiking__GISP
Occasional Contributor

It works perfectly Robert!  Thanks again for your help....you bailed me out again!

Regards,

Bill

0 Kudos