Widget to turn on/off layers? (No, not the Layerlist.)

[Arne_Gelfert]

As noted in another post just minutes ago, I'm in the process of converting some existing custom Geocortex tools to ESRI WAB or JSAPI web functionality.

Geocortex offers the apparently rather popular Themes concept in their framework. It's a way to group a number of layers into a theme and then turn layers on/off by switching from one theme to another. So you'd either pick a selection from a dropdown, or with only two choice toggle between two states to activate (turn on) one group layers, thereby turning the other(s) off. QUESTION: Is there an obvious OTB or available custom widget candidate to do this?

Certainly don't want to make anyone have to interact with the LayerList or TOC to hide or unhide layers. it should be more one-click behavior. I could see how you'd build two web maps from map services in Portal and then flip back and forth between those.

It's quite easy to build this using the JavaScript API. All you need is a HTML dropdown element with some event handlers that then turn on/off layers. Unfortunately, I have not been able to twist my brain into a shape that would allow me to decipher custom WAB widgetry . So hoping that someone has used one of the available widgets for this purpose?

Thanks!

[Arne_Gelfert]

Nice! Sorry I'm thinking in nano-steps.... but I'll try that. I also just pasted some snippet referencing LayerStructure class and that worked. So I'm slooooowly warming up to the Jimujambalaya. Thanks for going the extra miles for all of us out here!!! 🙂

[Arne_Gelfert]

Added a missing

define([..., "dojo/_base/lang", ...]
function(..., lang,      , ... )

and I'm off to the races!

[Arne_Gelfert]

Robert Scheitlin, GISP‌, thanks for getting me off the ground here. All the sudden, there is a faint shimmer of light at the end of the tunnel! Got my even handler working. If Layers are called Layer1, Layer2, Layer3, then all I do is:

function updateLayerVisibility(oldValue,newValue) {
       layerStructure.traversal(function(layerNode) {
             if (layerNode.title.includes(oldValue)) 
                 {layerNode.hide();}
             if (layerNode.title.includes(newValue)) 
                 {layerNode.show()};
       });
}

So if the current dropdown value "Layer1" (oldValue) is changed to "Layer2" (newValue), then I just traverse layer tree, check if oldValue/newValue matches my layer name, and turn the oldValue layer off and the newValue layer on. 

No doubt there are more elegant ways to do this, and this is in no way configurable. But I'm so excited the light bulb has gone off. haha