ArcGIS JavaScript Hack: LayerList and ArcGIS Online

Creating Layer visibility controls for web maps can be a pain. If you’ve tried to implement complicated web maps or “ArcMap on the web” applications, you know what I mean. So, when ESRI released the LayerList widget in v. 3.14 of their JavaScript API, I had to try it out.

The LayerList

I found the LayerList to be a pretty good tool for toggling map layers on and off. It handles sub layer visibility for those dynamic map services where you don’t want to show EVERYTHING in the beginning. It also integrates opacity sliders when you want to see what’s underneath. Everything displays and collapses nicely, so there’s not much clutter on the screen. I really liked this user control: so much so that I wanted to…

LayerList all the Maps!

The Problem

That’s when I found an issue. I had added the LayerList to one of our web applications, in place of a custom control I had made before, and a client mentioned that they couldn’t see the name of the base layer in the list. I checked it out, and found the client was right. Their latest aerial photography wasn’t visible in the LayerList control.

After a bit of trial and error, I found that the LayerList only shows the operational layers for any web map created through ArcGIS Online. Perhaps they felt that the base map should always be on, since it provides a context you the user can relate to. Or perhaps they had integration problems with it and the Basemap Gallery. I don’t know. All I knew was that the LayerList didn’t show the basemap, and I didn’t know how our client would take it if I told them to wait until ESRI released a fix for it.

Since the ArcGIS JavaScript API isn’t open to issues or pull requests, how was I going to deal with the issue? As a good geo-netizen, I posted my issue on the GeoNet forums. I included a simple use case I cobbled together on CodePen. I hoped I did enough to raise awareness of this use case.

The Solution

While putting together the example, I realized something. A web application is like the movie Inception. With enough know-how, you can totally bend it to your will. So, I analyzed how the user interface was created, and mocked up an extension to the LayerList. What I eventually came up with was the following.

It’s still a little rough, but I was surprised how well it worked. Not only could I get an ArcGIS Online basemap to show in the list, but I could toggle it on and off with the control. Now, I didn’t go so far as to integrate base map opacity or any other cool features. I’ll leave that to somebody else with more time and money. But I’ve published the gist above, and provided a use case in a CodePen below, which expands upon the previous one from my issue.

So, what I have learned from this? I’ve learned it’s so much easier to contribute directly to open source. I learned the different channels to communicate issues with software companies, and why I’d rather spend the time to hack together my own fix. Finally, I learned that I have a super power.


After going back and forth with one of the Product Engineers at ESRI, we came up with a more non-invasive method to add the ArcGIS Online Basemap layers to the LayerList. It involves packaging the basemap layers with the operational layers in a list, then creating the LayerList with those layers assigned. Code and examples will be posted soon.