Swipe

WHAT

Interactively reveal content by peeling back a layer to see the content underneath it. This method provides a temporary view of the data without the specified layer.

WHY

It is often useful to see how certain layers overlay other layers for the purpose of comparison. This comparison is important to make decisions based on visual cues. Content-rich data like satellite imagery cannot be made transparent in a meaningful way and therefore can only be used as the base of any layer stack.

WHEN

You want to compare the content of two layers. Instead of making the top layer transparent – which distorts colors – or the need to turn layers on/off, you can redraw the area minus the area on top of it and move back and forth to see differences.

HOW

When turned on, let the user select the layer to be displayed on top of the current map. Alternatively users could have the option to choose a second layer to compare the top layer against, maybe through options in a second dropdown list.

The two layers must be clearly separated by a user interface element like a splitter, slider or any other element that visually indicates it can be dragged across the screen. This dragging element is used to peel the layer and by doing so revealing the content underneath.

When you position the mouse over the dragging element, the pointer will turn into an arrow that points in the direction that you can swipe the layer.

EXAMPLES