Swipe component

This sample demonstrates how to use a Swipe component to compare two different TileLayers from the 2018 Kilauea eruption. Swipe allows users to view collections of layers simultaneously by placing a divider and handle in the view to display selected parts of a layer or layers.

1
2
3
4
5
6
7
8
9
10
11
12
13
<arcgis-swipe swipe-position="32"></arcgis-swipe>

<script>
// get reference to swipe component
const arcgisSwipe = document.querySelector("arcgis-swipe");
// wait for swipe to be ready, then add the leading and trailing layers
arcgisSwipe.addEventListener("arcgisPropertyChange", (e) => {
  if (e.detail.name === "state" && arcgisSwipe.state === "ready") {
    arcgisSwipe.leadingLayers.add(infrared);
    arcgisSwipe.trailingLayers.add(nearInfrared);
  }
});
</script>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close