I'm designing a three level map layer component and I found is a good idea to have an automated smart group that contains all the opened layers.

This smart group allows to (see and) quickly close any opened layer instead of remember the source group of each one.

Here you can see the opened layers on the "Transit" group as well as on the smart "Active Layers" group

Normal layers always "live" inside their groups but smart added layers are only alive while they are activated.

The thing is, when users hides (clicking the eye icon) any layer directly from the smart "Active layers" group the complete item dissapers giving a weird jump effect.

How can avoid this behaviour?

1 Answer 1


Coincidentally, I'm facing the same design challenge. In addition to the jump occurring when the user removes an item, there is also a bump when a user adds an item. This not only appears unsettling, it directly impacts on speed of selecting multiple layers because the available layers are now a moving target. The user would click on "Bus" and then move the mouse downwards by one and click again, wanting "Subway", only since "Bus" was inserted above all the options have bumped down one, and "Bus" is now located under the mouse.

We solved this by putting the active layers section at the bottom of the panel - they pile up there without impacting on the selection panel at all.

In our design we also treated the "Active Layers" section differently. Like you we wanted to provide quick access to their selection, but we also want it to be easy for them to toggle them off and then back on again (without forcing them to go hunting again).

enter image description here

  • I'll put the "active layers" group at the bottom as you do, thanks for your approach.
    – Kilian
    Commented Jan 29, 2014 at 10:14
  • I can't use the toogle behaviour because our app is always running and never stops (24/7) so the smart list will grow infinitely as the users use the layers.
    – Kilian
    Commented Jan 29, 2014 at 10:21
  • @Kilian ah, that's why I've also put a delete icon against selected overlay.
    – Erics
    Commented Jan 29, 2014 at 15:27
  • I saw them but as layer groups are selectable I'm afraid they are gonna fill the "selected" space in 5 minutes and then spend a lot of time erasing the layers by hand. Thanks anyway ;)
    – Kilian
    Commented Jan 29, 2014 at 15:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.