Animate layer view effect | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

This sample visualizes the winner of the 2008 U.S. presidential election for each voting precinct in the country. The color of each point indicates the winner: blue for Obama and red for McCain. Size represents the total number of votes cast at that polling station. FeatureLayerView featureEffect is used to visualize the gap, or margin of victory, between the winner and second place candidate.

The featureEffect set on the features depends on the value of the calcite slider. If the slider position is near the “Contested” label, then features that have the drop-shadow effect applied represent precincts where the winner either tied or won by a very small margin. As the slider handle moves toward “Landslide”, the features with the drop-shadow effect represent precincts where the winner won by larger margins. The features that fall outside of the current gap percentage value have blur, grayscale and opacity effects applied to them so that they will be subdued on the map. Click the “Play” button to animate the slider between “Contested” and “Landslide” to explore hotly contested areas, and those areas where the second place candidate never really had a chance at victory.

/**
 * Creates an featureEffect centered around a gap between the 2 candidates.
 * If the precincts have the specified gap percentage, drop-shadow
 * effect is applied to make them stand out from the rest. If they
 * fall outside of the specified gap percentage, grayscale, blur
 * and opacity effects are applied to subdue their presence.
 */
function createEffect(gapValue) {
  gapValue = Math.min(100, Math.max(0, gapValue));

  function roundToTheTenth(value) {
    return Math.round(value * 10) / 10;
  }

  return {
    filter: {
      where: `PERCENT_GAP > ${roundToTheTenth(gapValue - 1)} AND PERCENT_GAP < ${roundToTheTenth(gapValue + 1)}`,
    },
    includedEffect: "drop-shadow(0, 2px, 2px, black)",
    excludedEffect: "grayscale(25%) blur(5px) opacity(25%)",
  };
}

Additional visualization samples and resources

