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.

When you include this 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.

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 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 left of the slider, depending on the orientation you select for the widget. Trailing layers appear below or right of the slider.

        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 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.

    Caution:

    If you choose the Advanced template, avoid placing the Swipe widget on the connected Map widget. If you do, the swipe functionality becomes inoperable.

    • 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