LayerList widget with check boxes

1398
7
Jump to solution
01-07-2020 10:28 AM
CynthiaKozma
Occasional Contributor

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? 

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
CynthiaKozma
Occasional Contributor

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

.esri-icon-non-visible::before {
   content: "\e610";
   }
.esri-icon-visible::before {
   content: "\e611";
   }

View solution in original post

7 Replies
CynthiaKozma
Occasional Contributor

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

.esri-icon-non-visible::before {
   content: "\e610";
   }
.esri-icon-visible::before {
   content: "\e611";
   }
Noah-Sager
Esri Regular Contributor

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

0 Kudos
KevinMacLeod4
Frequent Contributor

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.  

KevinMacLeod4
Frequent Contributor

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:

KevinMacLeod4
Frequent Contributor

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 

.esri-icon-non-visible::before {
   content: "\e610"!important;
   }
.esri-icon-visible::before {
   content: "\e611"!important;
   }
0 Kudos
Noah-Sager
Esri Regular Contributor

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

NilsBabel1
Occasional Contributor

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?

0 Kudos