Query a feature layer (spatial)

Learn how to execute a spatial query to access features A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more from a feature layer A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more .

A feature layer A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more can contain a large number of features A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more stored in ArcGIS ArcGIS is the brand name for all of the desktop, server, and developer products and technologies offered by Esri. Learn more . 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 Attributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service. Learn more , geometry A geometry is a geometric shape, such as a point, polyline, or polygon, that contains one or more coordinates and a spatial reference. Learn more , 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 A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more and then perform a spatial query against a feature layer A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more . 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

1. To get started, either complete the Display a map tutorial or use this pen .

Get an access token

You need an access token An access token is an authorization string that provides access to secure ArcGIS content, data, and services. Its capabilities are determined by the privileges it supports. It is obtained by implementing API key authentication, User authentication, or App authentication. Learn more with the correct privileges to access the location services ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more used in this tutorial.

1. Go to the Create an API key tutorial and create an API key An API key is a long-lived access token created using API key credentials. They are valid for up to one year and are typically embedded directly into client applications. Learn more with the following privilege(s) Privileges are a set of permissions assigned to ArcGIS accounts, developer credentials, and applications that grant access to secure resources and functionality in ArcGIS. Learn more :
   
   • 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 API key credentials are an item that contains the parameters used to create and manage long-lived access tokens for API key authentication. They are a type of developer credential. Learn more access to the layer item. Learn more in Item access privileges.
2. 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 A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more . The graphic will be added to the map in a graphics layer A graphics overlay is a client-side, temporary container of graphics to display on a map view or scene view. Learn more . The event handler will listen for a change from the Sketch component and update the query accordingly.

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

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

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

   More info

   The ArcGIS Maps SDK for JavaScript ArcGIS Maps SDK for JavaScript, previously known as ArcGIS API for JavaScript, is a developer product for building mapping and spatial analysis applications for the web. Learn more 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>

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

3. Create an event listener that will update each time a graphic A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more 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 A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more . Since you are performing a server-side query, the feature layer does not need to be added to the map.

1. Create a parcelLayer and set the url property to access the feature layer A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more in the feature service.

   More info

   Feature layers A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more are referenced by an index number at the end of the url. To determine the index number, visit the LA County Parcels feature service A feature service is a data service that provides access to spatial and non-spatial data in feature layers, feature layer views, and tables. Learn more . 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.

1. 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 A geometry is a geometric shape, such as a point, polyline, or polygon, that contains one or more coordinates and a spatial reference. Learn more 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>

2. Call the queryFeatures method on the parcelLayer using the parameters defined in the parcelQuery element. To view the number of features A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more 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>

3. Update the sketch event handler to call the queryFeatureLayer function every time a graphic A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more 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>

4. Use the component to draw a graphic A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more . At the bottom left, click Console to view the number of features A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more returned from the query.

Display features

To display the parcel features A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more returned from the query, add them to the map as polygon graphics A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more . Before the graphics are added, define a symbol and a pop-up so that the attributes Attributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service. Learn more can be displayed when a feature is clicked.

1. Create a displayResults function. Define a symbol and popupTemplate variable to style and display a pop-up for polygon graphics A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more . The attributes Attributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service. Learn more 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>

2. Assign the symbol and popupTemplate elements to each feature A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more 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>

3. Clear the existing graphics and pop-up, and then add the new features A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more 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>

4. 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 A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more 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:

• Query a feature layer (SQL)
• Edit feature data
• Import data as a feature layer