Learn how to execute a spatial query to access polygon features from a feature service .
A feature layer can contain a large number of features stored in ArcGIS . To access a subset of these features, you can execute an SQL or spatial query, either together or individually. The results can contain the attributes , geometry , or both for each record. SQL and spatial queries are useful when a feature layer is very large and you want to access only a subset of its data.
In this tutorial, you sketch a feature on the map and use ArcGIS REST JS to perform a spatial query against the LA County Parcels hosted feature layer . The layer contains ±2.4 million features. The spatial query returns all of the parcels that intersect the sketched feature. A pop-up is also used to display feature attributes.
Prerequisites You need an ArcGIS Developer or ArcGIS Online 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 api Key
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
55
56
57
58
const map = L.map( "map" , {
minZoom : 2
})
map.setView([ 34.02 , - 118.805 ], 13 );
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "arcgis/streets" ;
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
Add script references In addition to Leaflet and Esri Leaflet, reference the Leaflet Geoman plugin. The plugin allows you to create point , line , and polygon graphics on the map.
Add <script>
and <link>
tags to reference the libraries.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
<!-- Load Leaflet from CDN -->
< link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin = "" />
< script src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin = "" > </ script >
<!-- Load Esri Leaflet from CDN -->
< script src = "https://unpkg.com/esri-leaflet@3.0.10/dist/esri-leaflet.js" > </ script >
< script src = "https://unpkg.com/esri-leaflet-vector@4.1.0/dist/esri-leaflet-vector.js" > </ script >
<!-- Load Leaflet Geoman from CDN -->
< link rel = "stylesheet" href = "https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css" />
< script src = "https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js" > </ script >
Add the parcels layer Use the Feature Layer
class to perform a query against the LA County Parcels feature layer . Since you are performing a server-side query, you can hide the features.
Create a Feature Layer
object with the LA County Parcels hosted feature layer as its source.
Expand
Use dark colors for code blocks
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
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
var 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);
Hide all features in the layer using a layer definition .
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
var 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" // Hide the feature layer until queried
})
.addTo(map);
You can use the Leaflet Geoman toolbar to create point, line, and polygon geometries via a user interface.
Add map.pm.add Controls
to create the Geoman toolbar. Hide all buttons except for draw Marker
, draw Polyline
, and draw Polygon
.
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
var 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" // Hide the feature layer until queried
})
.addTo(map);
map.pm.addControls({
position : 'topleft' ,
// Customize the visible tools
editControls : false ,
drawRectangle : false ,
drawCircle : false ,
drawCircleMarker : false ,
drawText : false
});
Set map.pm.set Global Options
to define the style properties for the drawn geometries.
Expand
Use dark colors for code blocks
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
map.pm.addControls({
position : 'topleft' ,
// Customize the visible tools
editControls : false ,
drawRectangle : false ,
drawCircle : false ,
drawCircleMarker : false ,
drawText : false
});
map.pm.setGlobalOptions({
pathOptions : {
weight : 2 ,
color : "#4d4d4d" ,
fillColor : "#808080" ,
fillOpacity : 0.2 ,
dashArray :[ 4 , 4 ]}
});
Click Run at the top right to test your code. You should be able to sketch a point, line, or polygon.
Get the drawn feature Leaflet Geoman emits a p m: create
event when you have finished sketching a feature. You can listen to this event to respond to the newly created feature.
Add an event handler for the p m: create
event. Format its output to access the new layer
object.
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
map.pm.setGlobalOptions({
pathOptions : {
weight : 2 ,
color : "#4d4d4d" ,
fillColor : "#808080" ,
fillOpacity : 0.2 ,
dashArray :[ 4 , 4 ]}
});
map.on( "pm:create" , ( {shape,layer} ) => {
});
Remove the previous Layer
with the remove
method. Set previous Layer
to the newly drawn layer
.
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
var previousLayer;
map.on( "pm:create" , ( {shape,layer} ) => {
if (previousLayer) {
previousLayer.remove();
}
previousLayer = layer;
});
Run the query Use the Feature Layer.query
method to find features in the LA County Parcels feature layer that instersect the sketched geometry.
Limit to returned features The maximum number of features returned by a query for hosted feature layers is 2000, except when using ids
without setting a limit
. To learn more, visit the ArcGIS services documentation .
Convert the sketched feature into GeoJSON to access its geometry. Create a query on the parcels layer that returns all parcels intersecting the sketched geometry.
Expand
Use dark colors for code blocks
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
var previousLayer;
map.on( "pm:create" , ( {shape,layer} ) => {
if (previousLayer) {
previousLayer.remove();
}
previousLayer = layer;
var feature = layer.toGeoJSON();
parcels
.query()
.intersects(feature.geometry)
.limit( 2000 )
});
Return the feature ids
. Display the results with the set Where
method.
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
var feature = layer.toGeoJSON();
parcels
.query()
.intersects(feature.geometry)
.limit( 2000 )
.ids( function ( error, queryResult ) {
parcels.setWhere( "OBJECTID IN (" + queryResult.join( "," ) + ")" );
});
Create a pop-up using bind Popup
. Set its contents dynamically based on the currently clicked feature.
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
var feature = layer.toGeoJSON();
parcels
.query()
.intersects(feature.geometry)
.limit( 2000 )
.ids( function ( error, queryResult ) {
parcels.setWhere( "OBJECTID IN (" + queryResult.join( "," ) + ")" );
});
});
parcels.bindPopup( function ( layer ) {
return L.Util.template( "<b>Parcel {APN}</b>" + "Type: {UseType} <br>" + "Tax Rate City: {TaxRateCity}" , layer.feature.properties);
});
Run the app In CodePen , run your code to display the map.
When you click on the map to draw a polygon , a spatial query will run against the feature layer and display all land parcels that intersect the boundary of the feature . You can click on a parcel to see a pop-up with information about the parcel.
What's next? Learn how to use additional ArcGIS location services in these tutorials: