The Swipe widget allows you to compare layers and maps. The widget transitions from one map or layer to another by moving, or swiping, a divider across the map.
Examples
Use this widget to support app design requirements such as the following:
- You want to compare historic urban maps with modern imagery.
- You want to show projected sea level rise over coastal towns.
- You want to swipe between a 2D map and a 3D scene of the same location.
Usage notes
This widget requires connection to a Map widget. The Map widget must be connected to at least one data source, unless the app also includes an Add Data widget. Users can swipe through layers added with the Add Data widget at run time.
When you include the Swipe widget in an app, the user is provided with a switch to turn on the swipe tool. The widget panel also lists all web maps and layers that you specify to be included in the swipe in the widget's settings or that the user added at run time.
Caution:
Any widgets that you place on the connected Map widget, such as legends or charts, are also affected by the Swipe widget's swiping motion.
Settings
The Swipe widget includes the following settings:
- Select a template—Select a template for the widget, either Simple or Advanced. Both templates can be oriented vertically or horizontally.
- Simple—Adds a slider with a draggable handle to the map. This template is appropriate for comparing two things.
- Select a Map widget—Select a Map widget.
- Swipe mode—Swipe between layers of one map or swipe between two maps or scenes. To use the latter option, the connected Map widget must contain two data sources (two maps, two scenes, or one map and one scene).
- Customize settings—This setting is different for each Swipe mode option, but for both it specifies which layers appear on which side of the slider.
- Swipe between layers of one map—You can click each connected map to open the Choose layers panel, where you can designate layers to be leading and trailing layers. Leading layers appear above or to the left of the slider, depending on the orientation you select for the widget. Trailing layers appear below or to the right of the slider. The user can designate layers they add at run time as both leading and trailing layers.
Note:
Swipe between layers of one map does not support web scenes, sublayers of map image layers, or group layers.
- Swipe between web maps or web scenes—You can click the Reverse button to swap the order of the two maps or scenes.
- Swipe between layers of one map—You can click each connected map to open the Choose layers panel, where you can designate layers to be leading and trailing layers. Leading layers appear above or to the left of the slider, depending on the orientation you select for the widget. Trailing layers appear below or to the right of the slider. The user can designate layers they add at run time as both leading and trailing layers.
- Arrangement style—Choose a user interface style for the widget, either Panel or Bar.
- General settings—Configure general settings.
- Slider initial position—Define where the slider starts on the map in percent (%), meaning the percentage of the map's height or width.
- Divider color—Change the color of the slider's divider line.
- Handle color—Change the color of the handle used to drag the slider.
- Default activation—Have the swipe tool be turned on by default when the widget first loads.
- Allow deactivating layers—Allow users to turn off leading and trailing layers in the Swipe widget's panel at run time. Deactivated layers still appear but are unaffected by the swipe.
- Toggle layer visibility—Allow users to turn layer visibility on or off for layers at run time.
Note:
The Allow deactivating layers and Toggle layer visibility settings only appear if you choose Swipe between layers of one map and the Panel arrangement style.
- Advanced—Add a scroll bar to the bottom or right of the map, depending on the orientation you select for the widget. This template is appropriate for comparing two or more layers, one layer at a time. The Advanced template does not support web scenes, sublayers of map image layers, or group layers.
- Select a Map widget—Select a Map widget.
- Customize settings—Specify the layers to be included in the swipe. You can click each connected map to open the Choose layers panel, where you can designate layers to be scrolling layers.
- Arrangement style—Choose a user interface style for the widget, either Panel or Bar.
- General settings—Configure general settings.
- Divider color—Change the color of the divider line that appears between layers.
- Default activation—Have the swipe tool be turned on by default when the widget first loads.
- Allow deactivating layers—Allow users to turn off scrolling layers at run time. Deactivated layers still appear but are unaffected by the swipe.
- Toggle layer visibility—Allow users to turn layer visibility on or off for layers at run time.
Note:
The Allow deactivating layers and Toggle layer visibility settings only appear if you choose the Panel arrangement style.
- Simple—Adds a slider with a draggable handle to the map. This template is appropriate for comparing two things.
The following table lists the three swipe modes and their supported data types:
| Mode | Web maps | Web scenes | Individual layers from web maps | Individual layers from web scenes |
|---|---|---|---|---|
Simple: Swipe between layers of one map |
| |||
Simple: Swipe between web maps or web scenes |
|
| ||
Advanced |
|
