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.

[BrandonPayne]

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

[BjornSvensson]

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?

[BrandonPayne]

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 

[IanPeebles]

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.

[IanPeebles]

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

[BrandonPayne]

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?

[IanPeebles]

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.

[BrandonPayne]

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.

[SofieVanhoutte1]

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

[BrandonPayne]

Hey Sofie,

I've been meaning to release this out to GitHub.  I need to run through the code and clean it up a bit then I'll get it out there.  I'll put a link up on this thread when I do.

-Brandon