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; } } }

LayerList widget with check boxes

CynthiaKozma

I am using Javascript 4.8 and creating a Webmap. The new LayerList widget shows the eyeball for turning layers off and on. The older esri/dijits/LayerList used checkboxes. The checkboxes seemed more intuitive for the general public to use. Is there anyway to change those eyeballs to checkboxes in a web map?

Find more posts tagged with

Accepted answers

CynthiaKozma

I figured this out. By adding this to my CSS file, I was able to get checkboxes.

<SPAN class="selector token">.esri-icon-non-visible::before</SPAN> <SPAN class="punctuation token">{</SPAN>
   <SPAN class="property token">content</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"\e610"</SPAN><SPAN class="punctuation token">;</SPAN>
   <SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">.esri-icon-visible::before</SPAN> <SPAN class="punctuation token">{</SPAN>
   <SPAN class="property token">content</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"\e611"</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>

All comments

NilsBabel1

So this doesn't work for me. I've added the override with the !important tag to my scss file. It has no effect. I'm guessing it is an order issue with how the css files are being imported. However, I don't have control over that. Is there another way to override this or some css trick that I'm missing?

Noah Sager

Thank you for the feedback Kevin MacLeod‌. I will share this with the team.

Anonymous User

In the mean time for users looking to fix the layer list and restore check boxes, the solution from another thread worked but I had to add !important to the CSS above, for it to work. https://codepen.io/kevinsagis/full/GRozoKr

<SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">.esri-icon-non-visible::before</SPAN> <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">{</SPAN>
&nbsp;&nbsp; <SPAN class="" style="color: #990000; border: 0px; font-weight: inherit;">content</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> <SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.5); border: 0px; font-weight: inherit;">"\e610"!important;</SPAN>
&nbsp;&nbsp; <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">}</SPAN>
<SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">.esri-icon-visible::before</SPAN> <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">{</SPAN>
&nbsp;&nbsp; <SPAN class="" style="color: #990000; border: 0px; font-weight: inherit;">content</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> <SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.5); border: 0px; font-weight: inherit;">"\e611"!important;</SPAN>
&nbsp;&nbsp; <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">}</SPAN>

Anonymous User

Noah Sager‌ this TOC works perfectly. https://demo.cmv.io/ It has partial checkbox and auto-turns on sublayers. It's perfect. I anticipate if you poll users a majority would want this interface:

Anonymous User

I would love to see this in the API https://community.esri.com/ideas/18341-4x-design-make-ui-discoverable#comment-87452 On/Off, with animation, really discoverable. Or perhaps the option to still use check boxes (perhaps "checkbox style: classic" property?) as they are a universal convention; and with a tri-state checkbox (dot in checkbox to communicate some but not all sublayers in a group are on). I have experienced that users were confused by checkboxes, mostly because sublayers would not auto turn on by default if parent Groups weren't on (a default I recommend for the API) but they find the eyeball less discoverable still. I think since it lacks color and texture, like web 2.0 icons is not widely understood and can be difficult to rapidly discern meaning from or tell each icon apart; with small, monotone line art. Also the eye does not shade when hovered, unlike most control elements, that would probably help a bit. I propose adding color and texture to the eye and increasing icon size or adding checkboxes or On/Off as options.

Noah Sager

Feel free to mark this question as answered, even if the answer is your own

CynthiaKozma

I figured this out. By adding this to my CSS file, I was able to get checkboxes.

<SPAN class="selector token">.esri-icon-non-visible::before</SPAN> <SPAN class="punctuation token">{</SPAN>
   <SPAN class="property token">content</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"\e610"</SPAN><SPAN class="punctuation token">;</SPAN>
   <SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">.esri-icon-visible::before</SPAN> <SPAN class="punctuation token">{</SPAN>
   <SPAN class="property token">content</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"\e611"</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>

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.