Layer Toggle Button Widget Version 2.14 - 01/13/2020

15 Kudos · Layer Toggle Button Widget Version 2.14 - 01/13/2020

This is just a simple widget to toggle a configured layer(s) on and off using a button. The layer(s) can be a whole map service layer or a specific sublayer(s) in a map service. This widget will sync with the LayerList widget. You can add multiple instances of this widget to onscreen place holders or in a widget controller like the Header controller in the Foldable theme.

Live Preview Site

List of the latest enhancements and changes:

Fixed issue with group layers in 2.12 WAB.

List of Previous changes:

Fixed issue with basemap being toggled when exclusive mode is used in 2.12 WAB.
Full support for using this widget in the Launchpad themes Anchorbar controller is now supported.
There is now an exclusive mode for the layer toggle. Meaning that all other layers will be toggled off if the layer is exclusive. Caution should be used when choosing this mode.
There is now a zoom to layers extent option for the layer(s) toggles.
There is now a event that can be listened for when a layer is toggled on. The event name is 'toggleChanged'.
Widget now indicates the toggle state of the layer using the background color of the button.
You can follow the directions in the downloads readMe.txt to set the initial state of the button to be toggled on.
Now the widget support toggling multiple layers.

RobertScheitlin__GISP · ‎02-06-2019

Katie,

I think the issue may be that you do not need to check the "FMGlassType" parent node just the "Glass Type" node. Try that and let me know.

KatieYoder1 · ‎02-06-2019

Hi Robert,

Thank you so much for the quick response. That did do the trick!

I didn't even think to try that, I had just assumed that the layer wouldn't turn out without the parent node checked. Glad it works now!

Thanks again!

KatieYoder1 · ‎02-07-2019

Hi Tim,

I know it's been awhile since this post but I am trying to tackle the exact same problem. I'm using the Layer toggle widget in the AnchorBarController of the Launchpad theme and can't figure out how to visualize which button is active. Did you ever find a solution?

Thanks!

Katie

TimHoward · ‎02-07-2019

Katie,

Hi there. Sorry I actually gave up on this avenue after spending way too much time on it. I was mostly trying to avoid using the basemap gallery widget to toggle aerial layers since it is coordinate system dependent. I eventually reprojected all of our aerials into Web Mercator and used the gallery. I do still prefer this tool but just couldn’t spend any more time on it. Good luck!

Tim

RobertScheitlin__GISP · ‎02-09-2019

Katie and Tim,

I will be releasing the 2.11 version of this widget that is designed to work with the Launchpad theme Anchorbar controller. when you add this widget to the Anchorbar it will properly show the widgets state and a tooltip for what click on the widget will do to the layers visible state. The one problem is the initial state of the widget reflecting the visible state of the layer on startup. If the configured layer is on by default then you just set the widget to open at start. The issue is that only one widget can be opened at start so if you have another layer toggle button and it needs to show as on/open then you are out of luck.

Here is a snapshot of the widget indication of layer state and tooltip showing what clicking the button will do.

KatieYoder1 · ‎02-11-2019

Thanks for the heads up! This is great news.

I think the Layer Toggle Widget works really well with the Launchpad Theme. I'm trying to use multiple instances of the toggle widget in the AnchorBarController instead of a having a layer widget, and getting the widget to reflect which layer is active was the only hurdle. I really appreciate your work and constant improvements to this widget! Looking forward to the latest release.

TimHoward · ‎02-11-2019

Robert,

As always great work! I may yet make use of this widget. Thanks for the info. Look forward to trying it out.

ArthurRodriguez · ‎02-12-2019

Hello! This looks to be a very promising widget and will fill a great need for my application. I was able to add it to my portal environment, and then to my web application. I was also able to configure the widget to connect it to the layer I would like to toggle. However, when I click the widget it simply spins (circle moves around in the button) and then is stuck. No layers turn on/off and it does not stop spinning. Any ideas what the problem could be? Please let me know if you would like any other details. Thank you!!!

RobertScheitlin__GISP · ‎02-12-2019

Arthur,

What does your browsers web console say the issue is?

ArthurRodriguez · ‎02-12-2019

Thank you for responding! I could easily have messed something up in how I setup the widget. Do I need to change any code? Or just copy/paste the folder onto my web server?

I get 2 errors in the Console of my web browser (Chrome):

init.js:35 GET https://<we=server>/portal/apps/webappbuilder/stemapp/jimu.js/LayerStructure.js?wab_dv=2.6 net::ERR_ABORTED 404 (Not Found)

init.js:36 Error: scriptError at g (init.js:10)
at HTMLScriptElement.<anonymous> (init.js:35)

RobertScheitlin__GISP · ‎02-12-2019

Arthur,

Your install is fine. What version of Portal are you using? If the Widget can not find LayerStructure.js that means you are trying to use this widget with an older version of Portal.

