What Problem Does This Solve?
Users need to show or hide map content
When to Use This Pattern
The best use of the Layer List is to empower users to “opt-in” showing additional information like traffic data, parcel boundaries, or elevation models and tweak the map display until the desired amount and level of content is being displayed.
What’s the Solution?
Display a list of operational layers combined with a means to toggle on/off their visibility. This toggle may be a checkbox or the icon of an eye that is either solid or crossed out. Use of meaningful layer names helps to identify the purpose of the layer, providing symbology next to the label reinforces its meaning and doubles down as a Legend.
Additional functionality can include zooming to the extent of a layers’ features which is especially useful for local datasets that may not be visible at smaller scales. To avoid hidden content allow users to change a layer’s transparency or moving it up and down, either through drag and drop interactions or explicit actions to ensure that layers end up in the desired order.
Grouping layers into meaningful sections like Transportation, Education, Zones, etc. is a good way to add meaning to the list. It gives users an easy way to toggle all the layers of that section or theme on/off. Consider three selection states: all layers are on (checkbox checked), all layers are off (checkbox unchecked), and some layers are on (checkbox indeterminate). Avoid extending this hierarchy to more than 2 levels and changing layer order should only work within a group. Consider the possibility to move a complete group of layers up and down.
The Layer List is a good place to allow users to add a layer to the map that isn’t already part of it. This function can be an action button at the top or bottom of the layers.
Why Use This Pattern?
Interactive maps are structured such that different geographic datasets are added to the map displayed on top of each other. This stacking works well if line and point layers are on top of polygon layers and polygon layers don’t overlap.
Simplify the Layer List as much as possible by reducing the number of layers offered. Only offer functionality that is applicable (e.g. the last layer in the list cannot be moved down) and viable, i.e. changing the style of a layer’s symbology should be limited to an expert audience.
Most applications have layers that serve functional purposes like drawing, filtering, or visualizations. Consider omitting those layers from the Layer List altogether or making them fixed at a specific order in the layer stack so that users cannot accidently hide or even remove them.