When I grab the element and change it to display = 'none' it changes that css for all the layerlist items. Not just the one grouplayer. Whats the best way to single out the groupLayer css only?
Jay,
Do you want to prevent users from being able to toggle the visibility of the group layers by clicking the title area/eyeball icon? Or do you just want to hide the eyeball? If so you can do it with this css. Note: I haven't tested this css with many layers so there could be some cases where it doesn't hide the eyeball.
<SPAN class="selector token">.esri-layer-list__child-toggle + .esri-layer-list__item-label > .esri-layer-list__item-toggle</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN>none<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Great Thanks for helping explain that. Both posts!
Here's a bit of doc on the css adjacent selector - not much detail but I think the simple example in the doc compare with Robert's detailed answer explains how it works.
Adjacent sibling combinator | MDN
It is a little hard to explain and wrap your head around but here is my attempt.
<SPAN class="selector token">.esri-layer-list__child-toggle + .esri-layer-list__item-label > .esri-layer-list__item-toggle</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN>none<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;"></SPAN>Selects all
<SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;"></SPAN>
<SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">.esri-layer-list__item-label</SPAN>
elements that are placed immediately after
<SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">.esri-layer-list__child-toggle</SPAN>
elements = x
Selects all
<SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">.esri-layer-list__item-toggle</SPAN>
elements where the parent is a x above.
Here is a sample that hides the eye when it is not a parent element with a radio button:
<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> <SPAN class="operator token"><</SPAN>meta charset<SPAN class="operator token">=</SPAN><SPAN class="string token">"utf-8"</SPAN><SPAN class="operator token">></SPAN> <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> <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>LayerList widget <SPAN class="keyword token">with</SPAN> actions <SPAN class="operator token">-</SPAN> <SPAN class="number token">4.10</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN> html<SPAN class="punctuation token">,</SPAN> body<SPAN class="punctuation token">,</SPAN> #viewDiv <SPAN class="punctuation token">{</SPAN> padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> overflow<SPAN class="punctuation token">:</SPAN> hidden<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>esri<SPAN class="operator token">-</SPAN>layer<SPAN class="operator token">-</SPAN>list__child<SPAN class="operator token">-</SPAN>toggle <SPAN class="operator token">+</SPAN> <SPAN class="punctuation token">.</SPAN>esri<SPAN class="operator token">-</SPAN>layer<SPAN class="operator token">-</SPAN>list__item<SPAN class="operator token">-</SPAN>label<SPAN class="punctuation token">:</SPAN><SPAN class="token function">not</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>role<SPAN class="operator token">=</SPAN><SPAN class="string token">"radio"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">></SPAN> <SPAN class="punctuation token">.</SPAN>esri<SPAN class="operator token">-</SPAN>layer<SPAN class="operator token">-</SPAN>list__item<SPAN class="operator token">-</SPAN>toggle <SPAN class="punctuation token">{</SPAN> display<SPAN class="punctuation token">:</SPAN>none<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN> <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=https%3A%2F%2Fjs.arcgis.com%2F4.10%2Fesri%2Fcss%2Fmain.css" target="_blank">https://js.arcgis.com/4.10/esri/css/main.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN> <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=https%3A%2F%2Fjs.arcgis.com%2F4.10%2F" target="_blank">https://js.arcgis.com/4.10/</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> <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN> <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/layers/GroupLayer"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/layers/MapImageLayer"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/LayerList"</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN> Map<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">,</SPAN> GroupLayer<SPAN class="punctuation token">,</SPAN> MapImageLayer<SPAN class="punctuation token">,</SPAN> LayerList <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// Create layer showing sample data of the United States.</SPAN> <SPAN class="keyword token">var</SPAN> USALayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapImageLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> url<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%2FUSA%2FMapServer" target="_blank">http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"US Sample Data"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Create layer showing sample census data of the United States.</SPAN> <SPAN class="comment token">// Set visibility to false so it's not visible on startup.</SPAN> <SPAN class="keyword token">var</SPAN> censusLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapImageLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> url<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> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"US Sample Census"</SPAN><SPAN class="punctuation token">,</SPAN> visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Create GroupLayer with the two MapImageLayers created above</SPAN> <SPAN class="comment token">// as children layers.</SPAN> <SPAN class="keyword token">var</SPAN> demographicGroupLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GroupLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"US Demographics"</SPAN><SPAN class="punctuation token">,</SPAN> visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> visibilityMode<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"exclusive"</SPAN><SPAN class="punctuation token">,</SPAN> layers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>USALayer<SPAN class="punctuation token">,</SPAN> censusLayer<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> opacity<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.75</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Create a map and add the group layer to it</SPAN> <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="punctuation token">{</SPAN> basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"dark-gray"</SPAN><SPAN class="punctuation token">,</SPAN> layers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>demographicGroupLayer<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 map to a MapView</SPAN> <SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">98.5795</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">39.8282</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">5</SPAN><SPAN class="punctuation token">,</SPAN> container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN> map<SPAN class="punctuation token">:</SPAN> map <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Creates actions in the LayerList.</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">defineActions</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// The event object contains an item property.</SPAN> <SPAN class="comment token">// is is a ListItem referencing the associated layer</SPAN> <SPAN class="comment token">// and other properties. You can control the visibility of the</SPAN> <SPAN class="comment token">// item, its title, and actions using this object.</SPAN> <SPAN class="keyword token">var</SPAN> item <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>item<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>item<SPAN class="punctuation token">.</SPAN>title <SPAN class="operator token">===</SPAN> <SPAN class="string token">"US Demographics"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// An array of objects defining actions to place in the LayerList.</SPAN> <SPAN class="comment token">// By making this array two-dimensional, you can separate similar</SPAN> <SPAN class="comment token">// actions into separate groups with a breaking line.</SPAN> item<SPAN class="punctuation token">.</SPAN>actionsSections <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Go to full extent"</SPAN><SPAN class="punctuation token">,</SPAN> className<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"esri-icon-zoom-out-fixed"</SPAN><SPAN class="punctuation token">,</SPAN> id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"full-extent"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Layer information"</SPAN><SPAN class="punctuation token">,</SPAN> className<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"esri-icon-description"</SPAN><SPAN class="punctuation token">,</SPAN> id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"information"</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> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Increase opacity"</SPAN><SPAN class="punctuation token">,</SPAN> className<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"esri-icon-up"</SPAN><SPAN class="punctuation token">,</SPAN> id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"increase-opacity"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Decrease opacity"</SPAN><SPAN class="punctuation token">,</SPAN> className<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"esri-icon-down"</SPAN><SPAN class="punctuation token">,</SPAN> id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"decrease-opacity"</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> view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</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">// Create the LayerList widget with the associated actions</SPAN> <SPAN class="comment token">// and add it to the top-right corner of the view.</SPAN> <SPAN class="keyword token">var</SPAN> layerList <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> view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// executes for each ListItem in the LayerList</SPAN> listItemCreatedFunction<SPAN class="punctuation token">:</SPAN> defineActions <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Event listener that fires each time an action is triggered</SPAN> layerList<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"trigger-action"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// The layer visible in the view at the time of the trigger.</SPAN> <SPAN class="keyword token">var</SPAN> visibleLayer <SPAN class="operator token">=</SPAN> USALayer<SPAN class="punctuation token">.</SPAN>visible <SPAN class="operator token">?</SPAN> USALayer <SPAN class="punctuation token">:</SPAN> censusLayer<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Capture the action id.</SPAN> <SPAN class="keyword token">var</SPAN> id <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>action<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>id <SPAN class="operator token">===</SPAN> <SPAN class="string token">"full-extent"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// if the full-extent action is triggered then navigate</SPAN> <SPAN class="comment token">// to the full extent of the visible layer</SPAN> view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">goTo</SPAN><SPAN class="punctuation token">(</SPAN>visibleLayer<SPAN class="punctuation token">.</SPAN>fullExtent<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>id <SPAN class="operator token">===</SPAN> <SPAN class="string token">"information"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// if the information action is triggered, then</SPAN> <SPAN class="comment token">// open the item details page of the service layer</SPAN> window<SPAN class="punctuation token">.</SPAN><SPAN class="token function">open</SPAN><SPAN class="punctuation token">(</SPAN>visibleLayer<SPAN class="punctuation token">.</SPAN>url<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>id <SPAN class="operator token">===</SPAN> <SPAN class="string token">"increase-opacity"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// if the increase-opacity action is triggered, then</SPAN> <SPAN class="comment token">// increase the opacity of the GroupLayer by 0.25</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>demographicGroupLayer<SPAN class="punctuation token">.</SPAN>opacity <SPAN class="operator token"><</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> demographicGroupLayer<SPAN class="punctuation token">.</SPAN>opacity <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="number token">0.25</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>id <SPAN class="operator token">===</SPAN> <SPAN class="string token">"decrease-opacity"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// if the decrease-opacity action is triggered, then</SPAN> <SPAN class="comment token">// decrease the opacity of the GroupLayer by 0.25</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>demographicGroupLayer<SPAN class="punctuation token">.</SPAN>opacity <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> demographicGroupLayer<SPAN class="punctuation token">.</SPAN>opacity <SPAN class="operator token">-</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="number token">0.25</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 widget to the top right corner of the view</SPAN> view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>layerList<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</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="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="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="operator token">></SPAN><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></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Yes Kelly! That was it! Thanks
Can you explain the adjacent selection though?
all group layers
So you are trying to hide the eye icon for one specific group layer or all group layers?
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
