Will LayerList widget ever support toggling base map layer visibility?

[KenDoman]

First off, I must say that I like the LayerList widget a lot. After implementing it in a few places, I noticed that maps created through ArcGIS Online web maps don't display the base map layer in the LayerList. Here's an example I cobbled together, creating the same map manually, and through a web map. LayerList Comparison: ArcGIS JavaScript API

Are there plans to let users toggle the ArcGIS Online base map layer on and off through the LayerList? Some people may use satellite or aerial photography for base maps to locate items, but they may want to turn those layers off before printing or some other function.

Thanks,

[KellyHutchins]

If you add the basemap layers to the layers array that you pass in to the LayerList constructor you should see the basemap layer(s) in the LayerList widget. I tested this against a few web maps and it worked for me.

        var layers = arcgisUtils.getLayerList(response);
        array.forEach(response.itemInfo.itemData.baseMap.baseMapLayers, function(l){
          layers.push({
            layer: l.layerObject
          });
        });

[KenDoman]

That seems to catch most of it. I also needed a way to ensure that the response.itemInfo.itemData.baseMap.title is displayed for the basemap layer name as well. If your fix covers that scenario, I'd appreciate it.

[KellyHutchins]

It shows the title for my test case.

JS Bin - Collaborative JavaScript Debugging

[KenDoman]

Your example gets most of the job done. The two issues I found were where the LayerList put the basemap at the top of the list, and sometimes the ArcGIS Online basemap title in the LayerList didn't match the title given in the web map.

1.         var layers = arcgisUtils.getLayerList(response); 
2.         array.forEach(response.itemInfo.itemData.baseMap.baseMapLayers, function(l){ 
3.           layers.unshift({ 
4.             layer: l.layerObject 
5.           }); 
6.         }); 

If you added your basemap as a "layer from the web", and didn't save the layer to your ArcGIS Online Account, the name generated by the layer list may not match the name from the web map. Here's another patch to make that basemap layer title show.

1. var layers = arcgisUtils.getLayerList(response); 
2.         array.forEach(response.itemInfo.itemData.baseMap.baseMapLayers, function(l, index){ 
3.           var layerData = { 
4.             layer: l.layerObject 
5.           };
6.           if (index === 0) {
7.             layerData.layer = lang.mixin(layerData.layer, {title: response.itemInfo.itemData.baseMap.title});
8.           }
9.           layers.unshift(layerData); 
10.         }); 

It doesn't look pretty, but it works.

JS Bin - Collaborative JavaScript Debugging

[KellyHutchins · Accepted solution]

You can use unshift to add the basemap layers to the front of the array which will in turn make them display at the bottom of the layer list. You can also specify the title when you add the basemap layer to the array. In my case I just set it to the layer title but you could set it to whatever value you'd like.

        var layers = arcgisUtils.getLayerList(response);
        array.forEach(response.itemInfo.itemData.baseMap.baseMapLayers, function(l){
          layers.unshift({
            layer: l.layerObject,
            title: l.title  // Use this to set the title
          });
        });
        var myWidget = new LayerList({
           map: response.map,
           layers: layers 
        },"layerList");
        myWidget.startup();