Learn how to execute a SQL query to access polygon features from 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 either a SQL or spatial query, or both at the same time. You can return feature attributes, geometry, or both attributes and geometry for each record. SQL and spatial queries are useful when you want to access only a subset of your hosted data.
In this tutorial, you will perform server-side SQL queries to return a subset of features in 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.
NoteTo learn more about hosted feature layers, visit Hosted feature layers in the Mapping and location services guide. To learn more about services, visit Feature service.
Prerequisites ArcGIS Accounts:You need an ArcGIS Location Platform or ArcGIS Online account.
Steps Create a new penYou need an access token with the correct privileges to access the location services used in this tutorial.
esriConfig.apiKey to your access token.
Use dark colors for code blocks
1
2
3
4
5
6
7
8
9
var esriConfig = {
apiKey: "YOUR_ACCESS_TOKEN",
};
To learn about other ways to get an access token, go to Types of authentication.
Create a SQL selectorArcGIS feature layers support a standard SQL query where clause. Use a Calcite Select component to provide a list of SQL queries for the LA County Parcels feature layer.
NoteTo learn more about SQL support in ArcGIS Online, visit Standardized SQL functions.
Add an arcgis-placement component after the arcgis-zoom component within the <arcgis-map> to place the selector in the top-right corner of the map.
Expand
Use dark colors for code blocks1
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<arcgis-map basemap="arcgis/topographic" center="-118.805, 34.027" zoom="13">
<arcgis-zoom position="top-left"></arcgis-zoom>
<arcgis-placement position="top-right">
</arcgis-placement>
</arcgis-map>
Add a Calcite Select component within the arcgis-placement component. This component has child option components, each with a different SQL query.
Expand
Use dark colors for code blocks1
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<arcgis-placement position="top-right">
<calcite-select id="sqlSelect">
<calcite-option
id="defaultOption"
value="1=0"
label="Choose a SQL where clause..."></calcite-option>
<calcite-option
value="UseType = 'Residential'"
label="UseType = 'Residential'"></calcite-option>
<calcite-option
value="UseType = 'Government'"
label="UseType = 'Government'"></calcite-option>
<calcite-option
value="UseType = 'Irrigated Farm'"
label="UseType = 'Irrigated Farm'"></calcite-option>
<calcite-option value="TaxRateArea = 10853" label="TaxRateArea = 10853"></calcite-option>
<calcite-option value="TaxRateArea = 10860" label="TaxRateArea = 10860"></calcite-option>
<calcite-option value="TaxRateArea = 08637" label="TaxRateArea = 08637"></calcite-option>
<calcite-option
value="Roll_LandValue > 1000000"
label="Roll_LandValue > 1000000"></calcite-option>
<calcite-option
value="Roll_LandValue < 1000000"
label="Roll_LandValue < 1000000"></calcite-option>
</calcite-select>
</arcgis-placement>
Verify that the select component is created.
Add a <script> tag in the <body> following the <arcgis-map> component. Use $arcgis.import() to add the FeatureLayer module.
The ArcGIS Maps SDK for JavaScript is available via CDN and npm, but this tutorial is based on CDN. The $arcgis.import global function accepts a module path or array of module paths, and returns a promise that resolves with the requested modules. This function can only be used when working with the CDN; otherwise, use the standard import syntax. To learn more about the SDK's different modules, visit the References page.
Use the document.querySelector() method to access the map, select, and the default option components. Create a whereClause variable to store the first option value.
Expand
Use dark colors for code blocks1
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<script type="module">
const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
const viewElement = document.querySelector("arcgis-map");
const selectFilter = document.querySelector("#sqlSelect");
const defaultOption = document.querySelector("#defaultOption");
let whereClause = defaultOption.value;
</script>
Create an event listener to listen for the map component's arcgisViewReadyChange event.
Expand
Use dark colors for code blocks1
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<script type="module">
const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
const viewElement = document.querySelector("arcgis-map");
const selectFilter = document.querySelector("#sqlSelect");
const defaultOption = document.querySelector("#defaultOption");
let whereClause = defaultOption.value;
viewElement.addEventListener("arcgisViewReadyChange", () => {
});
</script>
Create an event listener to listen for the select component changes and update the whereClause variable to the selected value.
Expand
Use dark colors for code blocks1
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
viewElement.addEventListener("arcgisViewReadyChange", () => {
// Event listener
selectFilter.addEventListener("calciteSelectChange", (event) => {
whereClause = event.target.value;
});
});
Use the FeatureLayer class to access the LA County Parcel feature layer. Since you are performing a server-side query, the feature layer does not need to be added to the map.
parcelLayer and set the url property to access the feature layer in the feature service.
Expand
Use dark colors for code blocks1
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
viewElement.addEventListener("arcgisViewReadyChange", () => {
// Event listener
selectFilter.addEventListener("calciteSelectChange", (event) => {
whereClause = event.target.value;
});
// Get query layer and set up query
const parcelLayer = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
});
});
Use the queryFeatures method to perform a SQL query against the feature layer. The Query will be autocast when the method is called.
The maximum number of features returned by a query for hosted feature layers is 2000. To return more, you need to detect the request exceeded the maximum feature amount with exceededTransferLimit, and then use the resultOffset parameter to make multiple requests with the appropriate offset values. To learn more, visit Query Layer.
Create a queryFeatureLayer function with extent parameter. Define a parcelQuery element and set the where property to the whereClause. Set the spatialProperty to only return features that intersect the geometry, which is restricted to the visible extent of the map. The outFields property will return only a subset of the attributes. Lastly, set returnGeometry to true so that the features can be displayed.
Expand
Use dark colors for code blocks1
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
// Get query layer and set up query
const parcelLayer = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
});
function queryFeatureLayer(extent) {
const parcelQuery = {
where: whereClause, // Set by select element
spatialRelationship: "intersects", // Relationship operation to apply
geometry: extent, // Restricted to visible extent of the map
outFields: ["APN", "UseType", "TaxRateCity", "Roll_LandValue"], // Attributes to return
returnGeometry: true,
};
}
Call the queryFeatures method on the parcelLayer using parcelQuery. To view the number of features returned, write the result length to the console. This will be updated in the next step.
Expand
Use dark colors for code blocks1
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
function queryFeatureLayer(extent) {
const parcelQuery = {
where: whereClause, // Set by select element
spatialRelationship: "intersects", // Relationship operation to apply
geometry: extent, // Restricted to visible extent of the map
outFields: ["APN", "UseType", "TaxRateCity", "Roll_LandValue"], // Attributes to return
returnGeometry: true,
};
parcelLayer
.queryFeatures(parcelQuery)
.then((results) => {
console.log("Feature count: " + results.features.length);
})
.catch((error) => {
console.log(error.error);
});
}
Update the event handler to call the queryFeatureLayer function when the selector changes.
Expand
Use dark colors for code blocks1
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
// Event listener
selectFilter.addEventListener("calciteSelectChange", (event) => {
whereClause = event.target.value;
queryFeatureLayer(viewElement.extent);
});
At the top-right, click Run. Choose a SQL query from the selector. At the bottom left, click Console to view the number of features returned from each query.
To display the features returned from the SQL query, add them to the view as polygon graphics. Define a pop-up also so the attributes can be displayed when features are clicked.
Create a displayResults function with results as a parameter. Define a symbol and popupTemplate variable to style and display a pop-up for polygon graphics. The attributes referenced match the outFields specified in the query earlier.
Expand
Use dark colors for code blocks1
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
})
.catch((error) => {
console.log(error.error);
});
}
function displayResults(results) {
// Create a blue polygon
const symbol = {
type: "simple-fill",
color: [20, 130, 200, 0.5],
outline: {
color: "white",
width: 0.5,
},
};
const popupTemplate = {
title: "Parcel {APN}",
content:
"Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}",
};
}
Assign the symbol and popupTemplate elements to each feature returned from the query.
Expand
Use dark colors for code blocks1
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
const popupTemplate = {
title: "Parcel {APN}",
content:
"Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}",
};
// Assign styles and popup to features
results.features.map((feature) => {
feature.symbol = symbol;
feature.popupTemplate = popupTemplate;
return feature;
});
Clear the existing graphics and pop-up, and then add the new features returned to the view.
Expand
Use dark colors for code blocks1
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
// Assign styles and popup to features
results.features.map((feature) => {
feature.symbol = symbol;
feature.popupTemplate = popupTemplate;
return feature;
});
// Clear display
viewElement.closePopup();
viewElement.graphics.removeAll();
// Add features to graphics layer
viewElement.graphics.addMany(results.features);
Update the queryFeatureLayer function to call the displayResults function. Remove the console.log.
Expand
Use dark colors for code blocks1
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
parcelLayer
.queryFeatures(parcelQuery)
.then((results) => {
console.log("Feature count: " + results.features.length);
displayResults(results);
})
.catch((error) => {
console.log(error.error);
});
In CodePen, run your code to display the map.
When the map displays, you should be able to choose a SQL query from the selector. The resulting features will be added to the map as polygon graphics. The SQL query is applied to the visible extent of the map.
What's next?Learn how to use additional API features and ArcGIS services in these tutorials:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4