ArcGIS JavaScript API - Need Table of Contents (TOC) Widget

IanPeebles

The idea is to add in a table of contents widget for the JavaScript API. Right now, there is the legend, then a layer checklist. These two must be combined to prevent the user from having to toggle back and forth between the checklist and the legend. Allow for the symbology to be displayed right next to the check box. Allow for collapsing/expanding the TOC widget and allow for multiple group layers to be supported. Below is an example:

Current end users what an all inclusive TOC and not have to toggle back and forth between two widgets.

BjornSvensson · ‎07-21-2016

The ArcGIS API for JavaScript added a LayerList widget at version 3.14, and at 3.15 a showLegend option was added. I think this allows for the combination of Legend and LayerList that you are asking for, even though it's implemented slightly different from what you gave as implementation suggestions.

IanPeebles · ‎07-21-2016

Thanks Bjorn! I actually had a brief chat with you at the Dev Summit. Also, you will be glad to know that I have been using this widget since April and really like it. I have a few apps that are using this widget. BTW, can you add in a property where I can switch the order of the sublayers and legend, that is allowing for the legend to appear before the sublayers? Also, need an option where I can set the visibility of the layers (as turned off) but that those layers unchecked in the layer list? For instance, I had addresses set to no visibility in the app, but they were still showing as checked on in the layer list. Need those two to work together.

BjornSvensson · ‎07-21-2016

Hi Ian,

Why do you want to switch the tab order? Is it to make the legend tab be active on startup?

I don't understand the "an option where I can set the visibility of the layers (as turned off) but that those layers unchecked in the layer list". Could you explain? If some layers are set to no visibility and still showing as checked, that sounds more like a bug...

IanPeebles · ‎07-21-2016

Bjorn, yes, making the legend tab active on start up. That would work and I can use that if it is possible.

"Could you explain? If some layers are set to no visibility and still showing as checked, that sounds more like a bug...", that is what I am saying. I can give you a screenshot tomorrow.

Anonymous User · ‎07-25-2016

My users would prefer it to work like ArcGIS Earth or AGS JS TOC widget. This is based on feedback from hundreds of users of all capabilities and professions I have trained (from arborists to surveyors) to use our map viewers built on WAB. I actually show them these TOCs (AGS JS TOC and Earth's), and then the way it is in the JS API and WAB. They want it like ArcGIS Earth. One-click turn on a layer, no matter what visibility parent group(s) are, and a partial checkbox to indicate when not all group items are visible.

Ian Peebles does this jive with what your users are looking for? I know these sound like details! But it trips users up every single time and I can just see they are thinking "well, this is too much to remember. I will keep using printed maps". I want to serve them the best which means having the best user interface (easiest to use, fast user interaction like one-click to turn a layer on).

IanPeebles · ‎07-25-2016

I do like the layer list widget, but the TOC widget is better IMO, because you do not have to toggle between tabs to see checked layers and the legend.

I would like to see a widget Just like the screen shot below.

I just had a look at the ArcGIS Earth TOC and it looks like this:

The problem here is that no symbology is displayed below the checkbox.

Toggling just gives the end user something else they have to do with the existing widget. Make the checkboxes and layers visible in one screen just like ArcMap. Not sure why this has not been done.

Here is an example, where the legend shows below the checkbox, yet when you get sublayers, you have to click on another box to get the legend? Why not just add the legend below the sublayers checkbox?

Also, the when setting the visible layers in JavaScript, if the layer is visible in the map service, but I want it to be invisible within an application, I can do that, but the layer check box remains on. The checkbox needs to reflect the state of the layer visibility as set within the application.

So you are saying, this is what your end users want to see as well?

Anonymous User · ‎07-25-2016

Yes Ian I agree completely. It definitely needs built in symbology. The widget you reference AGS JS TOC at the top is perfect, except it lacks a partial checkbox (Could be fixed with CSS and a bit of JS fairly easily I imagine). I wanted to highlight the partial checkbox concept. Other than not having an integrated legend, the Earth TOC behavior is perfect. Basically, combine the two. Interestingly enough it appears Nianwei Liu has abandoned the project...Google Code Archive - Long-term storage for Google Code Project Hosting. it doesn't load here anymore. https://www.arcgis.com/home/item.html?id=9b6280a6bfb0430f8d1ebc969276b109 it's a dead link. Good thing I kept a local copy! It is still the best layer list TOC for the JS API by far. It continues to have better UI and features than even the WAB LayerList. Really, again all they need to do is combine the partial checkbox from Earth on top of the AGJS TOC code and integrate it in to WAB LayerList and the JS API.

IanPeebles · ‎07-25-2016

Kevin,

I used the TOC widget in older apps, but it had it's issues as it was a non-ESRI widget as you know. That particular widget had an issue with group layers as well. I believe no further work has been done on this widget and some of the goofiness has not been fixed, so I turned to the current ESRI solution.

The layer list widget is nice, but I do agree with you, combine the two. The widget I want should have the same behavior as an ArcMap TOC like the sample below:

We are moving to more web-based type applications and many users like the current ArcMap TOC. All this would involve is a click or turn on the layer and everything is there.

I am wondering why this type of functionality has not been included and what the design reasoning might be?

I have used the non-ESRI TOC widget on iPad and it worked just fine.

BrandonPayne · ‎08-24-2016

Hey Ian,

Wouldn't you know it I'm currently working on a project where we want this exact same thing with the TOC having the symbology with it, and here you have the same issue! It really is a small world sometimes. Did you ever make it anywhere with this?

I'm working on an Angular 2 application and have created a custom TOC to try to get this to work but have ran into a bit of a wall just trying to find the locations of the symbology images.

-Brandon

IanPeebles · ‎08-24-2016

Hello Brandon! I started using the layer list widget that allows for checking on and off layers as well as the ability to display a legend. So far, this has worked really well. Here is a sample below that I use in an application:

Layer list in Sublayer Mode:

Layer List in Legend Mode:

Would a widget like this work for your needs?

Ian