Swipe widget

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.
    • 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.
      • Allow deactivating layers (Appears in Swipe between layers of one map mode)—Allow users to turn off leading and trailing layers in the Swipe widget's panel at run time.
  • 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.
    • General settings—Configure general settings.
      • Divider color—Change the color of the divider line that appears between layers.
      • Allow deactivating layers—Allow users to turn off scrolling layers at run time.

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