topic Re: LayerList widget with check boxes in ArcGIS JavaScript Maps SDK Questions

LayerList widget with check boxes

CynthiaKozma — Tue, 07 Jan 2020 18:28:15 GMT

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?

Re: LayerList widget with check boxes

CynthiaKozma — Fri, 10 Dec 2021 23:16:36 GMT

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

Re: LayerList widget with check boxes

Noah-Sager — Wed, 08 Jan 2020 20:05:19 GMT

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

Re: LayerList widget with check boxes

Anonymous User — Tue, 21 Jul 2020 20:49:24 GMT

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.

Re: LayerList widget with check boxes

Anonymous User — Wed, 22 Jul 2020 14:07:08 GMT

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:

Re: LayerList widget with check boxes

Anonymous User — Fri, 10 Dec 2021 23:16:38 GMT

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

Re: LayerList widget with check boxes

Noah-Sager — Thu, 23 Jul 2020 16:33:57 GMT

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

Re: LayerList widget with check boxes

NilsBabel1 — Wed, 23 Sep 2020 17:36:39 GMT

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?