Query a feature layer
Execute a SQL query and add features to the map as graphics.
Overview
You will learn: how to execute a SQL query against a feature layer and add the features to the map.
With the ArcGIS API for JavaScript you can query a feature layer to retrieve a sub-set of data for your application. In this scenario the layer is referenced but not added to the map. The query can contain a SQL where clause, a geometric feature and a spatial relationship. Once you create the Query you pass it to a Query Task to retrieve data from a feature layer. When features are returned you can add them to your map as graphics or use them to perform other operations in your application.
In this lab you will create a SQL query to find all of the "Backbone" trails and then add them to the map.
Steps
Create a starter app
-
Go to the JavaScript Starter App.
-
In CodePen, click Fork and save the pen as
ArcGIS DevLabs: Query a feature layer.
Create and execute a query
-
In the
requirestatement, add a reference to the Query, QueryTask and Graphic module.require([ "esri/Map", "esri/views/MapView", //*** ADD ***// "esri/tasks/support/Query", "esri/tasks/QueryTask", "esri/Graphic", "dojo/domReady!" //*** ADD ***// ], function(Map, MapView, Query, QueryTask, Graphic) { -
In the
function, create a Query and set the where (whereclause) to"TRL_NAME like '%backbone%'"to return all of the Backbone trails. Set the object to return all of the fields and the geometry. Create a QueryTask to reference the Trails layer and then execute the query.//*** ADD ***// // Define query SQL expression var query = new Query(); query.where = "TRL_NAME like '%backbone%'" query.outFields = ["*"]; query.returnGeometry = true; // Define the query task var queryTask = new QueryTask({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0" }); // Execute the query queryTask.execute(query) .then(function(result){ console.log(result.features.length) }) .otherwise(function(e){ console.log(e); }); -
Run the code and view the console to ensure features were returned.
Add the features to the map
-
In the
function, update the code to loop through all of the features and create a Graphic for each feature and add it to the graphics of the view. Zoom to all of the graphics at the end.// Execute the query queryTask.execute(query) .then(function(result){ //console.log(result.features.length) //*** ADD ***// result.features.forEach(function(item){ var g = new Graphic({ geometry: item.geometry, attributes: item.attributes, symbol: { type: "simple-line", color: "black", width: 1.2, style: "short-dot" }, popupTemplate: { title: "{TRL_NAME}", content: "{*}" // All of the fields } }); view.graphics.add(g); }); // Zoom to the features view.goTo({ target: view.graphics }); }) .otherwise(function(e){ console.log(e); }); -
Run the code and the map should zoom to the Backbone trails. Try clicking on the features to view the pop-up.
Congratulations, you're done!
Your app should look something like this.
Next labs
Add a layer from an item
Load a layer from an ArcGIS Online item and add it to a map.
Display a styled vector basemap
Build an app that displays a vector basemap with custom styles.
Display a web map
Build an app that loads and displays a web map.
Add layers to a 3D scene
Build an app that displays feature layers in 3D.
Challenge
Experiment with more SQL queries
Try changing the where clause to the ones below and re-run the query task:
LENGTH_MI < 5
LENGTH_MI > 5
ELEV_GAIN < 250
ELEV_GAIN > 250
USE_BIKE = 'Yes'
USE_BIKE = 'No'
USE_HIKE = 'Yes'
USE_EQU = 'Yes'