Filter features by attribute | Sample | ArcGIS Maps SDK for JavaScript

See More

This sample demonstrates how to filter features by attributes on the client-side. This can be done by creating a new FeatureFilter and specifying its where clause, then applying the filter object to the layer view’s filter property.

How it works

The sample filters flash flood warnings by the season they are issued in. To see the flash flood warnings issued in different seasons, click on the filter button, then select a season.

// User clicked on Winter, Spring, Summer or Fall
// set an attribute filter on flood warnings layer view
// to display the warnings issued in that season
function filterBySeason() {
  if (!floodLayerView) return;
  // get selected item from the list
  const [selectedItem] = seasonsList.selectedItems;
  // set the filter to the selected item's value if not null
  floodLayerView.filter = selectedItem
    ? {
        where: `Season = '${selectedItem.value}'`,
      }
    : null;
}

<!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>Filter features by attribute | 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 {
        margin: 0;
        height: 100%;
      }

      #titleDiv {
        padding: var(--calcite-spacing-sm);
        background: var(--calcite-color-background);
        box-shadow: var(--calcite-shadow-sm);
        font-size: var(--calcite-font-size-xl);
      }
    </style>
  </head>

  <body>
    <arcgis-map center="-98, 40" zoom="4">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-expand
        slot="top-left"
        expand-icon="filter"
        expand-tooltip="Filter flash flood warnings by season">
        <calcite-list
          id="seasons-filter"
          label="Seasons"
          selection-appearance="border"
          selection-mode="single">
          <calcite-list-item label="Winter" value="Winter"></calcite-list-item>
          <calcite-list-item label="Spring" value="Spring"></calcite-list-item>
          <calcite-list-item label="Summer" value="Summer"></calcite-list-item>
          <calcite-list-item label="Fall" value="Fall"></calcite-list-item>
        </calcite-list>
      </arcgis-expand>

      <div id="titleDiv" slot="top-right">Flash Flood Warnings (2002 - 2012)</div>
    </arcgis-map>

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

      const viewElement = document.querySelector("arcgis-map");

      // flash flood warnings layer
      const layer = new FeatureLayer({
        portalItem: {
          id: "f9e348953b3848ec8b69964d5bceae02",
        },
        outFields: ["SEASON"],
      });

      const map = new Map({
        basemap: "gray-vector",
        layers: [layer],
      });
      viewElement.map = map;

      // flash flood warnings layer loaded
      // get a reference to the flood warnings layer view
      const layerView = await viewElement.whenLayerView(layer);

      const seasonsExpand = document.querySelector("arcgis-expand");
      // clear the filter when user closes the expand component
      reactiveUtils.when(() => !seasonsExpand.expanded, clearSeasonFilter);

      // get the list of seasons
      const seasonsList = document.getElementById("seasons-filter");
      // selection change event handler for seasons choices
      seasonsList.addEventListener("calciteListChange", filterBySeason);

      // Applies a filter to the floods layer view based on the selected season
      function filterBySeason() {
        if (!layerView) return;
        const selectedItem = seasonsList.selectedItems?.[0];
        layerView.filter = selectedItem ? { where: `SEASON = '${selectedItem.value}'` } : null;
      }

      // Clears any season filter applied to the floods layer view
      function clearSeasonFilter() {
        // Remove filter from layerview
        layerView.filter = null;
        // Deselect all selected items in the list
        seasonsList.selectedItems?.forEach((item) => {
          item.selected = false;
        });
      }
    </script>
  </body>
</html>