Is it possible to add a toggle on/off widget to my AGOL map?

441
11
Jump to solution
05-23-2018 05:57 AM
JarekWigness
New Contributor

I have a utility map that has a lot of pt and line info for city infrastructure in it.  The current configuration makes you click each individual layer on/off in the layer list (sewer lines, manholes, water gate valves, hydrants, etc.)  I was curious if there was a simpler way to group multiple layers under one umbrella and then toggle these grouped features on/off with a single click.  Ideally, I would like to have all city water and associated line/pt features under one group, then same for sewer, storm/drainage, and rural water.  I think it would make the map more user friendly.  Is this a feature that requires a bit of coding and using web builder developer?  Would this process be easier if I had ArcPro? 

Any feedback/suggestions on this would be greatly appreciated.

Thanks

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Jarek,

   The widget will function fine in WAB without launching the app. Have you tested with simply one layer? This widget will toggle the current layer state (so if the layer is vible then a click would turn the layer off and vise versa).

View solution in original post

11 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Jarrek,

   If you can group the layers in the mxd that is used to publish the map service then it would require not coding just a re-publish of your map service. If that is not an option then the use of WAB developer and the custom widget Layer Toggle  Button is what you want. The use of Pro is not something that can help in this situation.

JarekWigness
New Contributor

Robert,

My first thought was also to group in the .mxd used to publish the map service, but for some reason that did not work as expected.  Looking at the preview map of Calhoun county that employs your widget, the way in which the public safety layers are grouped is what I was thinking, and the toggle button is a cool add-on.  I am relatively green at using web app builder developer, or node.js for that matter, so are there tutorials to help me familiarize myself with the process before diving into this modification? 

Thanks

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Jarek,

   WAB Dev uses Node under the hood so you don't have to know anything about it. As far as using WAB Dev it is not much different from the WAB builder you used on AGOL. I would say just dive in.

JarekWigness
New Contributor

Robert,

Sounds good!  The instructions via the 'Get Started' section for WAB Dev seem fairly straight-forward, though providing an app ID and some of this other stuff seems like a bit of a barrier to entry to start building apps, once I get through that to start building--are the directions for adding/creating the toggle widget fairly simple for a novice like myself? What does the process entail?

Thanks again

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Jarek,

   Just copy the custom widgets folder into the WAB client\stemapp\widgets folder.

JarekWigness
New Contributor

Thanks Robert,

I'll let you know how the process goes, and I'll shoot you any comments/questions I have as I work through it. 

0 Kudos
JarekWigness
New Contributor

Robert,

So I successfully copied and uploaded the 'LayerToggleButton' widget onto my web app, then I added it to the 'set widgets managed by Header Controller', and checked which infrastructure features I wanted each toggle button to turn on/off (I added several).  But it seems as tho the toggle button does nothing when I click it.  Am I missing a step? Or do I have to launch the app to view the feature? (that seems unlikely to me, you should be able to view/edit features in preview mode.

Thanks,

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Jarek,

   The widget will function fine in WAB without launching the app. Have you tested with simply one layer? This widget will toggle the current layer state (so if the layer is vible then a click would turn the layer off and vise versa).

View solution in original post

JarekWigness
New Contributor

Robert,

Interesting wrinkle, it didn't work when I was using the toggle button up on the Header, but when I added it to one of the widgets spots set aside towards the bottom corner (foldable theme), the test layer worked!  So I just need to reconfigure/edit a few things here and it should work.  Fantastic little widget.  Thanks for your help and I'll let you know if I have any further issues.

Thanks, again

0 Kudos