Swipe component with scroll | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

This sample uses multiple Swipe components to create an seemingly infinite scroll between different Educational Attainment layers in Mexico.

How it works

For each layer loaded from a WebMap, a Swipe is created, and the layer is added to the endLayers.

// create a swipe component for each layer
const swipes = layers.map((layer) => {
  layer.visible = true;
  const swipe = document.createElement("arcgis-swipe");
  swipe.endLayers = [layer];
  // set other swipe properties
  return swipe;
});

When the user scrolls through the app, the startLayers and endLayers update as the Swipe’s position changes to achieve the infinite scroll effect.

// To achieve this infinite scroll effect we need to swap the layers:
//   The layer starts at the bottom, the divider goes up.
//   Then the next layer starts to show up, so we put back the divider at the bottom and swap the layers.
if (position < 0 && swipe.endLayers.length) {
  swipe.startLayers.addMany(swipe.endLayers);
  swipe.endLayers.removeAll();
} else if (position >= 0 && swipe.startLayers.length) {
  swipe.endLayers.addMany(swipe.startLayers);
  swipe.startLayers.removeAll();
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Swipe component with scroll | Sample | ArcGIS Maps SDK for JavaScript</title>

    <style media="screen">
      html,
      body {
        height: 100%;
        margin: 0;
      }

      arcgis-map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        overflow: hidden;
      }

      .scroller {
        position: absolute;
        overflow-y: scroll;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        z-index: 1;
      }

      .scroller > .content {
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        align-content: stretch;
        justify-content: space-evenly;
      }

      .scroller > .content > .slide {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
      }

      .legend {
        background: var(--calcite-color-foreground-1);
        overflow: scroll;
        padding: var(--calcite-spacing-md);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        visibility: hidden;
        /* set visibility after map initialization */
        margin: 12px;
        width: 300px;
        max-height: 300px;
      }
    </style>
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
  </head>

  <body>
    <arcgis-map zoom="5" item-id="45725ba7d9fb47a0925398919b13d1fa" id="my-map"></arcgis-map>
    <div class="scroller">
      <div class="content"></div>
    </div>

    <script type="module">
      const scroller = document.querySelector(".scroller");
      const content = scroller.querySelector(".content");
      // initialize the map
      const viewElement = document.querySelector("arcgis-map");
      const mapHeight = viewElement.offsetHeight;
      // wait for the view to be ready
      await viewElement.viewOnReady();
      const map = viewElement.map;
      // get the layers from the webmap
      const layers = map.layers;
      // create a swipe component for each layer
      const swipes = layers.map((layer) => {
        layer.visible = true;
        const swipe = document.createElement("arcgis-swipe");
        swipe.endLayers = [layer];
        swipe.startLayers = [];
        swipe.disabled = true;
        swipe.direction = "vertical";
        swipe.hideHandle = true;
        swipe.position = 100;
        swipe.referenceElement = "my-map";
        return swipe;
      });
      // create a legend for each layer
      layers.forEach((layer) => {
        const slide = document.createElement("div");
        slide.className = "slide";
        const legend = document.createElement("arcgis-legend");
        legend.layerInfos = [
          {
            layer: layer,
          },
        ];
        legend.referenceElement = "my-map";
        legend.className = "legend";
        slide.appendChild(legend);
        content.appendChild(slide);
      });
      let height = 0;

      function updateSize() {
        height = mapHeight * swipes.length;
        setScroll(scroller.scrollTop);
        content.style.height = height + "px";
      }

      function clamp(value, min, max) {
        return Math.min(max, Math.max(min, value));
      }
      let scroll = 0;
      let ticking = false;

      function setScroll(value) {
        scroll = value;
        if (!ticking) {
          requestAnimationFrame(() => {
            ticking = false;
            let pageRatio = scroll / mapHeight;
            swipes.forEach((swipe, index, swipes) => {
              // add swipe to map
              viewElement.append(swipe);
              let position = (index - pageRatio) * 100;
              // To achieve this infinite scroll effect we need to swap the layers:
              //   The layer starts at the bottom, the divider goes up
              //   Then the next layer starts to show up, so we put back the divider at the bottom and swap the layers.
              if (position < 0 && swipe.endLayers.length) {
                swipe.startLayers.addMany(swipe.endLayers);
                swipe.endLayers.removeAll();
              } else if (position >= 0 && swipe.startLayers.length) {
                swipe.endLayers.addMany(swipe.startLayers);
                swipe.startLayers.removeAll();
              }
              if (position < 0) {
                position += 100;
              }
              swipe.position = clamp(position, 0, 100);
            });
          });
          ticking = true;
        }
      }
      updateSize();
      // show layer legends after map has loaded
      const legends = document.getElementsByClassName("legend");
      for (let i = 0; i < legends.length; i++) {
        legends[i].style.visibility = "visible";
      }
      // stop default scroll
      scroller.addEventListener("wheel", (event) => {
        event.stopImmediatePropagation();
      });
      scroller.addEventListener("scroll", (event) => {
        setScroll(scroller.scrollTop);
      });
    </script>
  </body>
</html>