Query a feature layer (spatial)

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 use the Sketch widget 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

You need a free ArcGIS developer account to access your dashboard and API keys. The API key must be scoped to access the services used in this tutorial.

Steps

Create a new pen

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

Set the API key

To access ArcGIS services, you need an API key.

  1. Go to your dashboard to get an API key.

  2. In CodePen, set the apiKey to your key, so it can be used to access basemap layer and location services.

        
    Change line
    1
    2
    3
    4
    esriConfig.apiKey = "YOUR_API_KEY";
    const map = new Map({
      basemap: "arcgis-topographic" // Basemap layer service
    });
    

Add modules

  1. In the require statement, add the Sketch, GraphicsLayer, and FeatureLayer modules.

    The ArcGIS API for JavaScript uses AMD modules. The require function is used to load modules so they can be used in the main function. It's important to keep the module references and function parameters in the same order.

                                                                                                                                             
    Add line.Add line.Add line.Change line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>ArcGIS API for JavaScript Tutorials: Query a feature layer (spatial)</title>
      <style>
        html, body, #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
      <script>
        require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
    
          "esri/widgets/Sketch",
          "esri/layers/GraphicsLayer",
          "esri/layers/FeatureLayer"
    
        ], function(esriConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) {
          esriConfig.apiKey = "YOUR_API_KEY";
          const map = new Map({
            basemap: "arcgis-topographic" //Basemap layer service
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.03000], //Longitude, latitude
            zoom: 13
          // Add sketch widget
          const graphicsLayerSketch = new GraphicsLayer();
          const sketch = new Sketch({
            layer: graphicsLayerSketch,
            view: view,
            creationMode: "update" // Auto-select
          view.ui.add(sketch, "top-right");
          // Add sketch events to listen for and execute query
          sketch.on("update", (event) => {
            // Create
            if (event.state === "start") {
              queryFeaturelayer(event.graphics[0].geometry);
            if (event.state === "complete"){
              graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one
            // Change
            if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) {
              queryFeaturelayer(event.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) {
            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
            .then((results) => {
              console.log("Feature count: " + results.features.length)
            }).catch((error) => {
              console.log(error);
          // 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: .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.map((feature) => {
              return feature;
            // Clear display
           // Add features to graphics layer
      </script>
    </head>
    <body>
      <div id="viewDiv"></div>
    </body>
    </html>

Create a sketch widget

Use the Sketch and GraphicsLayer classes 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 widget and update the query accordingly.

  1. Create a graphicsLayerSketch and add it to the map.

                                                                                                                                             
    Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>ArcGIS API for JavaScript Tutorials: Query a feature layer (spatial)</title>
      <style>
        html, body, #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
      <script>
        require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
          "esri/widgets/Sketch",
          "esri/layers/GraphicsLayer",
          "esri/layers/FeatureLayer"
        ], function(esriConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) {
          esriConfig.apiKey = "YOUR_API_KEY";
          const map = new Map({
            basemap: "arcgis-topographic" //Basemap layer service
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.03000], //Longitude, latitude
            zoom: 13
          });
    
          // Add sketch widget
          const graphicsLayerSketch = new GraphicsLayer();
          map.add(graphicsLayerSketch);
          const sketch = new Sketch({
            layer: graphicsLayerSketch,
            view: view,
            creationMode: "update" // Auto-select
          view.ui.add(sketch, "top-right");
          // Add sketch events to listen for and execute query
          sketch.on("update", (event) => {
            // Create
            if (event.state === "start") {
              queryFeaturelayer(event.graphics[0].geometry);
            if (event.state === "complete"){
              graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one
            // Change
            if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) {
              queryFeaturelayer(event.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) {
            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
            .then((results) => {
              console.log("Feature count: " + results.features.length)
            }).catch((error) => {
              console.log(error);
          // 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: .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.map((feature) => {
              return feature;
            // Clear display
           // Add features to graphics layer
      </script>
    </head>
    <body>
      <div id="viewDiv"></div>
    </body>
    </html>
  2. Create a sketch widget and set the layer property to graphicsLayerSketch. Add the widget to the top-right of the view.

                                                                                                                                             
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>ArcGIS API for JavaScript Tutorials: Query a feature layer (spatial)</title>
      <style>
        html, body, #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
      <script>
        require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
          "esri/widgets/Sketch",
          "esri/layers/GraphicsLayer",
          "esri/layers/FeatureLayer"
        ], function(esriConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) {
          esriConfig.apiKey = "YOUR_API_KEY";
          const map = new Map({
            basemap: "arcgis-topographic" //Basemap layer service
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.03000], //Longitude, latitude
            zoom: 13
          // Add sketch widget
          const graphicsLayerSketch = new GraphicsLayer();
          map.add(graphicsLayerSketch);
    
          const sketch = new Sketch({
            layer: graphicsLayerSketch,
            view: view,
            creationMode: "update" // Auto-select
          });
    
          view.ui.add(sketch, "top-right");
          // Add sketch events to listen for and execute query
          sketch.on("update", (event) => {
            // Create
            if (event.state === "start") {
              queryFeaturelayer(event.graphics[0].geometry);
            if (event.state === "complete"){
              graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one
            // Change
            if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) {
              queryFeaturelayer(event.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) {
            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
            .then((results) => {
              console.log("Feature count: " + results.features.length)
            }).catch((error) => {
              console.log(error);
          // 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: .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.map((feature) => {
              return feature;
            // Clear display
           // Add features to graphics layer
      </script>
    </head>
    <body>
      <div id="viewDiv"></div>
    </body>
    </html>
  3. Create an event listener that will update each time a graphic is drawn. This will run a new query.

                                                                                                                                             
    Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>ArcGIS API for JavaScript Tutorials: Query a feature layer (spatial)</title>
      <style>
        html, body, #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
      <script>
        require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
          "esri/widgets/Sketch",
          "esri/layers/GraphicsLayer",
          "esri/layers/FeatureLayer"
        ], function(esriConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) {
          esriConfig.apiKey = "YOUR_API_KEY";
          const map = new Map({
            basemap: "arcgis-topographic" //Basemap layer service
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.03000], //Longitude, latitude
            zoom: 13
          // Add sketch widget
          const graphicsLayerSketch = new GraphicsLayer();
          const sketch = new Sketch({
            layer: graphicsLayerSketch,
            view: view,
            creationMode: "update" // Auto-select
          view.ui.add(sketch, "top-right");
    
          // Add sketch events to listen for and execute query
          sketch.on("update", (event) => {
    
            // Create
            if (event.state === "start") {
              queryFeaturelayer(event.graphics[0].geometry);
            if (event.state === "complete"){
              graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one
            // Change
            if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) {
              queryFeaturelayer(event.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) {
            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
            .then((results) => {
              console.log("Feature count: " + results.features.length)
            }).catch((error) => {
              console.log(error);
          // 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: .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.map((feature) => {
              return feature;
            // Clear display
           // Add features to graphics layer
      </script>
    </head>
    <body>
      <div id="viewDiv"></div>
    </body>
    </html>
  4. You should see the sketch widget at the top right of the view. Click on one of the options in the widget to draw on the map.

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.

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

                                                                                                                                             
    Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>ArcGIS API for JavaScript Tutorials: Query a feature layer (spatial)</title>
      <style>
        html, body, #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
      <script>
        require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
          "esri/widgets/Sketch",
          "esri/layers/GraphicsLayer",
          "esri/layers/FeatureLayer"
        ], function(esriConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) {
          esriConfig.apiKey = "YOUR_API_KEY";
          const map = new Map({
            basemap: "arcgis-topographic" //Basemap layer service
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.03000], //Longitude, latitude
            zoom: 13
          // Add sketch widget
          const graphicsLayerSketch = new GraphicsLayer();
          const sketch = new Sketch({
            layer: graphicsLayerSketch,
            view: view,
            creationMode: "update" // Auto-select
          view.ui.add(sketch, "top-right");
          // Add sketch events to listen for and execute query
          sketch.on("update", (event) => {
    
            // Create
            if (event.state === "start") {
              queryFeaturelayer(event.graphics[0].geometry);
            if (event.state === "complete"){
              graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one
            // Change
            if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) {
              queryFeaturelayer(event.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) {
            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
            .then((results) => {
              console.log("Feature count: " + results.features.length)
            }).catch((error) => {
              console.log(error);
          // 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: .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.map((feature) => {
              return feature;
            // Clear display
           // Add features to graphics layer
      </script>
    </head>
    <body>
      <div id="viewDiv"></div>
    </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 widget. Limit the attributes returned by setting the outFields property to a list of fields. Lastly, set returnGeometry to true so the feature geometriescan be displayed.

                                                                                                                                             
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>ArcGIS API for JavaScript Tutorials: Query a feature layer (spatial)</title>
      <style>
        html, body, #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
      <script>
        require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
          "esri/widgets/Sketch",
          "esri/layers/GraphicsLayer",
          "esri/layers/FeatureLayer"
        ], function(esriConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) {
          esriConfig.apiKey = "YOUR_API_KEY";
          const map = new Map({
            basemap: "arcgis-topographic" //Basemap layer service
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.03000], //Longitude, latitude
            zoom: 13
          // Add sketch widget
          const graphicsLayerSketch = new GraphicsLayer();
          const sketch = new Sketch({
            layer: graphicsLayerSketch,
            view: view,
            creationMode: "update" // Auto-select
          view.ui.add(sketch, "top-right");
          // Add sketch events to listen for and execute query
          sketch.on("update", (event) => {
            // Create
            if (event.state === "start") {
              queryFeaturelayer(event.graphics[0].geometry);
            if (event.state === "complete"){
              graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one
            // Change
            if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) {
              queryFeaturelayer(event.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) {
    
            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
            };
    
            .then((results) => {
              console.log("Feature count: " + results.features.length)
            }).catch((error) => {
              console.log(error);
          }
          // 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: .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.map((feature) => {
              return feature;
            // Clear display
           // Add features to graphics layer
      </script>
    </head>
    <body>
      <div id="viewDiv"></div>
    </body>
    </html>
  2. 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.

                                                                                                                                             
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>ArcGIS API for JavaScript Tutorials: Query a feature layer (spatial)</title>
      <style>
        html, body, #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
      <script>
        require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
          "esri/widgets/Sketch",
          "esri/layers/GraphicsLayer",
          "esri/layers/FeatureLayer"
        ], function(esriConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) {
          esriConfig.apiKey = "YOUR_API_KEY";
          const map = new Map({
            basemap: "arcgis-topographic" //Basemap layer service
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.03000], //Longitude, latitude
            zoom: 13
          // Add sketch widget
          const graphicsLayerSketch = new GraphicsLayer();
          const sketch = new Sketch({
            layer: graphicsLayerSketch,
            view: view,
            creationMode: "update" // Auto-select
          view.ui.add(sketch, "top-right");
          // Add sketch events to listen for and execute query
          sketch.on("update", (event) => {
            // Create
            if (event.state === "start") {
              queryFeaturelayer(event.graphics[0].geometry);
            if (event.state === "complete"){
              graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one
            // Change
            if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) {
              queryFeaturelayer(event.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) {
    
            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);
            });
    
          }
          // 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: .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.map((feature) => {
              return feature;
            // Clear display
           // Add features to graphics layer
      </script>
    </head>
    <body>
      <div id="viewDiv"></div>
    </body>
    </html>
  3. Update the 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.

                                                                                                                                             
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>ArcGIS API for JavaScript Tutorials: Query a feature layer (spatial)</title>
      <style>
        html, body, #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
      <script>
        require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
          "esri/widgets/Sketch",
          "esri/layers/GraphicsLayer",
          "esri/layers/FeatureLayer"
        ], function(esriConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) {
          esriConfig.apiKey = "YOUR_API_KEY";
          const map = new Map({
            basemap: "arcgis-topographic" //Basemap layer service
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.03000], //Longitude, latitude
            zoom: 13
          // Add sketch widget
          const graphicsLayerSketch = new GraphicsLayer();
          const sketch = new Sketch({
            layer: graphicsLayerSketch,
            view: view,
            creationMode: "update" // Auto-select
          view.ui.add(sketch, "top-right");
          // Add sketch events to listen for and execute query
          sketch.on("update", (event) => {
    
            // Create
            if (event.state === "start") {
              queryFeaturelayer(event.graphics[0].geometry);
            }
            if (event.state === "complete"){
              graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one
            }
            // Change
            if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) {
              queryFeaturelayer(event.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) {
            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
            .then((results) => {
              console.log("Feature count: " + results.features.length)
            }).catch((error) => {
              console.log(error);
          // 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: .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.map((feature) => {
              return feature;
            // Clear display
           // Add features to graphics layer
      </script>
    </head>
    <body>
      <div id="viewDiv"></div>
    </body>
    </html>
  4. Use the widget 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 view 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.

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

                                                                                                                                             
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>ArcGIS API for JavaScript Tutorials: Query a feature layer (spatial)</title>
      <style>
        html, body, #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
      <script>
        require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
          "esri/widgets/Sketch",
          "esri/layers/GraphicsLayer",
          "esri/layers/FeatureLayer"
        ], function(esriConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) {
          esriConfig.apiKey = "YOUR_API_KEY";
          const map = new Map({
            basemap: "arcgis-topographic" //Basemap layer service
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.03000], //Longitude, latitude
            zoom: 13
          // Add sketch widget
          const graphicsLayerSketch = new GraphicsLayer();
          const sketch = new Sketch({
            layer: graphicsLayerSketch,
            view: view,
            creationMode: "update" // Auto-select
          view.ui.add(sketch, "top-right");
          // Add sketch events to listen for and execute query
          sketch.on("update", (event) => {
            // Create
            if (event.state === "start") {
              queryFeaturelayer(event.graphics[0].geometry);
            if (event.state === "complete"){
              graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one
            // Change
            if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) {
              queryFeaturelayer(event.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) {
            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
            };
    
            .then((results) => {
              console.log("Feature count: " + results.features.length)
            }).catch((error) => {
              console.log(error);
          }
    
          // 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: .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.map((feature) => {
              return feature;
            // Clear display
           // Add features to graphics layer
          }
      </script>
    </head>
    <body>
      <div id="viewDiv"></div>
    </body>
    </html>
  2. Assign the symbol and popupTemplate elements to each feature returned from the query.

                                                                                                                                             
    Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>ArcGIS API for JavaScript Tutorials: Query a feature layer (spatial)</title>
      <style>
        html, body, #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
      <script>
        require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
          "esri/widgets/Sketch",
          "esri/layers/GraphicsLayer",
          "esri/layers/FeatureLayer"
        ], function(esriConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) {
          esriConfig.apiKey = "YOUR_API_KEY";
          const map = new Map({
            basemap: "arcgis-topographic" //Basemap layer service
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.03000], //Longitude, latitude
            zoom: 13
          // Add sketch widget
          const graphicsLayerSketch = new GraphicsLayer();
          const sketch = new Sketch({
            layer: graphicsLayerSketch,
            view: view,
            creationMode: "update" // Auto-select
          view.ui.add(sketch, "top-right");
          // Add sketch events to listen for and execute query
          sketch.on("update", (event) => {
            // Create
            if (event.state === "start") {
              queryFeaturelayer(event.graphics[0].geometry);
            if (event.state === "complete"){
              graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one
            // Change
            if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) {
              queryFeaturelayer(event.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) {
            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
            .then((results) => {
              console.log("Feature count: " + results.features.length)
            }).catch((error) => {
              console.log(error);
          // 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: .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.map((feature) => {
              feature.symbol = symbol;
              feature.popupTemplate = popupTemplate;
              return feature;
            });
            // Clear display
           // Add features to graphics layer
      </script>
    </head>
    <body>
      <div id="viewDiv"></div>
    </body>
    </html>
  3. Clear the existing graphics and pop-up, and then add the new features to the view as graphics.

                                                                                                                                             
    Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>ArcGIS API for JavaScript Tutorials: Query a feature layer (spatial)</title>
      <style>
        html, body, #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
      <script>
        require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
          "esri/widgets/Sketch",
          "esri/layers/GraphicsLayer",
          "esri/layers/FeatureLayer"
        ], function(esriConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) {
          esriConfig.apiKey = "YOUR_API_KEY";
          const map = new Map({
            basemap: "arcgis-topographic" //Basemap layer service
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.03000], //Longitude, latitude
            zoom: 13
          // Add sketch widget
          const graphicsLayerSketch = new GraphicsLayer();
          const sketch = new Sketch({
            layer: graphicsLayerSketch,
            view: view,
            creationMode: "update" // Auto-select
          view.ui.add(sketch, "top-right");
          // Add sketch events to listen for and execute query
          sketch.on("update", (event) => {
            // Create
            if (event.state === "start") {
              queryFeaturelayer(event.graphics[0].geometry);
            if (event.state === "complete"){
              graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one
            // Change
            if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) {
              queryFeaturelayer(event.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) {
            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
            .then((results) => {
              console.log("Feature count: " + results.features.length)
            }).catch((error) => {
              console.log(error);
          // 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: .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.map((feature) => {
              feature.symbol = symbol;
              feature.popupTemplate = popupTemplate;
              return feature;
            });
    
            // Clear display
            view.popup.close();
            view.graphics.removeAll();
           // Add features to graphics layer
            view.graphics.addMany(results.features);
      </script>
    </head>
    <body>
      <div id="viewDiv"></div>
    </body>
    </html>
  4. Update the queryFeaturelayer function to call the displayResults function. Remove the console.log.

                                                                                                                                             
    Remove lineAdd line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>ArcGIS API for JavaScript Tutorials: Query a feature layer (spatial)</title>
      <style>
        html, body, #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
      <script>
        require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
          "esri/widgets/Sketch",
          "esri/layers/GraphicsLayer",
          "esri/layers/FeatureLayer"
        ], function(esriConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) {
          esriConfig.apiKey = "YOUR_API_KEY";
          const map = new Map({
            basemap: "arcgis-topographic" //Basemap layer service
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.03000], //Longitude, latitude
            zoom: 13
          // Add sketch widget
          const graphicsLayerSketch = new GraphicsLayer();
          const sketch = new Sketch({
            layer: graphicsLayerSketch,
            view: view,
            creationMode: "update" // Auto-select
          view.ui.add(sketch, "top-right");
          // Add sketch events to listen for and execute query
          sketch.on("update", (event) => {
            // Create
            if (event.state === "start") {
              queryFeaturelayer(event.graphics[0].geometry);
            if (event.state === "complete"){
              graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one
            // Change
            if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) {
              queryFeaturelayer(event.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) {
            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);
          // 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: .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.map((feature) => {
              return feature;
            // Clear display
           // Add features to graphics layer
      </script>
    </head>
    <body>
      <div id="viewDiv"></div>
    </body>
    </html>

Run the app

In CodePen, run your code to display the map.

When you use the widget 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 API features and ArcGIS services in these tutorials:

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.