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