Query a feature layer (spatial) | ArcGIS Maps SDK for JavaScript

Learn how to execute a spatial query to access features from a feature layer .

A feature layer can contain a large number of features stored in ArcGIS . To access a subset of the features, you can execute either a SQL or spatial query, or both at the same time. You can return feature attributes , geometry , or both attributes and geometry for each record. SQL and spatial queries are useful when you want to access just a subset of your hosted data.

In this tutorial, you will use the Sketch component to draw a feature and then perform a spatial query against a feature layer . The query layer is the LA County Parcels feature layer containing ±2.4 million features. The spatial query uses the sketched feature to return all of the parcels that intersect.

Prerequisites

Steps

Create a new pen

To get started, either complete the Display a map tutorial or .

Get an access token

You need an access token with the correct privileges to access the location services used in this tutorial.

Go to the Create an API key tutorial and create an API key with the following privilege(s) :
- Privileges
  - Location services > Basemaps
- Item access
  - Note: If you are using your own custom data layer for this tutorial, you need to grant the API key credentials access to the layer item. Learn more in Item access privileges.
In CodePen, set the apiKey property on the global esriConfig variable to your access token.
var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN", };

To learn about other ways to get an access token, go to Types of authentication.

Add a Sketch component

Use the Sketch component to create a graphic . The graphic will be added to the map in a graphics layer . The event handler will listen for a change from the Sketch component and update the query accordingly.

Add an arcgis-sketch component after the arcgis-zoom component within the <arcgis-map>. Set the slot attribute to top-right and the creation-mode attribute to update.

29 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Query a feature layer (spatial)</title>

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

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

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

</head>


<body>

  <arcgis-map basemap="topo" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-sketch creation-mode="update" slot="top-right"></arcgis-sketch>

  </arcgis-map>
5 collapsed lines

</body>


</html>

You should see the Sketch component at the top right of the map. Click on one of the options in the component to draw on the map.

Add modules and event listeners

Add a <script> tag in the <body> following the <arcgis-map> component. Use $arcgis.import() to add the FeatureLayer module.

The ArcGIS Maps SDK for JavaScript is available via CDN and npm, but this tutorial is based on CDN. The $arcgis.import global function accepts a module path or array of module paths, and returns a promise that resolves with the requested modules. This function can only be used when working with the CDN; otherwise, use the standard import syntax. To learn more about the SDK’s different modules, visit the References page.

Use the document.querySelector() method to access the map and sketch components.

37 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Query a feature layer (spatial)</title>

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

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

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

</head>


<body>

  <arcgis-map basemap="topo" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-sketch creation-mode="update" slot="top-right"></arcgis-sketch>

  </arcgis-map>

  <script type="module">

    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


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

  </script>
5 collapsed lines

</body>


</html>

Wait for the map to be ready with viewOnReady.

39 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Query a feature layer (spatial)</title>

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

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

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

</head>


<body>

  <arcgis-map basemap="topo" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-sketch creation-mode="update" slot="top-right"></arcgis-sketch>

  </arcgis-map>

  <script type="module">

    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


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

    await viewElement.viewOnReady();

6 collapsed lines
  </script>

</body>


</html>

Create an event listener that will update each time a graphic is drawn. You’ll use this to run a new query in the next step.

45 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Query a feature layer (spatial)</title>

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

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

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

</head>


<body>

  <arcgis-map basemap="topo" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-sketch creation-mode="update" slot="top-right"></arcgis-sketch>

  </arcgis-map>

  <script type="module">

    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


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

    await viewElement.viewOnReady();

    arcgisSketch.addEventListener("arcgisUpdate", (event) => {

    });

6 collapsed lines
  </script>

</body>


</html>

Create a feature layer to query

Use the FeatureLayer class to perform a query against the LA County Parcels feature layer . Since you are performing a server-side query, the feature layer does not need to be added to the map.

Create a parcelLayer and set the url property to access the feature layer in the feature service.

Feature layers are referenced by an index number at the end of the url. To determine the index number, visit the LA County Parcels feature service . In this case the index is 0.

51 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Query a feature layer (spatial)</title>

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

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

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

</head>


