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 hosted 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 You need an ArcGIS account to access the developer dashboard and create an API key .
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 location services , you need an API key or OAuth 2.0 access token . To learn how to create and scope your key, visit the Create an API key tutorial.
Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.
In CodePen , update apiKey to use your key.
Use dark colors for code blocks
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
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" />
< title > Esri Leaflet </ title >
<!-- Load Leaflet from CDN -->
< link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" crossorigin = "" />
< script src = "https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin = "" > </ script >
<!-- Load Esri Leaflet from CDN -->
< script src = "https://unpkg.com/esri-leaflet@^3.0.8/dist/esri-leaflet.js" > </ script >
< script src = "https://unpkg.com/esri-leaflet-vector@3.1.3/dist/esri-leaflet-vector.js" > </ script >
< style >
body {
margin : 0 ;
padding : 0 ;
}
#map {
position : absolute;
top : 0 ;
bottom : 0 ;
right : 0 ;
left : 0 ;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px ;
color : #323232 ;
}
</ style >
</ head >
< body >
< div id = "map" > </ div >
< script >
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "ArcGIS:Streets" ;
const map = L.map( "map" , {
minZoom : 2
}).setView([ 34.02 , - 118.805 ], 13 );
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
</ script >
</ body >
</ html >
Query the feature layer Add the following code to add a select element for the where clauses and to query the features each time the select element value changes.
Add an L.Control with the SQL where clauses. Create the feature layer and add it to the map. Bind the popup to the layer. Create a handler to set the where clause on the layer. Use dark colors for code blocks
Show more lines
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. 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. 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. 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. 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
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" />
< title > Esri Leaflet </ title >
<!-- Load Leaflet from CDN -->
< link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" crossorigin = "" />
< script src = "https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin = "" > </ script >
<!-- Load Esri Leaflet from CDN -->
< script src = "https://unpkg.com/esri-leaflet@^3.0.8/dist/esri-leaflet.js" > </ script >
< script src = "https://unpkg.com/esri-leaflet-vector@3.1.3/dist/esri-leaflet-vector.js" > </ script >
< style >
body {
margin : 0 ;
padding : 0 ;
}
#map {
position : absolute;
top : 0 ;
bottom : 0 ;
right : 0 ;
left : 0 ;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px ;
color : #323232 ;
}
</ style >
</ head >
< body >
< div id = "map" > </ div >
< script >
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "ArcGIS:Streets" ;
const map = L.map( "map" , {
minZoom : 2
}).setView([ 34.02 , - 118.805 ], 13 );
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
// Create the select dropdown and add to the top-right of the map
L.Control.QueryControl = L.Control.extend({
onAdd : function ( map ) {
// Array of query where clauses
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"
];
// Create select
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 ( map ) {
// Nothing to do here
}
});
L.control.queryControl = function ( opts ) {
return new L.Control.QueryControl(opts);
};
L.control
.queryControl({
position : "topright"
})
.addTo(map);
// Add the Feature Layer to the 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 ,
where : "1 = 0" ,
style : function ( feature ) {
// https://leafletjs.com/reference-1.7.1.html#path-option
return {
opacity : 1.0 ,
weight : 0.5 ,
color : "white" ,
fillColor : "#19A1E6" ,
fillOpacity : 0.5
};
}
})
.addTo(map);
// Setup the Popup
parcels.bindPopup( function ( layer ) {
return L.Util.template( "<b>Parcel {APN}</b>" + "Type: {UseType} <br>" + "Tax Rate City: {TaxRateCity}" , layer.feature.properties);
});
// When the selected where clause changes, set the filter on the layer
const select = document .getElementById( "whereClauseSelect" );
select.addEventListener( "change" , () => {
if (select.value !== "" ) {
parcels.setWhere(select.value);
}
});
</ script >
</ body >
</ html >
Show more lines
Run the code In CodePen , run your code to display the map.
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 ArcGIS location services in these tutorials:
