Looking for any examples of a collapsible layer list that Auto fills with my layers. I have seen some really basic layer list examples on the api page but nothing that allows collapsible areas and auto filling of your layers. I am trying to create 3 different areas as seen below. Were the box next to the ------------- would collapse that section. But I want it to auto fill the layers from my .js page. Right now I am adding layers to the list and adding check boxes BUT THERE it is not collapsible legendLayers . push ( { layer : FloodZonelayer , title : 'Flood Zones' } ) ; // ADD CHECK BOXES FOR LAYERS map . on ( 'layers-add-result' , function ( ) { //add check boxes arrayUtils . forEach ( legendLayers , function ( layer ) { var layerName = layer . title ; var checkBox = new CheckBox ( { name : "checkBox" + layer . layer . id , value : layer . layer . id , checked : layer . layer . visible } ) ; checkBox . on ( "change" , function ( ) { var targetLayer = map . getLayer ( this . value ) ; targetLayer . setVisibility ( ! targetLayer . visible ) ; this . checked = targetLayer . visible ; } ) ; //add the check box and label to the toc domConstruct . place ( checkBox . domNode , dom . byId ( "toggle" ) , "after" ) ; var checkLabel = domConstruct . create ( 'label' , { 'for' : checkBox . name , innerHTML : layerName } , checkBox . domNode , "after" ) ; domConstruct . place ( " " , checkLabel , "after" ) ; } ) ; } ) ; //ADD THE LEGEND AND XY COORDINATES map . on ( "layers-add-result" , function ( evt ) { // CYCLE through and grab all the layer names to add to the LEGEND PLUS // Remove layers not inteneted for the legend. var layerInfo = arrayUtils . map ( evt . layers , function ( layer , index ) { if ( layer . layer . id === "PastLocations" || layer . layer . id === "District" || layer . layer . id === "weatherlayer" ) { return { } ; } //Hides Layers in the Legend else { return { layer : layer . layer , title : layer . layer . name } ; } //Else return All others } ) ; // CYCLE through and grab all the layer names to add to the LEGEND if ( layerInfo . length > 0 ) { var legendDijit = new Legend ( { map : map , layerInfos : layerInfo , } , "legend" ) ; legendDijit . startup ( ) ; legendDijit . refresh ( ) ; } } ) ;

I know this is not the way to do this although I don know of any other way to accomplish what I am looking for... This is how I put on a large band-aid * I still have to clean up the CSS to hide the clumsiness of this approach...especially with nesting the accordion panes.. * I still have to clean up my code so don't be too judgmental I repeated the code to build the legend layers in each of the accordion panes. * I can put if then statements in this section to decrease the amount of code - map.on('layers-add-result', function () { This gives you something like this in your panel... I have a container for Weather, Incidents, Other Layers. If I do a little CSS work I can get ride of the frames and color backgrounds and make this look a little more appealing. The example below does not have all the layers in the image. In my below example it would simply put one feature layer in each of the 3 accordions Follow the "legendLayers1.push" below from each FeatureLayer to the function below it. legendLayers1.push({ layer: WeatherImpactWashout, title: 'WeatherImpact Washout' }); legendLayers2.push({ layer: WeatherImpactWashout, title: 'WeatherImpact Washout' }); legendLayers2.push({ layer: WeatherImpactWashout, title: 'WeatherImpact Washout' }); div id = " IDAccordionPaneLayers " data-dojo-type = " dijit.layout.AccordionContainer " style =" color : black ; height : 90% ; width : 90% ; " > div id = " idLayers2 " data-dojo-type = " dijit.layout.ContentPane " data-dojo-props = " title: ' Weather ' " > div data-dojo-type = " dijit/layout/ContentPane " data-dojo-props = " title: ' Natural Disasters ' " > div id = " toggle2 " style =" padding : 2px 2px ; color : Black ; " > div > div > div > div id = " idLayers3 " data-dojo-type = " dijit.layout.ContentPane " data-dojo-props = " title: ' Incidents & Traffic ' " > div data-dojo-type = " dijit/layout/ContentPane " data-dojo-props = " title: ' Natural Disasters ' " > div id = " toggle3 " style =" padding : 2px 2px ; color : Black ; " > div > div > div > div id = " idLayers1 " data-dojo-type = " dijit.layout.ContentPane " data-dojo-props = " title: ' Layers1 ' " > div data-dojo-type = " dijit/layout/ContentPane " data-dojo-props = " title: ' Natural Disasters ' " > div id = " toggle1 " style =" padding : 2px 2px ; color : Black ; " > div > div > div > div > var WeatherImpactPowerLines = new FeatureLayer ( " https://arcgis.vdem.virginia.gov/ArcGIS/rest/services/Traffic/VATraffic_WeatherImpactPoints/MapServer/4 " , { mode : FeatureLayer . MODE_ONDEMAND , visible : false , outFields : [ "*" ] , infoTemplate : infoWeatherImpact } ) ; legendLayers1 . push ( { layer : WeatherImpactPowerLines , title : 'WeatherImpact Power Lines' } ) ; var WeatherImpactOther = new FeatureLayer ( " https://arcgis.vdem.virginia.gov/ArcGIS/rest/services/Traffic/VATraffic_WeatherImpactPoints/MapServer/5 " , { mode : FeatureLayer . MODE_ONDEMAND , visible : false , outFields : [ "*" ] , infoTemplate : infoWeatherImpact } ) ; legendLayers2 . push ( { layer : WeatherImpactOther , title : 'WeatherImpact Other' } ) ; var WeatherImpactPassable = new FeatureLayer ( " https://arcgis.vdem.virginia.gov/ArcGIS/rest/services/Traffic/VATraffic_WeatherImpactPoints/MapServer/6 " , { mode : FeatureLayer . MODE_ONDEMAND , visible : false , outFields : [ "*" ] , infoTemplate : infoWeatherImpact } ) ; legendLayers3 . push ( { layer : WeatherImpactPassable , title : 'WeatherImpact Passable' } ) ; // ADD CHECK BOXES FOR LAYERS map . on ( 'layers-add-result' , function ( ) { //add check boxes arrayUtils . forEach ( legendLayers1 , function ( layer ) { var layerName = layer . title ; var checkBox = new CheckBox ( { name : "checkBox" + layer . layer . id , value : layer . layer . id , checked : layer . layer . visible } ) ; checkBox . on ( "change" , function ( ) { var targetLayer = map . getLayer ( this . value ) ; targetLayer . setVisibility ( ! targetLayer . visible ) ; this . checked = targetLayer . visible ; } ) ; //add the check box and label to the toc //domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after"); domConstruct . place ( checkBox . domNode , dom . byId ( "toggle1" ) , "after" ) ; var checkLabel = domConstruct . create ( 'label' , { 'for' : checkBox . name , innerHTML : layerName } , checkBox . domNode , "after" ) ; domConstruct . place ( " " , checkLabel , "after" ) ; } ) ; arrayUtils . forEach ( legendLayers2 , function ( layer ) { var layerName = layer . title ; var checkBox = new CheckBox ( { name : "checkBox" + layer . layer . id , value : layer . layer . id , checked : layer . layer . visible } ) ; checkBox . on ( "change" , function ( ) { var targetLayer = map . getLayer ( this . value ) ; targetLayer . setVisibility ( ! targetLayer . visible ) ; this . checked = targetLayer . visible ; } ) ; //add the check box and label to the toc //domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after"); domConstruct . place ( checkBox . domNode , dom . byId ( "toggle1" ) , "after" ) ; var checkLabel = domConstruct . create ( 'label' , { 'for' : checkBox . name , innerHTML : layerName } , checkBox . domNode , "after" ) ; domConstruct . place ( " " , checkLabel , "after" ) ; } ) ; arrayUtils . forEach ( legendLayers3 , function ( layer ) { var layerName = layer . title ; var checkBox = new CheckBox ( { name : "checkBox" + layer . layer . id , value : layer . layer . id , checked : layer . layer . visible } ) ; checkBox . on ( "change" , function ( ) { var targetLayer = map . getLayer ( this . value ) ; targetLayer . setVisibility ( ! targetLayer . visible ) ; this . checked = targetLayer . visible ; } ) ; //add the check box and label to the toc //domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after"); domConstruct . place ( checkBox . domNode , dom . byId ( "toggle1" ) , "after" ) ; var checkLabel = domConstruct . create ( 'label' , { 'for' : checkBox . name , innerHTML : layerName } , checkBox . domNode , "after" ) ; domConstruct . place ( " " , checkLabel , "after" ) ; } ) ; } ) ; //ADD THE LEGEND AND XY COORDINATES map . on ( "layers-add-result" , function ( evt ) { // CYCLE through and grab all the layer names to add to the LEGEND PLUS // Remove layers not inteneted for the legend. var layerInfo = arrayUtils . map ( evt . layers , function ( layer , index ) { if ( layer . layer . id === "PastLocations" || layer . layer . id === "District" || layer . layer . id === "weatherlayer" ) { return { } ; } //Hides Layers in the Legend else { return { layer : layer . layer , title : layer . layer . name } ; } //Else return All others } ) ; // CYCLE through and grab all the layer names to add to the LEGEND if ( layerInfo . length > 0 ) { var legendDijit = new Legend ( { map : map , layerInfos : layerInfo , } , "legend" ) ; legendDijit . startup ( ) ; legendDijit . refresh ( ) ; } } ) ; map . addLayers ( [ WeatherImpactPassable , WeatherImpactOther , WeatherImpactPowerLines ] ) ;

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Collapsible Layer List

