Query a feature layer (SQL)

Learn how to execute a SQL query to access polygon features in 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 a SQL or spatial query, or both at the same time. You can also return the attributes, geometry, or both attributes and geometry for each record. SQL and spatial queries are useful when a feature layer is very large and you just want to access a subset of the data.

In this tutorial, you perform server-side SQL queries to return a subset of the features from the LA County Parcel feature layer. The feature layer contains over 2.4 million features. The resulting features are displayed as graphics on the map. A pop-up is also used to display feature attributes.

Prerequisites

Steps

Get the starter app

Select a type of authentication and follow the steps to create a new app.

Set up authentication

Set developer credentials

Use the API key or OAuth developer credentials so your application can access ArcGIS services.

Create a SQL selector

ArcGIS feature layers support a standard SQL query where clause. Use a drop-down select element to provide a list of SQL queries for the LA County Parcels feature layer.

1. Create a QueryControl using the L.Control class. Create an on onAdd function that contains each where clause. The selector containing the where clauses will not be removed from the map.

   Expand

   Use dark colors for code blocks

   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
         L.esri.Vector.vectorBasemapLayer(basemapEnum, {
           token: accessToken
         }).addTo(map);
   
   
   
         L.Control.QueryControl = L.Control.extend({
           onAdd: function () {
             const whereClauses = [
               "Choose a WHERE clause...",
               "UseType = 'Residential'",
               "UseType = 'Government'",
               "UseType = 'Irrigated Farm'",
               "TaxRateArea = 10853",
               "TaxRateArea = 10860",
               "TaxRateArea = 08637",
               "Roll_LandValue > 1000000",
               "Roll_LandValue < 1000000"
             ];
   
           },
   
           onRemove: function () {
             // Nothing to do here
           }
         });
   

   Expand

2. Create a select dropdown to display the whereClauses.

   Expand

   Use dark colors for code blocks

   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
         L.Control.QueryControl = L.Control.extend({
           onAdd: function () {
             const whereClauses = [
               "Choose a WHERE clause...",
               "UseType = 'Residential'",
               "UseType = 'Government'",
               "UseType = 'Irrigated Farm'",
               "TaxRateArea = 10853",
               "TaxRateArea = 10860",
               "TaxRateArea = 08637",
               "Roll_LandValue > 1000000",
               "Roll_LandValue < 1000000"
             ];
   
             const select = L.DomUtil.create("select", "");
             select.setAttribute("id", "whereClauseSelect");
             select.setAttribute("style", "font-size: 16px;padding:4px 8px;");
             whereClauses.forEach(function (whereClause) {
               let option = L.DomUtil.create("option");
               option.innerHTML = whereClause;
               select.appendChild(option);
             });
             return select;
   
           },
   
           onRemove: function () {
             // Nothing to do here
           }
         });
   

   Expand

3. Add the QueryControl to the map.

   Expand

   Use dark colors for code blocks

   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
           onRemove: function () {
             // Nothing to do here
           }
         });
   
         L.control.queryControl = function (opts) {
           return new L.Control.QueryControl(opts);
         };
   
         L.control
           .queryControl({
             position: "topright"
           })
           .addTo(map);
   

   Expand

Add the parcel layer

Use the FeatureLayer class to access the LA County Parcel feature layer. Since you are performing a server-side query, you can hide the features until a SQL query is selected.

1. Create a FeatureLayer and set the url with the LA County Parcel service URL.

   Expand

   Use dark colors for code blocks

   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
         L.control
           .queryControl({
             position: "topright"
           })
           .addTo(map);
   
         const parcels = L.esri
           .featureLayer({
             url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
             simplifyFactor: 0.5,
             precision: 4,
   
           })
           .addTo(map);
   

   Expand

2. Hide all features in the layer using a layer definition.

   Expand

   Use dark colors for code blocks

   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
         const parcels = L.esri
           .featureLayer({
             url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
             simplifyFactor: 0.5,
             precision: 4,
   
             where: "1 = 0"
   
           })
           .addTo(map);
   

   Expand

Execute the query

The parcels feature layer layer definition changes when you choose an option from the selector. You can access the chosen where clause with the value property of the select element.

1. Add a change event handler to the select element. Inside, use setWhere to change the layer definition.

   Expand

   Use dark colors for code blocks

   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
         const parcels = L.esri
           .featureLayer({
             url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
             simplifyFactor: 0.5,
             precision: 4,
   
             where: "1 = 0"
   
           })
           .addTo(map);
   
         const select = document.getElementById("whereClauseSelect");
         select.addEventListener("change", () => {
           if (select.value !== "") {
             parcels.setWhere(select.value);
           }
         });
   

   Expand

2. Create a pop-up using the bindPopup method. Set its contents dynamically based on the currently clicked feature.

   Expand

   Use dark colors for code blocks

   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
         const select = document.getElementById("whereClauseSelect");
         select.addEventListener("change", () => {
           if (select.value !== "") {
             parcels.setWhere(select.value);
           }
         });
   
         parcels.bindPopup(function (layer) {
           return L.Util.template("<b>Parcel {APN}</b>" + "Type: {UseType} <br>" + "Tax Rate City: {TaxRateCity}", layer.feature.properties);
         });
   
       </script>
   

   Expand

Run the app

Run the app.

When the map displays, you should be able to use the query selector to display parcels. Click on a parcel to show a pop-up with the feature's attributes.

What's next?

Learn how to use additional location services in these tutorials: