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

[#1]

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:

1. Fixed issue with group layers in 2.12 WAB.

List of Previous changes:

1. Fixed issue with basemap being toggled when exclusive mode is used in 2.12 WAB.
2. Full support for using this widget in the Launchpad themes Anchorbar controller is now supported.
3. 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.
4. There is now a zoom to layers extent option for the layer(s) toggles.
5. There is now a event that can be listened for when a layer is toggled on. The event name is 'toggleChanged'.
6. Widget now indicates the toggle state of the layer using the background color of the button.
7. You can follow the directions in the downloads readMe.txt to set the initial state of the button to be toggled on.
8. Now the widget support toggling multiple layers.

[RebeccaStrauch__GISP]

Thanks Robert.  Added to Web AppBuilder Developer Edition - Customization Resource List

[LeoLadefian5]

Thanks Robert, nice feature.  I was wondering, is there any way to bind the query widget to turn on a map layer as well?

[RobertScheitlin__GISP]

Leo,

See this thread:

Activating a layer when a widget is turned on (and vice versa)

[RichBell]

Is there a way to toggle more than one layer at a time?

I would like to use this widget to create a series of defined maps, ie: Zoning Maps, Census Maps, etc.

Thus I need the ability to turn off all other layers and then turn on only those to create the define set of Maps.

The toggle button would be great as a means of defining a group of layers to show without having to turn on/off layers using the Layer List widget.

Rich

[RobertScheitlin__GISP]

Rich,

  Your desired workflow is not supported at this time.

[AdamGebhart]

Robert,

Is there any chance I can configure this to be used as a basemap toggle... without having those basemaps used in the AGOL map or service?  Meaning I want to add basemaps to it in the same way one would with ESRI's Basemap widget or your enhanced Basemap widget.

[RobertScheitlin__GISP]

Adam,

   That would be a pretty significant redesign of the widget and it's settings UI. Are you only talking about standard esri basemaps? If yo are talking support for custom basemaps then the LOE increases more.

[AdamGebhart]

I am referring to custom basemaps.  Darn.

Earlier this year I tried to create a (custom) basemap toggle widget but didn't get far at all.  Maybe I'll get that done before retirement in ~30 years.

[AwesomeEvan]

It would be great if multiple layers can be toggled with one button . . . then it would essentially be like a Map Themes functionality . . .

Simcoe's Web Map does this well... within the 'menu' button

Interactive Map - County of Simcoe (GIS) 

[deleted-user-Sh7q9fbKLpEv]

RichBell‌ I'm looking to do the exact same thing and haven't found a good solution on how to do this, have you?

[RichBell]

Unfortunately,

The answer is “no”.

I was hoping Robert would add this functionality to the widget.

Let us wait and see????

Rich

[deleted-user-Sh7q9fbKLpEv]

Thank you for your prompt response!

[RobertScheitlin__GISP]

jkovarik@co.carver.mn.us_carver‌ and RichBell‌

The widget now supports toggling multiple layers.

[deleted-user-Sh7q9fbKLpEv]

This is great, thank you very much rscheitlin‌!

[RichBell]

Thank You for adding multiple Layers.

What is needed is the ability able to change the default eSearch Layer to a new Layer default for the eSearch widget.

When the Layer Toggle button is clicked change the eSearch default Layer also.

This way a user can change the Map "Theme" and not have to change the eSearch widget search Layer.

Thanks a Bunch!

Rich

[BBulla]

Hi,

Is there a way to toggle between the 3 layers that I have 'checked off' when adding the tool?

For example, I have Layer1, Layer2 and Layer3.  I would like to tool to flip between the three, but what is happening is it is turning off Layer1 and turning on Layer2 and Layer3 at the same time.  Acting like a 2-way toggle.  I guess I am asking for a 3-way toggle....or more, depending on how many layers are chosen.

Know what I mean??

[RobertScheitlin__GISP]

I know what you mean, but no this is not available. I will consider looking into this but no promises.

[BBulla]

No worries.  I am looking at the code now and will see what I can figure out.  If I come up with something, I'll let you know.

I am new to these widgets, so it may take a while!!  🙂

[JayJohnson]

Robert - this is great code, thanks.  Would it be difficult to insert some additional code that first turns off all the Operational Layers before the toggle occurs?  In this way, a user could have three, four or more individually configured toggle widgets on their map and each widget would turn on a different set of layers and ONLY those layers. 

Much like B Bulla, I've got multiple layers that I want users to be able to switch between, but I want to ensure that they don't have any two themes on at the same time as the themes are semi-transparent...

Jay

[RobertScheitlin__GISP]

Jay,

  I will consider this for the 2.3 release. It seems like I had some idea like this when I started but ran into an issue and punted on that.

[GiacomoFavaron1]

Very useful widget! Would it be possible to grey out the icon for when the layers in the toggle are switched off?

[RobertScheitlin__GISP]

I will consider this for a future release. But the likelihood is that I will do the reverse. I will change the appearance of the button when the layer is on instead.

[IngridAldridge1]

This is a fantastic widget.  When I use it in conjunction with the Dart theme it minimises the dart and  you can no longer view the widget.  Is this an issue you are looking into?

[RobertScheitlin__GISP]

Ingrid,

   When you add a widget to the dart themes controller and the widget does not have a panel then it automatically minimizes the dart controller. This is out of my widgets control as it is the themes default behavior. You just need to re-expand the dart controller my clicking on the triple ellipses icon the dart controller.

[BenjaminKim1]

Robert - this seems to be a great widget, but I need help how to set up in my web app. I downloaded your code, saved under widgets folder, and added the following into the main config.json but the widget is still not showing up. Also, your code has "ParcelViewer_4948" under layerOptions. Where does this layer name come from? How can I find a layer name in my web app? Thanks

{
"uri": "widgets/LayerToggleButton/Widget",
"position": {
"left": 25,
"top": 665,
"relativeTo": "map"
},
"version": "2.0.1",
"id": "widgets_LayerToggleButton_Widget_22",
"name": "LayerToggleButton",
"label": "LayerToggleButton"
}

[RobertScheitlin__GISP]

Benjamin,

   There is no need at all to manually add the widget to the main config.json. Once the LayerToggleButton folder is added to the stemapp widgets folder then you will see the Layer Toggle Widget as an option in your choose widget dialog in WAB.

[BenjaminKim1]

Robert, I tried, but I don't see any layers to toggle in configuration step. I am using WAB 2.0 version. Does your code work for WAB 2.0? If not, do you have Layer Toggle Button Widget for WAB 2.0? Thanks,

[RobertScheitlin__GISP]

Benjamin,

   No this widget was not developed back in WAB 2.0.

[TimHoward]

Robert,

     I was trying not to bug you as I know you are a busy man.  I'm using this widget as a group widget in the launchpad theme.  It's working fine except that I can't tell which layers are active or not.  I got it to utilize the launchpad anchorbars "pop up" action to show the active layers.  However I know the code isn't right.  I have to toggle the buttons twice to get the layer to turn off, thus the button can be "popped up" and the layer off.  You made mention in a post above about changing the appearance when a layer is on.  That would work too.  Here is my "wrong" code.  I was attempting an onClose to get the popup action I was talking about.  Any advise is very much appreciated.  Your work is a great asset to all on here.  Thanks!

onOpen: function () {
// var layerInfoArray = this.operLayerInfos.getLayerInfoArray();
// array.forEach(layerInfoArray, function(layerInfo) {
// if(layerInfo._visible){
// layerInfo.setTopLayerVisible(false);
// }
// }, this);
this.setToggleLayer();
var lObjs = [];
array.map(this.toggleLayerIds, lang.hitch(this, function (id) {
lObjs.push(this.operLayerInfos.getLayerInfoById(id));
}));
if (!this.isToggling) {
this.isToggling = true;
array.map(lObjs, lang.hitch(this, function (lObj) {
this.toggleLayer(lObj);
}));
}
},
onClose: function () {
setTimeout(lang.hitch(this, function () {
this.isToggling = false;
PanelManager.getInstance().closePanel(this.onClose);
}), 300);

},

Tim

[RobertScheitlin__GISP]

Tim I am sorry to say that the widget was just not designed to be used in a group in Launchpad.

[TimHoward]

Robert,

     I get that.  I know it was designed more for off panel.  But it seems that it can and will function this way since it's actually working great with just this one limitation.  This was a work around to using the basemap gallery since that widget is so strict on coordinate systems.  It would be most difficult and time consuming for me to reproject all of my aerial layers.  None of this was an issue with Flex, but that's another story.  I appreciate you getting back to me.  Perhaps I'll have to look for another way.  It shouldn't be this difficult to simply toggle some aerials that happen to not be in Web Mercator.  I'll figure out something.  Always do.  Thanks again and keep up the good work. 

[CalebAnderson1]

Thanks for this great widget! I have been working on a city utility web map and having a few easy "buttons" to turn all the layers of one utility on or off at a time is perfect. There are about 8 layers for each utility so it was a pain to toggle all of the layers on and off when switching which utility was being displayed. 

One widget button each for sewer, stormwater, and drinking water:

[NoahCynkar]

In the Layer List, how do you create subsets? In the example in the 'Live Preview Site' when you click Layer List it has the option to expand the two main layers to reveal smaller subsets of data. I have about 20 layers but most of them could be combined into 5 main groups that I would like to have the option to toggle on and off. Is there a simple solution to this? I have installed ArcGIS for Developers onto my computer successfully.

[RobertScheitlin__GISP]

Noah,

   The grouping of layer has to happen in the map service level before it is added to the web map.

[NoahCynkar]

Thanks Robert, we had tried to bring it into the map already grouped but it does not keep the grouping once its uploaded. We uploaded the groups as one GDB but AGOL seems to break the shapefiles apart so they are no longer grouped together. I am attaching an image of what we are seeing when the layers are added to the web app. For example, we would like to have a top heading for LOS that you could expand to reveal the 6 layers. And the same for PTI data with the 2 layers. How do you do it in the map service? 

[RobertScheitlin__GISP]

Noah,

  I am not sure what to tell you. I don't host data on AGOL as I have ArcGIS Servers at my disposal. When I publish a map service with the layer grouped they work fine for me in the layer list widget.

[James_001]

Robert,

I always in search of your widget, they are really useful. I am trying to find an option which allows me to turn off and on Layer categories in an attribute table. 

e.g. I have incident data which have a column crime type, I want to add check in on or off for that. Is it possible? I have already designed the symbology in the web map.

Currently, the layer toggle widget option turns on and off all subset layers.

[RobertScheitlin__GISP]

Irfan,

   Sorry I am not following what you are asking. Can you try and explain better.

[James_001]

Robert,

Thanks, I have attached a screen shot for better understanding. Currently, I have incidents layer which is sub divided into incidents types, when we turn on Incidents it will turn on and off all incidents.  I want to add check separately for the user to turn on and off. This layer symbology is designed in web map. 

[RobertScheitlin__GISP]

Irfan,

   This is not possible unless you add each type as a separate layer using a definition expression.

[James_001]

Robert,

Thanks, how to add definition expression for a separate layer. I am sorry not a big expert in WAB.

[RickeyFight]

Apply filters—ArcGIS Online Help | ArcGIS 

[AnthonyTaccone]

This widget is exactly what I am looking for. I am using it to make quick map views. This widget allows me to pick all the layers within a group, lets use engineering for example, and allow the user to only click once instead of going through all the layers and checking them one by one. The only problem I seem to be having is I cannot use it in the dashboard theme within the panels. Is the fix simply to change the code from False to True for the "inPanel" code?

[AnthonyTaccone]

From changing the code from "false" to "true", I can use it in the dashboard panel. The next problem I am having is that when I click on the button it selects the layers, but when I click it again it does not deselect the layers. I have to click on another button and then click back to the old button for the layers to be unchecked. Is there a reason that I cannot simply click it once to select the layers and then again to deselect them? I also have no use for the legend and was wondering how I can take this out. Thank you.

[RobertScheitlin__GISP]

Anthony,

   I have not worked with the Dashboard theme or tested it so I can not help there.

[AdamDrackley]

Hey Robert, hope things are well.  I've got some code that can toggle the basemap, and instead of creating a brand new widget, it might make the most sense to add the functionality into yours.  If I sent you a prototype, would you be interested in merging this functionality into your widget?

[RobertScheitlin__GISP]

Sure.

[AldoMilan1]

One of the best widget available.

It would be really useful to change the icon because users would immediatly understand the meaning of the switch.

[RobertScheitlin__GISP]

Aldo,

   I am not sure about changing the icon but I will look into changing the background opacity.

[AldoMilan1]

Robert,

changing the background opacity would be an excellent solution