<!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>Animate layer view effect | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      #footer {
        display: flex;
        flex-direction: row;
        --calcite-color-brand: #333333;
        --calcite-color-brand-hover: #222222;
      }

      #sliderValue-block,
      #play-block {
        flex: 1;
        flex-grow: 1;
      }

      #slider-block {
        flex: 5;
        flex-grow: 10;
        padding-left: 20px;
      }

      #sliderValue {
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        font-size: 300%;
      }

      #playButton {
        margin-top: 20px;
        padding-left: 10px;
        width: 110px;
      }

      #titleDiv {
        font-weight: 400;
        font-style: normal;
        font-size: 1.2019rem;
        padding: 10px;
        background: white;
      }

      #sliderValue {
        font-size: 150%;
        font-weight: bold;
      }

      /**
      * Hover tooltip
      */
      .tooltip {
        position: absolute;
        pointer-events: none;
        transition: opacity 200ms;
      }

      .tooltip > div {
        margin: 0 auto;
        padding: 12px;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        transform: translate3d(-50%, -120%, 0);
        width: 300px;
        height: 185px;
        background: white;
        display: flex;
      }

      .tooltip-content {
        flex: 1 1 100%;
        align-items: stretch;
        flex-direction: column;
      }

      .tooltip-text {
        border-top: 1px solid lightgray;
        font-size: 75%;
        font-style: italic;
        margin-top: 12px;
        padding-top: 4px;
      }

      /**
      * Tooltip's chart
      */
      .chart {
        flex: 1 1 100%;
        display: flex;

        flex-direction: column;
        align-items: stretch;
      }

      .chart .row {
        flex: 1 1 auto;
        align-items: center;

        display: flex;
      }

      .chart .row .labels {
        flex: 0 0 60px;

        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: right;
      }

      .chart .row .labels > span {
        flex: 1 1 100%;
        text-align: right;
      }

      .chart .row .value {
        flex: 0 0 60px;

        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: right;
      }

      .chart .row .value > span {
        flex: 1 1 100%;
        text-align: right;
      }

      .chart .row .data {
        flex: 1 1 100%;

        position: relative;
        padding-left: 4px;
        padding-right: 4px;
      }

      .row.gap {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid lightgray;
      }

      .bar {
        text-align: right;
        height: 24px;

        display: flex;
        align-items: center;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

        transition: 300ms all;
      }

      .row.democrat .bar {
        background-color: rgb(0, 92, 230);
      }

      .row.republican .bar {
        background-color: rgb(255, 20, 20);
      }

      .row.gap .bar {
        position: relative;
        background: white
          url("https://js.arcgis.com/5.0/esri/symbols/patterns/backward-diagonal.png") repeat;
        border-radius: 0;
        border-bottom: 1px solid gray;
        border-top: 1px solid gray;
      }

      .row.gap .bar > div {
        position: absolute;
        z-index: -1;
        top: -110px;
        bottom: -18px;
        left: -1px;
        right: -1px;
        border-left: 1px dashed gray;
        border-right: 1px dashed gray;
        background: #ececec;
      }
    </style>
  </head>

  <body>
    <calcite-shell id="appShell">
      <arcgis-map>
        <div id="titleDiv" slot="top-left">Obama / McCain 2008 Election - voting districts gap</div>
        <arcgis-expand slot="top-left" expand-icon="list-bullet">
          <arcgis-legend legend-style="classic"></arcgis-legend>
        </arcgis-expand>
      </arcgis-map>
      <div id="footer" slot="footer">
        <calcite-block id="sliderValue-block" expanded label="current year">
          <span id="sliderValue"></span>of the votes separate the two candidates
        </calcite-block>
        <calcite-block id="slider-block" label="slider block" expanded>
          <calcite-slider min="0" max="100" step="0.25" value="50" label-ticks ticks="100">
          </calcite-slider>
        </calcite-block>
        <calcite-block label="play button block" id="play-block" expanded>
          <calcite-button id="playButton" appearance="transparent" icon-start="play"
            >Play</calcite-button
          >
        </calcite-block>
      </div>
    </calcite-shell>

    <div id="tooltipContent" class="tooltip-content" style="visibility: hidden">
      <div id="chart" class="chart">
        <div class="row democrat">
          <div class="labels"><span>Obama:</span></div>
          <div class="data"><div class="bar"></div></div>
          <div class="value"><span></span></div>
        </div>
        <div class="row republican">
          <div class="labels"><span>McCain:</span></div>
          <div class="data"><div class="bar"></div></div>
          <div class="value"><span></span></div>
        </div>
        <div class="row gap">
          <div class="labels"><span>Gap:</span></div>
          <div class="data">
            <div class="bar"><div></div></div>
          </div>
          <div class="value"><span></span></div>
        </div>
      </div>
      <div class="tooltip-text">Click to view precincts with similar gap</div>
    </div>

    <script type="module">
      const [Map, FeatureLayer, promiseUtils] = await $arcgis.import([
        "@arcgis/core/Map.js",
        "@arcgis/core/layers/FeatureLayer.js",
        "@arcgis/core/core/promiseUtils.js",
      ]);

      //--------------------------------------------------------------------------
      //  Setup Map and Layer
      //--------------------------------------------------------------------------

      const layer = new FeatureLayer({
        portalItem: {
          id: "359bc19d9bbb4f2ba1b2baec7e13e757",
        },
        outFields: ["PERCENT_GAP"],
        // don't show precincts that didn't record any votes
        definitionExpression: "(P2008_D > 0) AND (P2008_R > 0)",
        title: "Voting precincts",
        opacity: 1,
        renderer: {
          type: "unique-value",
          field: "Majority",
          uniqueValueInfos: [
            {
              value: "Obama",
              symbol: {
                type: "simple-marker",
                size: 9,
                color: "rgb(0, 92, 230)",
                outline: null,
              },
            },
            {
              value: "McCain",
              symbol: {
                type: "simple-marker",
                size: 9,
                color: "rgb(255, 20, 20)",
                outline: null,
              },
            },
            {
              value: "Tied",
              symbol: {
                type: "simple-marker",
                size: 9,
                color: "rgb(158, 85, 156)",
                outline: null,
              },
            },
          ],
          visualVariables: [
            {
              type: "size",
              minDataValue: 600,
              maxDataValue: 4562,
              minSize: 3,
              maxSize: 20,
              valueExpression: "$feature.P2008_D + $feature.P2008_R",
              valueExpressionTitle: "Turnout",
              valueUnit: "unknown",
            },
          ],
        },
      });

      const map = new Map({
        basemap: {
          portalItem: {
            id: "3582b744bba84668b52a16b0b6942544",
          },
        },
        layers: [layer],
      });

      const viewElement = document.querySelector("arcgis-map");
      viewElement.map = map;
      viewElement.extent = {
        xmin: -126.902,
        ymin: 23.848,
        xmax: -65.73,
        ymax: 50.15,
      };
      viewElement.constraints = {
        snapToZoom: false,
      };

      //--------------------------------------------------------------------------
      //  Setup UI
      //--------------------------------------------------------------------------

      const sliderValue = document.getElementById("sliderValue");
      const playButton = document.getElementById("playButton");
      let animation = null;

      const slider = document.querySelector("calcite-slider");
      slider.labelFormatter = function (value, type) {
        if (type === "tick") {
          return value === slider.min
            ? "Contested"
            : value === slider.max
              ? "Landslide"
              : undefined;
        }
      };
      slider.addEventListener("calciteSliderInput", inputHandler);

      function inputHandler(event) {
        stopAnimation();
        setGapValue(parseInt(slider.value));
      }

      // Toggle animation on/off when user
      // clicks on the play button
      playButton.addEventListener("click", () => {
        playButton.iconStart === "pause" ? stopAnimation() : startAnimation();
      });

      // When the layerview is available, setup hovering interactivity
      const layerView = await viewElement.whenLayerView(layer);

      setupHoverTooltip(layerView);

      // Starts the application by visualizing a gap of 50% between the two candidates
      setGapValue(50);

      //--------------------------------------------------------------------------
      //  Methods
      //--------------------------------------------------------------------------

      /**
       * Sets the current visualized gap.
       */
      function setGapValue(value) {
        sliderValue.textContent = `${(Math.round(value * 100) / 100).toFixed(2)}%`;
        slider.value = value;
        layerView.featureEffect = createEffect(value);
      }

      /**
       * Creates a feature effect centered around a gap between the 2 candidates.
       * If the precincts have the specified gap percentage, the drop-shadow
       * effect is applied to make them stand out from the rest. If they
       * fall outside of the specified gap percentage, grayscale, blur
       * and opacity effects are applied to subdue their presence.
       */
      function createEffect(gapValue) {
        gapValue = Math.min(100, Math.max(0, gapValue));

        function roundToTheTenth(value) {
          return Math.round(value * 10) / 10;
        }

        return {
          filter: {
            where: `PERCENT_GAP > ${roundToTheTenth(gapValue - 1)} AND PERCENT_GAP < ${roundToTheTenth(gapValue + 1)}`,
          },
          includedEffect: "drop-shadow(0, 2px, 2px, black)",
          excludedEffect: "grayscale(25%) blur(5px) opacity(25%)",
        };
      }

      /**
       * Sets up a moving tooltip that displays
       * a chart with the voter count for each candidate,
       * and the gap between the two.
       */
      function setupHoverTooltip(layerview) {
        let highlight;

        const tooltip = createTooltip();

        const hitTest = promiseUtils.debounce((point) => {
          return viewElement.hitTest(point).then((hit) => {
            const results = hit.results.filter((result) => {
              return result.graphic.layer === layer;
            });

            if (results.length) {
              const graphic = results[0].graphic;
              const screenPoint = hit.screenPoint;

              return {
                graphic: graphic,
                screenPoint: screenPoint,
                values: {
                  democrat: Math.round(graphic.getAttribute("P2008_D")),
                  republican: Math.round(graphic.getAttribute("P2008_R")),
                },
              };
            } else {
              return null;
            }
          });
        });

        viewElement.addEventListener("arcgisViewPointerMove", async (event) => {
          try {
            const result = await hitTest(event.detail);
            highlight?.remove();

            if (!result) {
              tooltip.hide();
            } else {
              highlight = layerview.highlight(result.graphic);
              tooltip.show(result.screenPoint, result.values);
            }
          } catch (error) {
            if (error.name !== "AbortError") {
              console.error("Unexpected hitTest error:", error);
            }
          }
        });

        viewElement.addEventListener("arcgisViewClick", async (event) => {
          const result = await hitTest(event.detail);
          try {
            if (!result) {
              return;
            }

            stopAnimation();

            const dem = result.values.democrat;
            const rep = result.values.republican;
            const p_gap = ((Math.max(dem, rep) - Math.min(dem, rep)) / (dem + rep)) * 100;
            animation = animateTo(p_gap);
          } catch (error) {
            if (error.name !== "AbortError") {
              console.error("Unexpected hitTest error:", error);
            }
          }
        });
      }

      /**
       * Starts the animation that cycle
       * through the gap between the two candidates.
       */
      function startAnimation() {
        stopAnimation();
        animation = animate(slider.value);
        playButton.iconStart = "pause";
        playButton.textContent = "Pause";
      }

      /**
       * Stops the animations
       */
      function stopAnimation() {
        if (!animation) {
          return;
        }

        animation.remove();
        animation = null;
        playButton.iconStart = "play";
        playButton.textContent = "Play";
      }

      /**
       * Animates the visualized gap continously.
       */
      function animate(startValue) {
        let animating = true;
        let value = startValue;
        let direction = 0.1;

        const frame = () => {
          if (!animating) {
            return;
          }

          value += direction;
          if (value > 100) {
            value = 100;
            direction = -direction;
          } else if (value < 0) {
            value = 0;
            direction = -direction;
          }

          setGapValue(value);
          requestAnimationFrame(frame);
        };

        requestAnimationFrame(frame);

        return {
          remove: () => {
            animating = false;
          },
        };
      }

      /**
       * Animates to a gap value.
       */
      function animateTo(targetValue) {
        let animating = true;

        const frame = () => {
          if (!animating) {
            return;
          }

          const value = slider.value;

          if (Math.abs(targetValue - value) < 1) {
            animating = false;
            setGapValue(targetValue);
          } else {
            setGapValue(value + (targetValue - value) * 0.25);
            requestAnimationFrame(frame);
          }
        };

        requestAnimationFrame(frame);

        return {
          remove: () => {
            animating = false;
          },
        };
      }

      /**
       * Creates a tooltip to display a chart showing the raw voters count
       * and the gap between the two candidates.
       */
      function createTooltip() {
        const tooltip = document.createElement("div");
        const style = tooltip.style;

        style.opacity = 0;
        tooltip.setAttribute("role", "tooltip");
        tooltip.classList.add("tooltip");

        const content = document.getElementById("tooltipContent");
        content.style.visibility = "visible";
        content.classList.add("esri-widget");
        tooltip.appendChild(content);

        viewElement.appendChild(tooltip);

        // Cache chart DOM nodes once (avoid repeated querySelector on every update)
        const demBar = content.querySelector("#chart .row.democrat .bar");
        const demValue = content.querySelector("#chart .row.democrat .value > span");

        const repBar = content.querySelector("#chart .row.republican .bar");
        const repValue = content.querySelector("#chart .row.republican .value > span");

        const gapBar = content.querySelector("#chart .row.gap .bar");
        const gapValue = content.querySelector("#chart .row.gap .value > span");

        let x = 0;
        let y = 0;
        let targetX = 0;
        let targetY = 0;
        let visible = false;
        let moveRaFTimer;

        function move() {
          function moveStep() {
            moveRaFTimer = null;
            x += (targetX - x) * 0.5;
            y += (targetY - y) * 0.5;

            if (Math.abs(targetX - x) < 1 && Math.abs(targetY - y) < 1) {
              x = targetX;
              y = targetY;
            } else {
              moveRaFTimer = requestAnimationFrame(moveStep);
            }

            style.transform = "translate3d(" + Math.round(x) + "px," + Math.round(y) + "px, 0)";
          }

          if (!moveRaFTimer) {
            moveRaFTimer = requestAnimationFrame(moveStep);
          }
        }

        let dem;
        let rep;
        let updateRaFTimer;

        function updateContent(values) {
          if (dem === values.democrat && rep === values.republican) {
            return;
          }

          dem = values.democrat;
          rep = values.republican;
          cancelAnimationFrame(updateRaFTimer);

          updateRaFTimer = requestAnimationFrame(() => {
            let p_gap = (Math.max(dem, rep) - Math.min(dem, rep)) / (dem + rep);
            p_gap = Math.round(p_gap * 10000) / 100;
            const p_dem = (dem / (dem + rep)) * 100;
            const p_rep = (rep / (dem + rep)) * 100;

            demBar.style.width = p_dem + "%";
            demValue.textContent = dem;

            repBar.style.width = p_rep + "%";
            repValue.textContent = rep;

            gapBar.style.width = p_gap + "%";
            gapBar.style.marginLeft = Math.min(p_dem, p_rep) + "%";
            gapValue.textContent = p_gap + "%";
          });
        }

        return {
          show: (point, values) => {
            if (!visible) {
              x = point.x;
              y = point.y;
            }

            targetX = point.x;
            targetY = point.y;
            style.opacity = 1;
            visible = true;

            move();
            updateContent(values);
          },

          hide: () => {
            style.opacity = 0;
            visible = false;
          },
        };
      }
    </script>
  </body>
</html>