jaykapalczynski

Looking for any examples of a collapsible layer list that Auto fills with my layers.

I have seen some really basic layer list examples on the api page but nothing that allows collapsible areas and auto filling of your layers.

I am trying to create 3 different areas as seen below. Were the box next to the ------------- would collapse that section.

But I want it to auto fill the layers from my .js page.

Right now I am adding layers to the list and adding check boxes BUT THERE it is not collapsible

legendLayers<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> layer<SPAN class="punctuation token">:</SPAN> FloodZonelayer<SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'Flood Zones'</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>


 <SPAN class="comment token">// ADD CHECK BOXES FOR LAYERS</SPAN>
 map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'layers-add-result'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="comment token">//add check boxes</SPAN>
 arrayUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>legendLayers<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">var</SPAN> layerName <SPAN class="operator token">=</SPAN> layer<SPAN class="punctuation token">.</SPAN>title<SPAN class="punctuation token">;</SPAN>
 <SPAN class="keyword token">var</SPAN> checkBox <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">CheckBox</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
 name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"checkBox"</SPAN> <SPAN class="operator token">+</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">,</SPAN>
 value<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">,</SPAN>
 checked<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>visible
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 checkBox<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"change"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">var</SPAN> targetLayer <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 targetLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setVisibility</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>targetLayer<SPAN class="punctuation token">.</SPAN>visible<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>checked <SPAN class="operator token">=</SPAN> targetLayer<SPAN class="punctuation token">.</SPAN>visible<SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="comment token">//add the check box and label to the toc</SPAN>
 domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">place</SPAN><SPAN class="punctuation token">(</SPAN>checkBox<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"toggle"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"after"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="keyword token">var</SPAN> checkLabel <SPAN class="operator token">=</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">create</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'label'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="string token">'for'</SPAN><SPAN class="punctuation token">:</SPAN> checkBox<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">,</SPAN>
 innerHTML<SPAN class="punctuation token">:</SPAN> layerName
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> checkBox<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"after"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">place</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"<br />"</SPAN><SPAN class="punctuation token">,</SPAN> checkLabel<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"after"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

 <SPAN class="comment token">//ADD THE LEGEND AND XY COORDINATES</SPAN>
 map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"layers-add-result"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

 <SPAN class="comment token">// CYCLE through and grab all the layer names to add to the LEGEND PLUS</SPAN>
 <SPAN class="comment token">// Remove layers not inteneted for the legend.</SPAN>
 <SPAN class="keyword token">var</SPAN> layerInfo <SPAN class="operator token">=</SPAN> arrayUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>layers<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">,</SPAN> index<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">===</SPAN> <SPAN class="string token">"PastLocations"</SPAN> <SPAN class="operator token">||</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">===</SPAN> <SPAN class="string token">"District"</SPAN> <SPAN class="operator token">||</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">===</SPAN> <SPAN class="string token">"weatherlayer"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="comment token">//Hides Layers in the Legend</SPAN>
 <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">{</SPAN> layer<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>name <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="comment token">//Else return All others</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="comment token">// CYCLE through and grab all the layer names to add to the LEGEND</SPAN>
 <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>layerInfo<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">var</SPAN> legendDijit <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Legend</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
 map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
 layerInfos<SPAN class="punctuation token">:</SPAN> layerInfo<SPAN class="punctuation token">,</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"legend"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 legendDijit<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 legendDijit<SPAN class="punctuation token">.</SPAN><SPAN class="token function">refresh</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN>

 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Find more posts tagged with