ArthurRodriguez · ‎02-12-2019

i was worried that could be it! we are using arcgis enterprise version 10.6. is that too old? is there a way to get a previous version of the widget that would work? i really only want to use the basic functionality: turn one layer on/off.

RobertScheitlin__GISP · ‎02-12-2019

Arthur,

Portal 10.6 uses WAB 2.6. So here is the old 2.6 version of LayerToggleButton widget.

Download 2.6 version

ArthurRodriguez · ‎02-13-2019

That did the trick!! Thank you so much for your work on this widget and your help with getting it working for me!!

Lake_Country_GIS · ‎03-06-2019

Quick question. Is there a way to programatically change the icon image when toggling a layer? Something like this?

domClass.add(this.parentContainer, "jimu-state-selected");
this.icon = 'https://i.stack.imgur.com/Rwkrv.jpg');

RobertScheitlin__GISP · ‎03-06-2019

That is possible.

var widg = registry.byId(parentWid);
html.setAttr(widg.iconNode, 'src', 'loading_circle.gif');‍‍

Lake_Country_GIS · ‎03-07-2019

Worked like a charm.

var widg = registry.byId('dijit__WidgetBase_0');
html.setAttr(widg.iconNode, 'src', './widgets/LayerToggleButton/images/icon2.png');

Thanks!

M

StefanUseldinger · ‎03-29-2019

When I set the property "isExclusive" for a widget in a Launchpad theme, I found out that the other LayerToggleButtons were not closed in the GUI although the layer disappeared in the map.

To fix this, I rewrote the onLaunchpadOpen() function and added another function:

      closeWidget: function(id) {
        this.abc = WidgetManager.getInstance().getWidgetsByName("AnchorBarController")[0];
        
          this.abc.widgetManager.closeWidget(id);
          this.abc._removeFromOpenedIds(id);
      },

     onLaunchpadOpen: function(){
        var lObjs = [];
        array.map(this.toggleLayerIds, lang.hitch(this, function(id){
          var lyrNode = this.layerStructure.getNodeById(id);
          lObjs.push(lyrNode);
        }));
        
        if(!lObjs[0].isToggledOn() && this.isExclusive){
          this.layerStructure.traversal(lang.hitch(this, function(layerNode) {
            layerNode.hide();
          }));
        }
        
        if (this.isExclusive) {
            var toggleBtnArr = query("div[data-widget-name='LayerToggleButton']");
            toggleBtnArr.forEach(lang.hitch(this, function(node){
              var parentWid = html.getAttr(node, 'widgetId');
              if (parentWid){
                  if (this.id !== node.id) {
                     this.closeWidget(parentWid);
                     return
                }
              }
            }));
        }
        
        array.map(lObjs, lang.hitch(this, function(lObj, index){
          onOff = (lObj.isToggledOn()) ? 'On' : 'Off';
          if(this.parentContainer && this.originalTitle){
            html.setAttr(this.parentContainer.tooltipDialog, 'content', this.originalTitle + ': ' + onOff);
          }
          if(onOff === 'Off' && index === 0 && lObj._layerInfo && lObj._layerInfo.layerObject && lObj._layerInfo.layerObject.fullExtent){
            if(this.zoomToLayer){
              this.map.setExtent(lObj._layerInfo.layerObject.fullExtent.expand(1.2));
            }
          }
          if(!lObj.isVisible()){
            lObj.show();
            topic.publish('toggleChanged', lObj._layerInfo._visible, lObj);
          }
        }));
      },

RobertScheitlin__GISP · ‎03-29-2019

Luc,

Thanks. I forgot to handle that. I appreciate you sharing your code.

Lake_Country_GIS · ‎03-29-2019

Thanks for this update! This is a great widget. I do have one more request though. After clicking the toggle, what would be the best approach to having a loading layer type progress indicator appear until the toggled layer appears?

AndyWells · ‎04-06-2019

Susan,

Did you ever find a remedy to this? I find the same thing happening. The toggle changes each layer that it is set for, to opposite of how they are set in the layers list. It would be really neat if the toggle, when clicked, would just ensure that all of the layers are turned on (or off when it is disabled.) Still, a nice widget as always.

joerodmey · ‎06-05-2019

I need to toggle between 3 layers. Can this toggle widget accomplish this?

RobertScheitlin__GISP · ‎06-05-2019

Yes

joerodmey · ‎06-05-2019

Is the toggle button just clicked 3 times to cycle between all layers?

RobertScheitlin__GISP · ‎06-05-2019

No you add three instances of the widget.

joerodmey · ‎06-05-2019

Is it easy to change this? My intended workflow is:

1. see first layer

2. click toggle see 2nd layer

3. click toggle and see 3rd layer

RobertScheitlin__GISP · ‎06-05-2019

Nope that is not a supported workflow or an easy change to the code.

joerodmey · ‎06-05-2019

