Query a feature layer | ArcGIS for Developers

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 JSBin and create a new bin.

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

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

});

Run the code. View the console to ensure features were returned.

Add the features to the map

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

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.

Get driving directions

Build an app with the Directions widget to find a route and display turn-by-turn directions.

10 minutes Start Lab

Display a web map

Build an app that loads and displays a web map.

10 minutes Start Lab

Create a 2D map with a layer

Build an app that displays a basemap and a feature layer.

10 minutes Start Lab

Create a 3D scene with a layer

Build an app that displays a basemap and a feature layer in 3D

10 minutes Start Lab

Style a feature layer

Apply symbol colors and styles based on attribute values.

10 minutes Start Lab

Configure a pop-up

Format and style pop-ups for feature layers.

15 minutes Start Lab

Search and geocode

Build an app that can search for places and find addresses.

10 minutes Start Lab

Create graphics

Build an app that displays graphics from latitude and longitude coordinates.

10 minutes Start Lab

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'

Explore more JavaScript labs Explore more Query & Edit labs

10 minutes

Requirements

Solution

Explore Labs

Feedback

Overview

Steps

Create a starter app

Create and execute the query

Add the features to the map

Congratulations, you're done!

Related Labs

Challenge

Experiment with more SQL queries