Query a feature layer

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

1. Go to the JavaScript Starter App.

2. In CodePen, click Fork and save the pen as ArcGIS DevLabs: Query a feature layer.

Create and execute a query

1. In the require statement, 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) {
   

2. 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);
       });
   

3. Run the code and view the console to ensure features were returned.

Add the features to the map

1. 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);
       });
   

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

Challenge

Experiment with more SQL queries

LENGTH_MI < 5
LENGTH_MI > 5
ELEV_GAIN < 250
ELEV_GAIN > 250
USE_BIKE = 'Yes'
USE_BIKE = 'No'
USE_HIKE = 'Yes'
USE_EQU = 'Yes'