<body>

  <arcgis-map basemap="topo" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-sketch creation-mode="update" slot="top-right"></arcgis-sketch>

  </arcgis-map>

  <script type="module">

    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


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

    await viewElement.viewOnReady();

    arcgisSketch.addEventListener("arcgisUpdate", (event) => {

    });

    // Reference query layer
    const parcelLayer = new FeatureLayer({
      url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
    });
7 collapsed lines

  </script>

</body>


</html>

Execute the query

Define a parcelQuery and use the FeatureLayer queryFeatures method to execute a query.

Create a queryFeaturelayer function with geometry as a parameter and define parcelQuery. Set the spatialRelationship to intersects and use the geometry from the sketch component. Limit the attributes returned by setting the outFields property to a list of fields. Lastly, set returnGeometry to true so the feature geometries can be displayed.

56 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Query a feature layer (spatial)</title>

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

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

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

</head>


<body>

  <arcgis-map basemap="topo" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-sketch creation-mode="update" slot="top-right"></arcgis-sketch>

  </arcgis-map>

  <script type="module">

    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


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

    await viewElement.viewOnReady();

    arcgisSketch.addEventListener("arcgisUpdate", (event) => {

    });

    // Reference query layer
    const parcelLayer = new FeatureLayer({
      url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
    });

    function queryFeaturelayer(geometry) {
      console.log("Querying parcels...");

      const parcelQuery = {
        spatialRelationship: "intersects", // Relationship operation to apply
        geometry: geometry, // The sketch feature geometry
        outFields: ["APN", "UseType", "TaxRateCity", "Roll_LandValue"], // Attributes to return
        returnGeometry: true,
      };

    }
7 collapsed lines

  </script>

</body>


</html>

Call the queryFeatures method on the parcelLayer using the parameters defined in the parcelQuery element. To view the number of features returned, write the result length to the console. This will be updated in the next step.

56 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Query a feature layer (spatial)</title>

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

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

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

</head>


<body>

  <arcgis-map basemap="topo" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-sketch creation-mode="update" slot="top-right"></arcgis-sketch>

  </arcgis-map>

  <script type="module">

    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


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

    await viewElement.viewOnReady();

    arcgisSketch.addEventListener("arcgisUpdate", (event) => {

    });

    // Reference query layer
    const parcelLayer = new FeatureLayer({
      url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
    });

    function queryFeaturelayer(geometry) {
      console.log("Querying parcels...");

      const parcelQuery = {
        spatialRelationship: "intersects", // Relationship operation to apply
        geometry: geometry, // The sketch feature geometry
        outFields: ["APN", "UseType", "TaxRateCity", "Roll_LandValue"], // Attributes to return
        returnGeometry: true,
      };

      parcelLayer
        .queryFeatures(parcelQuery)
        .then((results) => {

          console.log("Feature count: " + results.features.length);

        })
        .catch((error) => {
          console.log(error);
        });

    }
7 collapsed lines

  </script>

</body>


</html>

Update the sketch event handler to call the queryFeatureLayer function every time a graphic is sketched on the map. It will also listen for any reshape or move changes made to the graphic.

47 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Query a feature layer (spatial)</title>

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

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

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

</head>


<body>

  <arcgis-map basemap="topo" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-sketch creation-mode="update" slot="top-right"></arcgis-sketch>

  </arcgis-map>

  <script type="module">

    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


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

    await viewElement.viewOnReady();

    arcgisSketch.addEventListener("arcgisUpdate", (event) => {

      // Create
      if (event.detail.state === "start") {
        queryFeaturelayer(event.detail.graphics[0].geometry);
      }
      if (event.detail.state === "complete") {
        // Clear the graphic when a user clicks off of it or sketches new one
        arcgisSketch.layer.remove(event.detail.graphics[0]);
      }
      // Change
      if (
        event.detail.toolEventInfo &&
        (event.detail.toolEventInfo.type === "scale-stop" ||
          event.detail.toolEventInfo.type === "reshape-stop" ||
          event.detail.toolEventInfo.type === "move-stop")
      ) {
        queryFeaturelayer(event.detail.graphics[0].geometry);
      }

    });
35 collapsed lines

    // Reference query layer
    const parcelLayer = new FeatureLayer({
      url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
    });

    function queryFeaturelayer(geometry) {
      console.log("Querying parcels...");

      const parcelQuery = {
        spatialRelationship: "intersects", // Relationship operation to apply
        geometry: geometry, // The sketch feature geometry
        outFields: ["APN", "UseType", "TaxRateCity", "Roll_LandValue"], // Attributes to return
        returnGeometry: true,
      };

      parcelLayer
        .queryFeatures(parcelQuery)
        .then((results) => {

          console.log("Feature count: " + results.features.length);

        })
        .catch((error) => {
          console.log(error);
        });

    }

  </script>

</body>


</html>

Use the component to draw a graphic . At the bottom left, click Console to view the number of features returned from the query.

Display features

To display the parcel features returned from the query, add them to the map as polygon graphics . Before the graphics are added, define a symbol and a pop-up so that the attributes can be displayed when a feature is clicked.

Create a displayResults function. Define a symbol and popupTemplate variable to style and display a pop-up for polygon graphics . The attributes referenced match the outFields specified in the query earlier.

68 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Query a feature layer (spatial)</title>

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

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

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

</head>


<body>

  <arcgis-map basemap="topo" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-sketch creation-mode="update" slot="top-right"></arcgis-sketch>

  </arcgis-map>

  <script type="module">

    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


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

    await viewElement.viewOnReady();

    arcgisSketch.addEventListener("arcgisUpdate", (event) => {

    });

    // Reference query layer
    const parcelLayer = new FeatureLayer({
      url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
    });

    function queryFeaturelayer(geometry) {
      console.log("Querying parcels...");

      const parcelQuery = {
        spatialRelationship: "intersects", // Relationship operation to apply
        geometry: geometry, // The sketch feature geometry
        outFields: ["APN", "UseType", "TaxRateCity", "Roll_LandValue"], // Attributes to return
        returnGeometry: true,
      };

    }

    // Show features (graphics)
    function displayResults(results) {

      // Create a blue polygon
      const symbol = {
        type: "simple-fill",
        color: [20, 130, 200, 0.5],
        outline: {
          color: "white",
          width: 0.5,
        },
      };

      const popupTemplate = {
        title: "Parcel {APN}",
        content:
          "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}",
      };

    }
7 collapsed lines

  </script>

</body>


</html>

Assign the symbol and popupTemplate elements to each feature returned from the query.

81 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Query a feature layer (spatial)</title>

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

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

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

</head>


<body>

  <arcgis-map basemap="topo" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-sketch creation-mode="update" slot="top-right"></arcgis-sketch>

  </arcgis-map>

  <script type="module">

    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


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

    await viewElement.viewOnReady();

    arcgisSketch.addEventListener("arcgisUpdate", (event) => {

    });

    // Reference query layer
    const parcelLayer = new FeatureLayer({
      url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
    });

    function queryFeaturelayer(geometry) {
      console.log("Querying parcels...");

      const parcelQuery = {
        spatialRelationship: "intersects", // Relationship operation to apply
        geometry: geometry, // The sketch feature geometry
        outFields: ["APN", "UseType", "TaxRateCity", "Roll_LandValue"], // Attributes to return
        returnGeometry: true,
      };

    }

    // Show features (graphics)
    function displayResults(results) {

      // Create a blue polygon
      const symbol = {
        type: "simple-fill",
        color: [20, 130, 200, 0.5],
        outline: {
          color: "white",
          width: 0.5,
        },
      };

      const popupTemplate = {
        title: "Parcel {APN}",
        content:
          "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}",
      };

      // Set symbol and popup
      results.features.forEach((feature) => {
        feature.symbol = symbol;
        feature.popupTemplate = popupTemplate;
      });
9 collapsed lines

    }

  </script>

</body>


</html>

Clear the existing graphics and pop-up, and then add the new features to the map as graphics.

87 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Query a feature layer (spatial)</title>

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

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

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

</head>


<body>

  <arcgis-map basemap="topo" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-sketch creation-mode="update" slot="top-right"></arcgis-sketch>

  </arcgis-map>

  <script type="module">

    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


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

    await viewElement.viewOnReady();

    arcgisSketch.addEventListener("arcgisUpdate", (event) => {

    });

    // Reference query layer
    const parcelLayer = new FeatureLayer({
      url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
    });

    function queryFeaturelayer(geometry) {
      console.log("Querying parcels...");

      const parcelQuery = {
        spatialRelationship: "intersects", // Relationship operation to apply
        geometry: geometry, // The sketch feature geometry
        outFields: ["APN", "UseType", "TaxRateCity", "Roll_LandValue"], // Attributes to return
        returnGeometry: true,
      };

    }

    // Show features (graphics)
    function displayResults(results) {

      // Create a blue polygon
      const symbol = {
        type: "simple-fill",
        color: [20, 130, 200, 0.5],
        outline: {
          color: "white",
          width: 0.5,
        },
      };

      const popupTemplate = {
        title: "Parcel {APN}",
        content:
          "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}",
      };

      // Set symbol and popup
      results.features.forEach((feature) => {
        feature.symbol = symbol;
        feature.popupTemplate = popupTemplate;
      });

      // Clear display
      viewElement.closePopup();
      viewElement.graphics.removeAll();
      // Add features to graphics layer
      viewElement.graphics.addMany(results.features);
9 collapsed lines

    }

  </script>

</body>


</html>

Update the queryFeaturelayer function to call the displayResults function. Remove the console.log.

84 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Query a feature layer (spatial)</title>

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

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

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

</head>


<body>

  <arcgis-map basemap="topo" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-sketch creation-mode="update" slot="top-right"></arcgis-sketch>

  </arcgis-map>

  <script type="module">

    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


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

    await viewElement.viewOnReady();

    arcgisSketch.addEventListener("arcgisUpdate", (event) => {

      // Create
      if (event.detail.state === "start") {
        queryFeaturelayer(event.detail.graphics[0].geometry);
      }
      if (event.detail.state === "complete") {
        // Clear the graphic when a user clicks off of it or sketches new one
        arcgisSketch.layer.remove(event.detail.graphics[0]);
      }
      // Change
      if (
        event.detail.toolEventInfo &&
        (event.detail.toolEventInfo.type === "scale-stop" ||
          event.detail.toolEventInfo.type === "reshape-stop" ||
          event.detail.toolEventInfo.type === "move-stop")
      ) {
        queryFeaturelayer(event.detail.graphics[0].geometry);
      }

    });

    // Reference query layer
    const parcelLayer = new FeatureLayer({
      url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
    });

    function queryFeaturelayer(geometry) {
      console.log("Querying parcels...");

      const parcelQuery = {
        spatialRelationship: "intersects", // Relationship operation to apply
        geometry: geometry, // The sketch feature geometry
        outFields: ["APN", "UseType", "TaxRateCity", "Roll_LandValue"], // Attributes to return
        returnGeometry: true,
      };

      parcelLayer
        .queryFeatures(parcelQuery)
        .then((results) => {

          console.log("Feature count: " + results.features.length);

          displayResults(results);

        })
        .catch((error) => {
          console.log(error);
        });
42 collapsed lines

    }

    // Show features (graphics)
    function displayResults(results) {

      // Create a blue polygon
      const symbol = {
        type: "simple-fill",
        color: [20, 130, 200, 0.5],
        outline: {
          color: "white",
          width: 0.5,
        },
      };

      const popupTemplate = {
        title: "Parcel {APN}",
        content:
          "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}",
      };

      // Set symbol and popup
      results.features.forEach((feature) => {
        feature.symbol = symbol;
        feature.popupTemplate = popupTemplate;
      });

      // Clear display
      viewElement.closePopup();
      viewElement.graphics.removeAll();
      // Add features to graphics layer
      viewElement.graphics.addMany(results.features);

    }

  </script>

</body>


</html>

Run the app

In CodePen, run your code to display the map.

When you use the component to sketch a feature on the map, the spatial query runs against the feature layer and returns all parcels that intersect the sketched feature.

What’s next?

Learn how to use additional SDK features and ArcGIS services in these tutorials: