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 SQL query to find all of the "Backbone" trails and then add these to the map.

Steps

Create a starter app

  1. Go to JSBin and create a new bin.

  2. Add the following code to create a basic starter app.

    <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>DevLabs - Query a layer and add graphics</title>
        <style>
          html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
          }
        </style>
        <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
        <script src="https://js.arcgis.com/4.6/"></script>
        <script>
          require([
              "esri/Map",
              "esri/views/MapView",
              "dojo/domReady!"
            ], function(Map, MapView) {
    
            var map = new Map({
              basemap: "topo-vector"
            });
    
            var view = new MapView({
              container: "viewDiv",
              map: map
            });
    
          });
        </script>
      </head>
      <body>
        <div id="viewDiv"></div>
      </body>
    </html>
    

Create and execute the query

  1. In the JS code, add modules and code to execute the query.

    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) {
    
      var map = new Map({
        basemap: "topo-vector"
      });
    
      var view = new MapView({
        container: "viewDiv",
        map: map
      });
    
      //*** 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);
        });
    
    });
    
  2. Run the code. View the console to ensure features were returned.

Add the features to the map

  1. In the JS code, update the code to add the features as graphics and then and zoom to them.

      // Execute the query
      queryTask.execute(query)
        .then(function(result){
    
          //*** ADD ***//
    
          //console.log(result.features.length)
          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 trail graphics to view the popup information.

Congratulations, you're done!

Your app should look something like this.

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'