Accepted answers

jaykapalczynski

I know this is not the way to do this although I don know of any other way to accomplish what I am looking for...

This is how I put on a large band-aid

I still have to clean up the CSS to hide the clumsiness of this approach...especially with nesting the accordion panes..
I still have to clean up my code so don't be too judgmental I repeated the code to build the legend layers in each of the accordion panes.
I can put if then statements in this section to decrease the amount of code - map.on('layers-add-result', function () {

This gives you something like this in your panel... I have a container for Weather, Incidents, Other Layers.

If I do a little CSS work I can get ride of the frames and color backgrounds and make this look a little more appealing.

The example below does not have all the layers in the image. In my below example it would simply put one feature layer in each of the 3 accordions

Follow the "legendLayers1.push" below from each FeatureLayer to the function below it.

legendLayers1.push({ layer: WeatherImpactWashout, title: 'WeatherImpact Washout' });

legendLayers2.push({ layer: WeatherImpactWashout, title: 'WeatherImpact Washout' });

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>IDAccordionPaneLayers<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit.layout.AccordionContainer<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN>black<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN>90%<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>90%<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>idLayers2<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit.layout.ContentPane<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-props</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>title:<SPAN class="punctuation token">'</SPAN>Weather<SPAN class="punctuation token">'</SPAN><SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">data-dojo-type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit/layout/ContentPane<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-props</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>title:<SPAN class="punctuation token">'</SPAN>Natural Disasters<SPAN class="punctuation token">'</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>toggle2<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 2px 2px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN>Black<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>idLayers3<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit.layout.ContentPane<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-props</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>title:<SPAN class="punctuation token">'</SPAN>Incidents & Traffic<SPAN class="punctuation token">'</SPAN><SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">data-dojo-type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit/layout/ContentPane<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-props</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>title:<SPAN class="punctuation token">'</SPAN>Natural Disasters<SPAN class="punctuation token">'</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>toggle3<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 2px 2px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN>Black<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>idLayers1<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit.layout.ContentPane<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-props</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>title:<SPAN class="punctuation token">'</SPAN>Layers1<SPAN class="punctuation token">'</SPAN><SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">data-dojo-type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit/layout/ContentPane<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-props</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>title:<SPAN class="punctuation token">'</SPAN>Natural Disasters<SPAN class="punctuation token">'</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>toggle1<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 2px 2px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN>Black<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

<SPAN class="keyword token">var</SPAN> WeatherImpactPowerLines <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Farcgis.vdem.virginia.gov%2FArcGIS%2Frest%2Fservices%2FTraffic%2FVATraffic_WeatherImpactPoints%2FMapServer%2F4" target="_blank">https://arcgis.vdem.virginia.gov/ArcGIS/rest/services/Traffic/VATraffic_WeatherImpactPoints/MapServer/4</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; mode<SPAN class="punctuation token">:</SPAN> FeatureLayer<SPAN class="punctuation token">.</SPAN>MODE_ONDEMAND<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; outFields<SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; infoTemplate<SPAN class="punctuation token">:</SPAN> infoWeatherImpact
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
legendLayers1<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> layer<SPAN class="punctuation token">:</SPAN> WeatherImpactPowerLines<SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'WeatherImpact Power Lines'</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="keyword token">var</SPAN> WeatherImpactOther <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Farcgis.vdem.virginia.gov%2FArcGIS%2Frest%2Fservices%2FTraffic%2FVATraffic_WeatherImpactPoints%2FMapServer%2F5" target="_blank">https://arcgis.vdem.virginia.gov/ArcGIS/rest/services/Traffic/VATraffic_WeatherImpactPoints/MapServer/5</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; mode<SPAN class="punctuation token">:</SPAN> FeatureLayer<SPAN class="punctuation token">.</SPAN>MODE_ONDEMAND<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; outFields<SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; infoTemplate<SPAN class="punctuation token">:</SPAN> infoWeatherImpact
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
legendLayers2<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> layer<SPAN class="punctuation token">:</SPAN> WeatherImpactOther<SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'WeatherImpact Other'</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<SPAN class="keyword token">var</SPAN> WeatherImpactPassable <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Farcgis.vdem.virginia.gov%2FArcGIS%2Frest%2Fservices%2FTraffic%2FVATraffic_WeatherImpactPoints%2FMapServer%2F6" target="_blank">https://arcgis.vdem.virginia.gov/ArcGIS/rest/services/Traffic/VATraffic_WeatherImpactPoints/MapServer/6</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; mode<SPAN class="punctuation token">:</SPAN> FeatureLayer<SPAN class="punctuation token">.</SPAN>MODE_ONDEMAND<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; outFields<SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; infoTemplate<SPAN class="punctuation token">:</SPAN> infoWeatherImpact
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
legendLayers3<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> layer<SPAN class="punctuation token">:</SPAN> WeatherImpactPassable<SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'WeatherImpact Passable'</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>




<SPAN class="comment token">// ADD CHECK BOXES FOR LAYERS</SPAN>
map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'layers-add-result'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//add check boxes</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; arrayUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>legendLayers1<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> layerName <SPAN class="operator token">=</SPAN> layer<SPAN class="punctuation token">.</SPAN>title<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> checkBox <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">CheckBox</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"checkBox"</SPAN> <SPAN class="operator token">+</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; value<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; checked<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>visible
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; checkBox<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"change"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> targetLayer <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; targetLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setVisibility</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>targetLayer<SPAN class="punctuation token">.</SPAN>visible<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>checked <SPAN class="operator token">=</SPAN> targetLayer<SPAN class="punctuation token">.</SPAN>visible<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//add the check box and label to the toc</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after");</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">place</SPAN><SPAN class="punctuation token">(</SPAN>checkBox<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"toggle1"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"after"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> checkLabel <SPAN class="operator token">=</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">create</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'label'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">'for'</SPAN><SPAN class="punctuation token">:</SPAN> checkBox<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; innerHTML<SPAN class="punctuation token">:</SPAN> layerName
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> checkBox<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"after"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">place</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"<br />"</SPAN><SPAN class="punctuation token">,</SPAN> checkLabel<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"after"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; arrayUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>legendLayers2<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> layerName <SPAN class="operator token">=</SPAN> layer<SPAN class="punctuation token">.</SPAN>title<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> checkBox <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">CheckBox</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"checkBox"</SPAN> <SPAN class="operator token">+</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; value<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; checked<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>visible
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; checkBox<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"change"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> targetLayer <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; targetLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setVisibility</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>targetLayer<SPAN class="punctuation token">.</SPAN>visible<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>checked <SPAN class="operator token">=</SPAN> targetLayer<SPAN class="punctuation token">.</SPAN>visible<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//add the check box and label to the toc</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after");</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">place</SPAN><SPAN class="punctuation token">(</SPAN>checkBox<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"toggle1"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"after"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> checkLabel <SPAN class="operator token">=</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">create</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'label'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">'for'</SPAN><SPAN class="punctuation token">:</SPAN> checkBox<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; innerHTML<SPAN class="punctuation token">:</SPAN> layerName
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> checkBox<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"after"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">place</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"<br />"</SPAN><SPAN class="punctuation token">,</SPAN> checkLabel<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"after"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp; arrayUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>legendLayers3<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> layerName <SPAN class="operator token">=</SPAN> layer<SPAN class="punctuation token">.</SPAN>title<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> checkBox <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">CheckBox</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"checkBox"</SPAN> <SPAN class="operator token">+</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; value<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; checked<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>visible
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; checkBox<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"change"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> targetLayer <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; targetLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setVisibility</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>targetLayer<SPAN class="punctuation token">.</SPAN>visible<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>checked <SPAN class="operator token">=</SPAN> targetLayer<SPAN class="punctuation token">.</SPAN>visible<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//add the check box and label to the toc</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after");</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">place</SPAN><SPAN class="punctuation token">(</SPAN>checkBox<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"toggle1"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"after"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> checkLabel <SPAN class="operator token">=</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">create</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'label'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">'for'</SPAN><SPAN class="punctuation token">:</SPAN> checkBox<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; innerHTML<SPAN class="punctuation token">:</SPAN> layerName
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> checkBox<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"after"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">place</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"<br />"</SPAN><SPAN class="punctuation token">,</SPAN> checkLabel<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"after"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>&nbsp;&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<SPAN class="comment token">//ADD THE LEGEND AND XY COORDINATES </SPAN>
map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"layers-add-result"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

<SPAN class="comment token">// CYCLE through and grab all the layer names to add to the LEGEND PLUS </SPAN>
<SPAN class="comment token">// Remove layers not inteneted for the legend.</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> layerInfo <SPAN class="operator token">=</SPAN> arrayUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>layers<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">,</SPAN> index<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">===</SPAN> <SPAN class="string token">"PastLocations"</SPAN> <SPAN class="operator token">||</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">===</SPAN> <SPAN class="string token">"District"</SPAN> <SPAN class="operator token">||</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">===</SPAN> <SPAN class="string token">"weatherlayer"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="comment token">//Hides Layers in the Legend </SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">{</SPAN> layer<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>name <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="comment token">//Else return All others</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> 
<SPAN class="comment token">// CYCLE through and grab all the layer names to add to the LEGEND</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>layerInfo<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> legendDijit <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Legend</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layerInfos<SPAN class="punctuation token">:</SPAN> layerInfo<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"legend"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; legendDijit<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; legendDijit<SPAN class="punctuation token">.</SPAN><SPAN class="token function">refresh</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>


map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayers</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
WeatherImpactPassable<SPAN class="punctuation token">,</SPAN>WeatherImpactOther<SPAN class="punctuation token">,</SPAN>WeatherImpactPowerLines
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

rscheitlin

Jay,

Sure what I provided was just an example. All you really need of the code I provided is this portion:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> llWidget <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">LayerList</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layer<SPAN class="punctuation token">:</SPAN> atlasLayer<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Atlas layers"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; subLayers<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layer<SPAN class="punctuation token">:</SPAN> recreationLayer<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Recreation Layer"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; subLayers<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layer<SPAN class="punctuation token">:</SPAN> waterNetLayer<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Water Network Layer"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; subLayers<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; showLegend<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; showOpacitySlider<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"layerList"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; llWidget<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

You just change the layer property for your actual layer vars.

jaykapalczynski

Thinking.....I have infotemplates as well to control what I see. On a few of them I am doing more than simply reading from the Service for symbology etc.

Can I handle this with this code example?

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// ADDRESS POINTS
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var simpleJson = {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"type": "simple",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"label": "",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"description": "",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"symbol": {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "color": [255,255,51],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "size": 6,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "angle": 0,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "xoffset": 0,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "yoffset": 0,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "type": "esriSMS",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "style": "esriSMSCircle",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "outline": {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"color": [255,0,0],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"width": 1,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"type": "esriSLS",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"style": "esriSLSSolid"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var infoTemplateAddressPoints = new InfoTemplate();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;infoTemplateAddressPoints.setTitle("Address Point Information");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;infoTemplateAddressPoints.setContent("<table>" +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"<tr><td id='tblTitle'>Address Pts</td><td id='tblTitle2'></td></tr>" +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"<tr><td id='tblTitleLine'></td><td id='tblTitleLine2'></td></tr>" +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"<tr><td></td><td></td></tr>" +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"<tr><td id='tblMainline1'>Address</td><td id='tblSubline2'>${FULLADDR}</td></tr>" +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"<tr><td id='tblMainline1'>Municipality</td><td id='tblSubline2'>${MUNICIPALITY}</td></tr>" +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"<tr><td id='tblMainline1'>PO Name</td><td id='tblSubline2'>${PO_NAME}</td></tr>" +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"<tr><td id='tblMainline1'>Zip Code</td><td id='tblSubline2'>${ZIP_5}</td></tr>" +&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"</table><hr>");&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var AddressPointEndPoint = "https://xyz/arcgis/rest/services/VA_Base_layers/VA_Address_Points/MapServer/0";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var AddressPoints = new FeatureLayer(AddressPointEndPoint, {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id: "AddressPoint",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; minScale: 50000,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; visible: true,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; opacity: .7,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; outFields: ["*"],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; infoTemplate: infoTemplateAddressPoints
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Push layer to the legend
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;legendLayers.push({ layer: AddressPoints, title: 'Address Points' });
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var rend = new SimpleRenderer(simpleJson);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;AddressPoints.setRenderer(rend)<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

rscheitlin

Correct

jaykapalczynski

So from what I am seeing there are 3 map services each with an array of layers in them.

This reads through each service and creates the list allowing them to collapse?

rscheitlin

Here is that sample using coded layers like you are wanting:

<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>meta http<SPAN class="operator token">-</SPAN>equiv<SPAN class="operator token">=</SPAN><SPAN class="string token">"Content-Type"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"text/html; charset=utf-8"</SPAN><SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1, maximum-scale=1,user-scalable=no"</SPAN><SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Layer List Dijit<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fjs.arcgis.com%2F3.25%2Fdijit%2Fthemes%2Fclaro%2Fclaro.css" target="_blank">http://js.arcgis.com/3.25/dijit/themes/claro/claro.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fjs.arcgis.com%2F3.25%2Fesri%2Fcss%2Fesri.css" target="_blank">http://js.arcgis.com/3.25/esri/css/esri.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN>

&nbsp; <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; html<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; body<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">.</SPAN>container<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; #map <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font<SPAN class="operator token">-</SPAN>family<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Open Sans"</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp; #map <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp; #layerListPane <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">25</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">.</SPAN>esriLayer <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> #fff<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">.</SPAN>esriLayerList <SPAN class="punctuation token">.</SPAN>esriList <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border<SPAN class="operator token">-</SPAN>top<SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">.</SPAN>esriLayerList <SPAN class="punctuation token">.</SPAN>esriTitle <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> #fff<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border<SPAN class="operator token">-</SPAN>bottom<SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">.</SPAN>esriLayerList <SPAN class="punctuation token">.</SPAN>esriList ul <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> #fff<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> dojoConfig <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; parseOnLoad<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fjs.arcgis.com%2F3.25%2F" target="_blank">http://js.arcgis.com/3.25/</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/map"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/layers/ArcGISDynamicMapServiceLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/dijit/LayerList"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojo/query"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojo/dom-construct"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojo/dom-class"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojo/dom-style"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojo/on"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojo/_base/array"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dijit/layout/BorderContainer"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dijit/layout/ContentPane"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojo/domReady!"</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Map<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ArcGISDynamicMapServiceLayer<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; LayerList<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; query<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; domConstruct<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; domClass<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; domStyle<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; on<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; array
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"topo"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">123</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">47</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">8</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sliderStyle<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"small"</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> atlasLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ArcGISDynamicMapServiceLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fsampleserver6.arcgisonline.com%2Farcgis%2Frest%2Fservices%2FCensus%2FMapServer" target="_blank">http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"atlasLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"showAttribution"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> recreationLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ArcGISDynamicMapServiceLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fsampleserver6.arcgisonline.com%2Farcgis%2Frest%2Fservices%2FRecreation%2FMapServer" target="_blank">http://sampleserver6.arcgisonline.com/arcgis/rest/services/Recreation/MapServer</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"recreationLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"showAttribution"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> waterNetLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ArcGISDynamicMapServiceLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fsampleserver6.arcgisonline.com%2Farcgis%2Frest%2Fservices%2FWater_Network%2FMapServer" target="_blank">http://sampleserver6.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"waterNetworkLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"showAttribution"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayers</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>atlasLayer<SPAN class="punctuation token">,</SPAN> recreationLayer<SPAN class="punctuation token">,</SPAN> waterNetLayer<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> llWidget <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">LayerList</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layer<SPAN class="punctuation token">:</SPAN> atlasLayer<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Atlas layers"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; subLayers<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layer<SPAN class="punctuation token">:</SPAN> recreationLayer<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Recreation Layer"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; subLayers<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layer<SPAN class="punctuation token">:</SPAN> waterNetLayer<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Water Network Layer"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; subLayers<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; showLegend<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; showOpacitySlider<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"layerList"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; llWidget<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>body <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"claro"</SPAN><SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"container"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/BorderContainer"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"design:'headline',gutters:false"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"layerListPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/ContentPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"region:'right'"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"layerList"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"map"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/ContentPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"region:'center'"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

jaykapalczynski

I saw this example but its using a web map I have my layers all defined individually in my js page

But this is the functionality I am after....but I am not using a web map

ArcGIS API for JavaScript Sandbox

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.