Web AppBuilder for ArcGIS (Developer Edition)

Swipe widget

(Added at v1.1)

The Swipe widget enables you to easily compare the content of different layers in a map. It provides horizontal, vertical, and spyglass view modes. You can slide the swipe tool or move the mouse around to reveal the content of another layer. For example, you may want to use it to show before-and-after imagery of a flood, or display two related thematic layers in a map.

Configure the Swipe widget

This widget can be set to open automatically when an app starts. To enable this feature, click the Open this widget automatically when the app starts button Open this widget automatically when the app starts on the widget, which turns it dark green.

  1. Hover over the Swipe widget and click the small eye icon Eye icon to show this widget in your application. It is located on the upper left corner of the map, right under the My Location widget.
  2. Hover over the widget and click the Configure this widget button Configure this widget to open the configuration properties dialog box.
  3. Choose a style to interact with the map.
    Styles for the swipe tool
    • Vertical bar—Slide the swipe tool left and right.
    • Horizontal bar—Slide the swipe tool up and down.
    • Spyglass—Drag the spyglass around the map. The content of the layer you want to swipe shows within the spyglass.
  4. Optionally, you can choose the direction in which to swipe by using the Direction button.
  5. Set Bar Color.
  6. Select a Swipe mode. This allows you to control one or multiple layers at once when using the widget.
    • Single layer
    • Multiple layers
  7. Check the box to Choose which layers to swipe. Sometimes you may not want to swipe all the layers in the map.
  8. Choose a layer you want to swipe by default in the drop-down list, which includes all the operational layers on the map.
  9. If you selected to swipe a single layer, check the Zoom to the swipe layer check box to automatically zoom to the layer you swipe.
  10. Click OK to save the configuration and close the window.

Use the Swipe widget

  1. Click the Swipe widget icon on the upper left corner of the map to turn the widget on and off.
  2. When the widget is turned on, move the mouse over the widget icon to select a layer to swipe from the drop-down list.
    Select a layer to swipe from the drop-down list

    Only the layer visible on the map can take effect with the swipe tool.

    Note:

    You can minimize the panel at runtime, to avoid overlapping with the map.

  3. Slide the swipe tool or drag the spyglass to display the content of the layer on the map.
    Swipe the layer with vertical bar
    Swipe the layer with spyglass
  4. Click the Swipe widget icon to turn off the widget.