Overlay selector is counter-intuitive

[Phyks]

Hi,

It seems the overlay selector is broken. Indeed, when going to the layers panel, expanding the list and clicking "Mapillary coverage", the line gets selected but the checkbox is never ticked. The overlay is actually rendered without overlaying apparently.

When clicking the checkbox, nothing happens.

[nrenner]

This is how it's supposed to work:

• click on the name shows a preview of that layer without any other layers (active layers turned off)
• the checkbox adds (or removes) the layer to the layer switcher

So despite looking similar with the checkbox, it's not an extended layer switcher - it configures the layer switcher. I guess this somehow needs to be made more clear.

[Phyks]

click on the name shows a preview of that layer without any other layers (active layers turned off)

Ok! This works fine for me (although this is not very intuitive). I'd tend to prefer not changing the usual behavior of clicking a label to tick the checkbox (especially on touch screens). Another option (maybe clearer from UX point of view) would be to have a magnifying glass icon next to the item to toggle the preview mode?

the checkbox adds (or removes) the layer to the layer switcher

When ticking the checkbox, the overlay layer is not shown on the map for me (checked with different overlays, this is not a mapillary coverage bug). I can reproduce on http://brouter.de/brouter-web/.

No error in the console, no network calls made (so the layer is somehow not fetched) :/

This is only the case for the "More" overlays, such as Mapillary coverage or Waymarked Trails MTB. The default overlays (Waymarked Trails Hiking/Cycling etc) do work fine.

[nrenner]

Ticking the checkbox does not show the layer, it only adds it to the layer switcher list. To activate you need to tick it in the layer switcher (tha part above the buttons).

[Phyks]

Ticking the checkbox does not show the layer, it only adds it to the layer switcher list. To activate you need to tick it in the layer switcher (tha part above the buttons).

Got it! Sorry about this, I definitely missed the way it should be working…

In my opinion, the "Personal layers" button works very well because, first the labelling hints that it will only add it to the list and then the selector is in a modal and user can see the effect on the layer list through transparency. Ideas to improve the UX here could be:

• Rename the "Plus" button to something emphasizing that the layers will be added in the list. Something like "Settings" or "Favorite layers" or something like this?
• Maybe use a modal for this "Plus" submenu?

[Phyks]

There is another bug that clicking a category will not check/uncheck all the items within it.

I tried to work a bit on this but jsTree is quite a nightmare and very rigid, I did not manage to do much… current attempt is at https://github.com/nrenner/brouter-web/compare/master...Phyks:overlay_selector?expand=1.

[nrenner]

I disabled root nodes on purpose.

Because I thought it would make the handling easier (multiple selection is also disabled), not be a common use case and also thought the disabled style looks nice because it better distinguishes the root nodes and emphasises the leaf nodes.

[nrenner]

As for the magnifying glass icon you suggested, one approach might be to use CSS ::after with content on the selection class of jsTree.

[Phyks]

I disabled root nodes on purpose.

This is fine for me, but root nodes should probably not have a checkbox icon then :)

As for the magnifying glass icon you suggested, one approach might be to use CSS ::after with content on the selection class of jsTree.

Actually, I though about it. Adding a magnifying glass icon is not a big deal. Handling properly the hover effect and the click action, overloading the jsTree default behavior is quite a nightmare or would require a lot of JS. :/

[nrenner]

but root nodes should probably not have a checkbox icon then :)

It still serves as indicator whether child nodes are selected or not. Disabled checkboxes seem to be styled with opacity=0.8 (maybe not obvious enough).

I misinterpreted your magnifying glass suggestion as a pure tooltip. Because my idea for a first improvement would have been to keep the behaviour, but to provide better feedback/hints, ideas:

• tooltip on hover over name (not checkbox) indicating preview (like the magnifying glass), with an active state when selected
• and/or "Preview" message box in a corner of the map
• "add" indicator for the checkbox, e.g. plus sign inside the checkbox?
• hint that layer was added when checkbox clicked, e.g. message box or animation moving the checked tree entry to the insert position in the switcher list

I chose the option to separate selection from checkbox click on purpose, as this is how I imagined it when thinking about this feature. The idea was that with a couple of lesser known and regional layers, where you would need to check coverage of your area, clicking or keying through the previews of multiple layers should be easy and more prominent than finally adding a chosen layer.

[Phyks]

Disabled checkboxes seem to be styled with opacity=0.8 (maybe not obvious enough).

Indeed, I did not spot it before you told me :) Maybe not having a hand cursor on these would help as well?

I misinterpreted your magnifying glass suggestion as a pure tooltip. Because my idea for a first improvement would have been to keep the behaviour, but to provide better feedback/hints, ideas:

This looks like a nice workflow to me to help users understand the behavior of the list!

[nrenner]

Maybe not having a hand cursor on these would help as well?

The pointer cursor is indeed a bit misleading, but e.g. a not-allowed cursor would need to be applied to the checkbox only, as there is still the double-click on the text to collapse/expand (default cursor?).