Have another idea other than having a few toggle buttons?

EarlSimpson · ‎06-07-2019

Toggling makes my basemap disappear. Do you have any idea why that would happen? It's only when I have the checkbox for the layer being exclusive checked. Thanks.

RobertScheitlin__GISP · ‎06-07-2019

Earl,

You must not be using a standard basemap then. How is your basemap added to your map?

EarlSimpson · ‎06-12-2019

I changed the basemap in the web map from Bing maps to the World Imagery and it still gave me the same problem.

RobertScheitlin__GISP · ‎06-12-2019

Never seen this before. When you configured the Layer Toggle Widget is the list of map layer is your basemap listed there?

EarlSimpson · ‎06-12-2019

In WAB I go to where the widget is configured and under the part where you choose the layers to be toggled, there is no basemap option available. I use IE and Portal 10.4. Maybe these could cause issues?

RobertScheitlin__GISP · ‎06-12-2019

Earl,

When you say Portal 10.4 does that mean you are using a WAB app coming from your Portal?

EarlSimpson · ‎06-13-2019

The web map that I use in AppBuilder is from Portal and we will have the production application on Portal. I have to sign in to Portal when I start WAB.

RobertScheitlin__GISP · ‎06-13-2019

That is likely the issue then. Portal 10.4 uses WAB 1.4

https://enterprise.arcgis.com/en/portal/latest/use/about-versions.htm

This widget is built for WAB 2.8 or higher, meaning Portal 10.6.1 or greater.

EarlSimpson · ‎06-13-2019

I see. I'll keep that in mind in the future. Thanks Robert!

deleted-user-H23pxZFaj1tR · ‎08-28-2019

I'm using WAB 2.12 and seeing the same behavior. The basemap is not in the widget settings to be selected. When Exclusive is true, the basemap is removed along with the layers that should go. Downloaded Layer Toggle Button widget on 8/16/2019.

Any ideas?

RobertScheitlin__GISP · ‎08-28-2019

Strange... It never use to do that. OK the fix will hopefully be out for that today.

RobertScheitlin__GISP · ‎08-28-2019

David,

Version 2.12 now available.

KenBuja · ‎12-18-2019

There appears to be a bug in this version. If I click off the first toggle (Traffic Camera layers), then toggle it on again, all the other visible layers turn off. This doesn't happen with the other toggles.

RobertScheitlin__GISP · ‎12-18-2019

Ken,

That is because that toggle button is setup to use the "Exclusive" mode of this widget.

KenBuja · ‎12-18-2019

Ah, I overlooked that option. Thanks!

JanSarata · ‎01-10-2020

Hi Robert,

thank you for this great widget. I would really like to use it but I am getting error while clicking at the widget icon.

My layer structure is as follows:

Map service

floor1 (group)

layer1

layer2

layer3

floor2 (group)

layer1

layer2

layer3

floor3 (group)

layer1

layer2

layer3

I want to obviously to exclusivly toggle the floor groups. But when I toggle it, it switch off all the sublayers in group.

If I set to toggle even the sublayers together with the group, I get the error below.

I can observe this behaviour in Portal WAB (10.7.1) as well as in WAB DE (2.12, 2.13).

Console error:

Do you have any idea what is going on?

Thank you,

Jan Sarata

RobertScheitlin__GISP · ‎01-10-2020

Jan,

What version of the widget are you using? The error line numbers are not matching up to the latest version of this widgets code...

JanSarata · ‎01-12-2020

Hi Robert,

thank you for your response.

I downloaded 2.12 version attached to your comment from 28 August of 2019 in this thread.

The console error appears only when I configure to toggle the layers (layer1, layer2, layer3) within the group (floor).

If I configure to toggle only the groups (floors) it is working fine except it turns off the sublayers within the group. So I end up with correct group (floor) turned on but all its sublayers are off.

Jan

RobertScheitlin__GISP · ‎01-13-2020

Jan,

The widget will toggle layer exactly as they are configured in the widget. So if you want to toggle group1 then it has to be checked in the widgets settings but if you have nothing in that group checked in the widgets settings then those sub layer will be turned off in that group if they are currently on. So if you want group1 to toggle and layer1 and layer2 toggle then you have to check each of those in the widgets settings.

JanSarata · ‎01-13-2020

Hi Robert,

thanks for your prompt response.

I think I followed the scenario you suggest -> see the screenshot attached

But then when I click the toggle button I am getting the console error mentioned in my previous comment.

RobertScheitlin__GISP · ‎01-13-2020

Jan,

OK, I will look into this further.

RobertScheitlin__GISP · ‎01-13-2020

Jan,

OK. I see that the issue is the group layer. I will be creating a fix for this and releasing a new version soon.

Layer Toggle Button Widget Version 2.14 - 01/13/2020

Layer Toggle Button Widget Version 2.14 - 01/13/2020

Widget Downloads