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
- To get started, either complete the Display a map tutorial or .
Set the API key
To access ArcGIS services, you need an API key.
Go to your dashboard to get an API key.
In CodePen, set the
apiKey
to your key, so it can be used to access basemap layer and location services.Use dark colors for code blocks Change line 1 2 3 4
esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-topographic" // Basemap layer service });
Add modules
In the
require
statement, add theSketch
,GraphicsLayer
, andFeatureLayer
modules.The ArcGIS API for JavaScript uses AMD modules. The
require
function is used to load modules so they can be used in the mainfunction
. It's important to keep the module references and function parameters in the same order.Use dark colors for code blocks 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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 }; 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) => { 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>
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.
Create a
graphicsLayerSketch
and add it to themap
.Use dark colors for code blocks 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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 }; 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) => { 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>Create a
sketch
widget and set thelayer
property tographicsLayerSketch
. Add the widget to the top-right of theview
.Use dark colors for code blocks 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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 }; 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) => { 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>Create an event listener that will update each time a graphic is drawn. This will run a new query.
Use dark colors for code blocks 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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 }; 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) => { 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>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.
Create a
parcelLayer
and set theurl
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
.Use dark colors for code blocks 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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 }; 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) => { 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>
Execute the query
Define a parcelQuery
and use the FeatureLayer
queryFeatures
method to execute a query.
Create a
queryFeaturelayer
function withgeometry
as a parameter and defineparcelQuery
. Set thespatialRelationship
tointersects
and use thegeometry
from the sketch widget. Limit the attributes returned by setting theoutFields
property to a list of fields. Lastly, setreturnGeometry
totrue
so the feature geometriescan be displayed.Use dark colors for code blocks 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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 }; 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) => { 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>Call the
queryFeatures
method on theparcelLayer
using the parameters defined in theparcelQuery
element. To view the number of features returned, write the result length to the console. This will be updated in the next step.Use dark colors for code blocks 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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 }; 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) => { 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>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.Use dark colors for code blocks 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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 }; 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) => { 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>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.
Create a
displayResults
function. Define asymbol
andpopupTemplate
variable to style and display a pop-up for polygon graphics. The attributes referenced match theoutFields
specified in the query earlier.Use dark colors for code blocks 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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 }; 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) => { 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>Assign the
symbol
andpopupTemplate
elements to each feature returned from the query.Use dark colors for code blocks 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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 }; 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) => { 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>Clear the existing graphics and pop-up, and then add the new features to the
view
as graphics.Use dark colors for code blocks 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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 }; 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) => { 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>Update the
queryFeaturelayer
function to call thedisplayResults
function. Remove theconsole.log
.Use dark colors for code blocks Remove 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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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 }; 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) => { 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>
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: