ArcGIS Maps SDK for JavaScript

A New Widget That'll Have You Swiping Right

Swipe to view relationships between layers with the new Swipe widget, available in version 4.13 of the ArcGIS API for JavaScript. The Swipe widget is a useful tool for comparing layers or seeing what is underneath a layer.

The Swipe widget can be initialized in just a few quick steps so that you can start comparing layers in your web apps. You have a few options when adding a Swipe widget to your MapView. These include which direction you would like it to move (horizontal or vertical), the position you would like it to start in the view, and of course what layers you would like to compare. You can also change the visual aspects of the Swipe widget’s display through the visibleElements property.

Now, let’s look at three scenarios for how to use the Swipe widget.

Swipe to reveal an underlying layer

Let’s see how you can use the Swipe widget to see what’s underneath a layer by examining deforestation in North America. We’ll add the Tree Cover Loss ImageryLayer to the trailingLayers property and leave the leadingLayers property unset. This will allow us to see the underlying satellite basemap below the tree loss.

var swipe = new Swipe({
  view: view,
  trailingLayers: [treeLoss],
  direction: "horizontal", // swipe widget will move left and right
  position: 30 // position set to a third of the view (30%)
});
view.ui.add(swipe);

The resulting application will look like this, where we can swipe to see satellite imagery underneath the areas affected by tree loss.

Using the swipe widget to show what is underneath a layer
Swipe Widget - Tree Loss App (click to view live)

Swipe to compare layers

The most common use case for the Swipe widget is to compare two (or more) layers. This can be useful to view before and after imagery from a natural disaster, see urban development over time, or view similarities and differences between datasets in the same area. To create a comparison between layers, we add layers to both the leadingLayers and the trailingLayers properties. When the direction property is set to “horizontal”, the leadingLayers will appear on the left of the Swipe divider, and the trailingLayers will be on the right. A beautiful, seamless comparison awaits.

var swipe = new Swipe({
  view: view,
  leadingLayers: [infrared],
  trailingLayers: [nearInfrared],
  direction: "horizontal" // swipe widget will move left and right
});
view.ui.add(swipe);
Swipe Widget - comparing two layers
Swipe Widget - Compare two layers (swipe to view live)

Swiping programmatically

Instead of dragging or using the arrow keys to move the Swipe widget back and forth, you have the option to control the swipe widget programmatically using the position property. To show how this can be done, we created an application that programmatically swipes through layers of a Webmap whenever the user scrolls.

Multiple Swipe widgets are used in this application. For each layer of the Webmap, a swipe widget is created and the layer is added to the Swipe widget’s trailingLayers property.


// create a swipe widget for each layer
swipes = layers.map(function(layer) {
   return new Swipe({
      view: view,
      disabled: true,
      position: 100, // start at bottom of the view
      direction: "vertical", // will move up/down
      trailingLayers: [layer],
      visibleElements: {
         handle: false, // swipe widget handle won't be shown
         divider: true
      }
   });
});

When the user scrolls through the app and the position of the Swipe widget reaches either the top or bottom of the view, the leadingLayers and trailingLayers update.


if (position < 0 && swipe.trailingLayers.length) {
   swipe.leadingLayers.addMany(swipe.trailingLayers);
   swipe.trailingLayers.removeAll();
} else if (position >= 0 && swipe.leadingLayers.length) {
   swipe.trailingLayers.addMany(swipe.leadingLayers);
   swipe.leadingLayers.removeAll();
}

Click the following GIF to see this application in action.

Programmatic swipe based on scroll
Swipe Widget - Programmatic Swipe (click to view live)

Start Swiping!

Hopefully this helped you better understand how to use the Swipe widget. Now, it’s time for you to start swiping! We cannot wait to see the awesome applications that you will create.

The Swipe widget is the new and improved version of LayerSwipe in 3.x.

About the author

Anne Fitz is a Senior Product Engineer at Esri, working on the ArcGIS Maps SDK for JavaScript and ArcGIS Arcade. Her expertise primarily focuses on dynamic vector symbology (CIM symbols), data visualization, animation, ArcGIS Arcade integration, and widgets. Anne’s primary goal is to help developers succeed in building geospatial applications, providing them with the tools and knowledge they need to bring their ideas to life. She has been with Esri for over four years.

Connect:
0 Comments
Inline Feedbacks
View all comments

Next Article

What's new in ArcGIS Hub first quarter

Read this article