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 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.
Prerequisites You need a free ArcGIS developer account to access your dashboard and API keys . The API key must be scoped to access the services used in this tutorial.
Steps Create a new pen To get started, either complete the Display a map tutorial or use this pen . Set the API key To access ArcGIS services , you need an API key .
Go to your dashboard to get an API key .
In CodePen , set the api Key
to your key, so it can be used to access basemap layer and location services.
Use dark colors for code blocks
Change line
1
2
3
4
esriConfig.apiKey = "YOUR_API_KEY" ;
const map = new Map ({
basemap : "arcgis-topographic" // Basemap layer service
});
Add modules In the require
statement, add the Feature Layer
module.
More info The ArcGIS Maps SDK for JavaScript is available as AMD modules and ES modules , but this tutorial is based on AMD. The AMD require
function uses references to determine which modules will be loaded – for example, you can specify "esri/Map"
for loading the Map module. After the modules are loaded, they are passed as parameters (e.g. Map
) to the callback function where they can be used in your application. It is important to keep the module references and callback parameters in the same order. For more information on the different types of modules, visit the Introduction to Tooling guide topic.
Expand
Use dark colors for code blocks
Add line. Change line
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
require ([
"esri/config" ,
"esri/Map" ,
"esri/views/MapView" ,
"esri/layers/FeatureLayer" ,
], function ( esriConfig, Map , MapView, FeatureLayer ) {
Create a SQL selector ArcGIS feature layers support a standard SQL query where clause . Use an HTML select element to provide a list of SQL queries for the LA County Parcel feature layer.
Create a parcel Type
array of SQL queries. Assign the where Clause
element to a SQL query from the array.
Expand
Use dark colors for code blocks
Add line. Add line. Add line.
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 view = new MapView({
container : "viewDiv" ,
map : map,
center : [- 118.80543 , 34.03000 ], //Longitude, latitude
zoom : 13
});
// SQL query array
const parcelLayerSQL = [ "Choose a SQL where clause..." , "UseType = 'Residential'" , "UseType = 'Government'" , "UseType = 'Irrigated Farm'" , "TaxRateArea = 10853" , "TaxRateArea = 10860" , "TaxRateArea = 08637" , "Roll_LandValue > 1000000" , "Roll_LandValue < 1000000" ];
let whereClause = parcelLayerSQL[ 0 ];
Create a parent select
element and add option
elements for each SQL query. Add some some basic styles to the elements.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
// SQL query array
const parcelLayerSQL = [ "Choose a SQL where clause..." , "UseType = 'Residential'" , "UseType = 'Government'" , "UseType = 'Irrigated Farm'" , "TaxRateArea = 10853" , "TaxRateArea = 10860" , "TaxRateArea = 08637" , "Roll_LandValue > 1000000" , "Roll_LandValue < 1000000" ];
let whereClause = parcelLayerSQL[ 0 ];
// Add SQL UI
const select = document .createElement( "select" , "" );
select.setAttribute( "class" , "esri-widget esri-select" );
select.setAttribute( "style" , "width: 200px; font-family: 'Avenir Next'; font-size: 1em" );
parcelLayerSQL.forEach( function ( query ) {
let option = document .createElement( "option" );
option.innerHTML = query;
option.value = query;
select.appendChild(option);
});
Add the select
element to the top-right
corner of the view
.
Expand
Use dark colors for code blocks
Add line.
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
// Add SQL UI
const select = document .createElement( "select" , "" );
select.setAttribute( "class" , "esri-widget esri-select" );
select.setAttribute( "style" , "width: 200px; font-family: 'Avenir Next'; font-size: 1em" );
parcelLayerSQL.forEach( function ( query ) {
let option = document .createElement( "option" );
option.innerHTML = query;
option.value = query;
select.appendChild(option);
});
view.ui.add(select, "top-right" );
Add an event listener to listen for select
element changes.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line.
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
view.ui.add(select, "top-right" );
// Listen for changes
select.addEventListener( 'change' , ( event ) => {
whereClause = event.target.value;
});
Verify that the select
element is created.
Create a feature layer to query Use the Feature Layer
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.
Create a parcel Layer
and set the url
property to access the feature layer in the feature service.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line.
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
// Listen for changes
select.addEventListener( 'change' , ( 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" ,
});
Execute a query Use the query Features
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 exceeded Transfer Limit
, and then use the resultOffset parameter to make multiple requests with the appropriate offset values. To learn more, visit Query Layer .
Create a query Feature Layer
function with extent
parameter. Define a parcel Query
element and set the where
property to the where Clause
. Set the spatial Property
to only return features that intersect the geometry
, which is restricted to the visible extent
of the map. The out Fields
property will return only a subset of the attributes . Lastly, set return Geometry
to true
so that the features can be displayed.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
// 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 query Features
method on the parcel Layer
using parcel Query
. 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 blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
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 query Feature Layer
function when the selector changes.
Expand
Use dark colors for code blocks
Add line.
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
// Listen for changes
select.addEventListener( 'change' , ( event ) => {
whereClause = event.target.value;
queryFeatureLayer(view.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.
Display features 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 display Results
function with results
as a parameter. Define a symbol
and popup Template
variable to style and display a pop-up for polygon graphics . The attributes referenced match the out Fields
specified in the query earlier.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
}).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 : .5
},
};
const popupTemplate = {
title : "Parcel {APN}" ,
content : "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}"
};
}
Assign the symbol
and popup Template
elements to each feature returned from the query.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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 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 blocks
Add line. Add line. Add line. Add line. Add line.
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
// Assign styles and popup to features
results.features.map( ( feature ) => {
feature.symbol = symbol;
feature.popupTemplate = popupTemplate;
return feature;
});
// Clear display
view.popup.close();
view.graphics.removeAll();
// Add features to graphics layer
view.graphics.addMany(results.features);
Update the query Feature Layer
function to call the display Results
function. Remove the console.log
.
Expand
Use dark colors for code blocks
Remove line Add line.
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
parcelLayer.queryFeatures(parcelQuery)
.then( ( results ) => {
console .log( "Feature count: " + results.features.length)
displayResults(results);
}).catch( ( error ) => {
console .log(error.error);
});
Run the app 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: