idea ArcGIS JavaScript API - Need Table of Contents (TOC) Widget in Developers Ideas

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

IanPeebles — Wed, 16 Mar 2016 14:21:03 GMT

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.

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

BjornSvensson — Thu, 21 Jul 2016 21:48:08 GMT

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.

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

IanPeebles — Thu, 21 Jul 2016 22:49:27 GMT

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.

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

BjornSvensson — Thu, 21 Jul 2016 23:03:30 GMT

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...

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

IanPeebles — Fri, 22 Jul 2016 00:12:34 GMT

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.

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

Anonymous User — Mon, 25 Jul 2016 15:50:24 GMT

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).

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

IanPeebles — Mon, 25 Jul 2016 17:28:51 GMT

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?

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

Anonymous User — Mon, 25 Jul 2016 18:06:06 GMT

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.

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

IanPeebles — Mon, 25 Jul 2016 18:15:06 GMT

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.

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

BrandonPayne — Wed, 24 Aug 2016 14:46:00 GMT

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

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

IanPeebles — Wed, 24 Aug 2016 18:27:45 GMT

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

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

BrandonPayne — Wed, 24 Aug 2016 19:09:36 GMT

Hey Ian,

I've been cranking away at it this morning and I think I've just about cracked it for a custom TOC with the symbology in-line. The key was to go out and fetch the entire Legend as JSON from the REST service and parse it out manually, injecting the image data into an html <img> tag. Angular made it a bit easier to loop through all the different layers so that was nice but a snapshot of the combined is below:

This was definitely a custom TOC built from the ground up, so hopefully ESRI will implement something like this so we don't have to do the one-offs anymore.

-Brandon

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

BjornSvensson — Wed, 24 Aug 2016 19:15:51 GMT

Hi Brandon Payne‌

As mentioned above, the ArcGIS API for JavaScript added a LayerList widget at version 3.14, and at 3.15 a showLegend option was added. What functionality is missing from that widget to fullfill your needs?

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

BrandonPayne — Wed, 24 Aug 2016 19:21:51 GMT

Hi Bjorn,

Ideally we'd like to have the LayerList able to display the legend in-line instead of having to toggle back and forth to see what the symbology is. So for instance if you look at my comment above, I created a custom table of contents that does this for us where we can turn on/off a layer and see its symbology all at one time. Note that this is also for the 4.0 JS library, which it doesn't seem the LayerList widget is a part of yet according to Functionality matrix | ArcGIS API for JavaScript 4.0

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

IanPeebles — Thu, 25 Aug 2016 15:28:33 GMT

Brandon this looks great! This is exactly a widget that would be useful within applications. I am now wondering why this type of widget has not been introduced in the API because out of all the GIS Developers I have had a chat with, they are wondering the same thing.

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

IanPeebles — Thu, 25 Aug 2016 15:29:31 GMT

I am working in 3.17. Not going to 4.0 until more functionality is introduced, but eventually we will get there.

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

BrandonPayne — Thu, 25 Aug 2016 16:17:02 GMT

Hopefully ESRI will add this in and make it a little more solid and user-friendly. To get this to work I had to create the treeview in Angular, add in each layer individually, and then add a JSON request out to the /legend endpoint of the layer services to pull them in and query each individually to grab the symbology by layer id.

I've seen a few projects that had something similar to this, but none that had recent work on them or that had been ported over to the new API. Maybe a future enhancement?

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

IanPeebles — Thu, 25 Aug 2016 17:36:05 GMT

Sounds interesting. Will be interesting to see if you can get this to work using group layers. I did submit an enhancement request a while back. I will have to check and see if it is still out there.

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

BrandonPayne — Fri, 26 Aug 2016 13:51:57 GMT

Category 1 & Category 2 above actually are group layers. They do live on the same server though, so I'm not running into any issues with the layer id being the same for multiple layers.

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

SofieVanhoutte1 — Mon, 13 Mar 2017 14:46:59 GMT

Hi Brandon,

Would it be possible to share your code to generate your custom TOC? That looks exactly what I need too.

Thank you very much!!!