Learn how to access and display point , line , and polygon features in feature layers .
A feature layer is a dataset in a hosted feature service . Each feature layer contains features with a single geometry type (point , line , or polygon ), and a set of attributes . You can use feature layers to store, access, and manage large amounts of geographic data for your applications. You get features from a feature layer by accessing its URL.
In this tutorial, you use URLs to access and display three different hosted feature layers :
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 apiKey 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 FeatureLayer
More info The ArcGIS API for JavaScript uses AMD modules . The require function is used to load modules so they can be used in the main function. It's important to keep the module references and function parameters in the same order.
Use dark colors for code blocks
Show more lines
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
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" >
< title > ArcGIS API for JavaScript Tutorials: Add a feature layer </ title >
< style >
html , body , #viewDiv {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
}
</ style >
< link rel = "stylesheet" href = "https://js.arcgis.com/4.23/esri/themes/light/main.css" >
< script src = "https://js.arcgis.com/4.23/" > </ script >
< script >
require ([
"esri/config" ,
"esri/Map" ,
"esri/views/MapView" ,
"esri/layers/FeatureLayer"
], function ( esriConfig, Map , MapView, FeatureLayer ) {
esriConfig.apiKey = "YOUR_API_KEY" ;
const map = new Map ({
basemap : "arcgis-topographic"
});
const view = new MapView({
container : "viewDiv" ,
map : map,
center : [- 118.80543 , 34.02700 ],
zoom : 13
});
//Trailheads feature layer (points)
const trailheadsLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
});
map.add(trailheadsLayer);
//Trails feature layer (lines)
const trailsLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
});
map.add(trailsLayer, 0 );
// Parks and open spaces (polygons)
const parksLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0"
});
map.add(parksLayer, 0 );
});
</ script >
</ head >
< body >
< div id = "viewDiv" > </ div >
</ body >
</ html >
Show more lines
Add a point feature layer Point features are typically displayed in a feature layer on top of all other layers. Use the FeatureLayerTrailheads URL and add features to the map.
Go to the Trailheads URL and browse the properties of the layer. Make note of the Name , Type , Drawing Info , and Fields properties.
In CodePen , create a FeatureLayerurl
Use dark colors for code blocks
Show more lines
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
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" >
< title > ArcGIS API for JavaScript Tutorials: Add a feature layer </ title >
< style >
html , body , #viewDiv {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
}
</ style >
< link rel = "stylesheet" href = "https://js.arcgis.com/4.23/esri/themes/light/main.css" >
< script src = "https://js.arcgis.com/4.23/" > </ script >
< script >
require ([
"esri/config" ,
"esri/Map" ,
"esri/views/MapView" ,
"esri/layers/FeatureLayer"
], function ( esriConfig, Map , MapView, FeatureLayer ) {
esriConfig.apiKey = "YOUR_API_KEY" ;
const map = new Map ({
basemap : "arcgis-topographic"
});
const view = new MapView({
container : "viewDiv" ,
map : map,
center : [- 118.80543 , 34.02700 ],
zoom : 13
});
//Trailheads feature layer (points)
const trailheadsLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
});
map.add(trailheadsLayer);
//Trails feature layer (lines)
const trailsLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
});
map.add(trailsLayer, 0 );
// Parks and open spaces (polygons)
const parksLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0"
});
map.add(parksLayer, 0 );
});
</ script >
</ head >
< body >
< div id = "viewDiv" > </ div >
</ body >
</ html >
Show more lines
Add trailheadsLayer to the map.
Use dark colors for code blocks
Show more lines
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
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" >
< title > ArcGIS API for JavaScript Tutorials: Add a feature layer </ title >
< style >
html , body , #viewDiv {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
}
</ style >
< link rel = "stylesheet" href = "https://js.arcgis.com/4.23/esri/themes/light/main.css" >
< script src = "https://js.arcgis.com/4.23/" > </ script >
< script >
require ([
"esri/config" ,
"esri/Map" ,
"esri/views/MapView" ,
"esri/layers/FeatureLayer"
], function ( esriConfig, Map , MapView, FeatureLayer ) {
esriConfig.apiKey = "YOUR_API_KEY" ;
const map = new Map ({
basemap : "arcgis-topographic"
});
const view = new MapView({
container : "viewDiv" ,
map : map,
center : [- 118.80543 , 34.02700 ],
zoom : 13
});
//Trailheads feature layer (points)
const trailheadsLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
});
map.add(trailheadsLayer);
//Trails feature layer (lines)
const trailsLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
});
map.add(trailsLayer, 0 );
// Parks and open spaces (polygons)
const parksLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0"
});
map.add(parksLayer, 0 );
});
</ script >
</ head >
< body >
< div id = "viewDiv" > </ div >
</ body >
</ html >
Show more lines
Run the app to view the Trailheads layer in the map.
Add a line feature layer Line features are typically displayed in a feature layer before points . Use the FeatureLayerTrails URL and add features to the map.
Go to the Trails URL and browse the properties of the layer . Make note of the Name , Type , Drawing Info , and Fields properties.
In CodePen , create a FeatureLayerurl
Use dark colors for code blocks
Show more lines
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
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" >
< title > ArcGIS API for JavaScript Tutorials: Add a feature layer </ title >
< style >
html , body , #viewDiv {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
}
</ style >
< link rel = "stylesheet" href = "https://js.arcgis.com/4.23/esri/themes/light/main.css" >
< script src = "https://js.arcgis.com/4.23/" > </ script >
< script >
require ([
"esri/config" ,
"esri/Map" ,
"esri/views/MapView" ,
"esri/layers/FeatureLayer"
], function ( esriConfig, Map , MapView, FeatureLayer ) {
esriConfig.apiKey = "YOUR_API_KEY" ;
const map = new Map ({
basemap : "arcgis-topographic"
});
const view = new MapView({
container : "viewDiv" ,
map : map,
center : [- 118.80543 , 34.02700 ],
zoom : 13
});
//Trailheads feature layer (points)
const trailheadsLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
});
map.add(trailheadsLayer);
//Trails feature layer (lines)
const trailsLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
});
map.add(trailsLayer, 0 );
// Parks and open spaces (polygons)
const parksLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0"
});
map.add(parksLayer, 0 );
});
</ script >
</ head >
< body >
< div id = "viewDiv" > </ div >
</ body >
</ html >
Show more lines
Add trailsLayer to the map with an index of 0. This ensures that the layer is added to the top of the array and is drawn before trailheadsLayer.
Use dark colors for code blocks
Show more lines
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
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" >
< title > ArcGIS API for JavaScript Tutorials: Add a feature layer </ title >
< style >
html , body , #viewDiv {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
}
</ style >
< link rel = "stylesheet" href = "https://js.arcgis.com/4.23/esri/themes/light/main.css" >
< script src = "https://js.arcgis.com/4.23/" > </ script >
< script >
require ([
"esri/config" ,
"esri/Map" ,
"esri/views/MapView" ,
"esri/layers/FeatureLayer"
], function ( esriConfig, Map , MapView, FeatureLayer ) {
esriConfig.apiKey = "YOUR_API_KEY" ;
const map = new Map ({
basemap : "arcgis-topographic"
});
const view = new MapView({
container : "viewDiv" ,
map : map,
center : [- 118.80543 , 34.02700 ],
zoom : 13
});
//Trailheads feature layer (points)
const trailheadsLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
});
map.add(trailheadsLayer);
//Trails feature layer (lines)
const trailsLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
});
map.add(trailsLayer, 0 );
// Parks and open spaces (polygons)
const parksLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0"
});
map.add(parksLayer, 0 );
});
</ script >
</ head >
< body >
< div id = "viewDiv" > </ div >
</ body >
</ html >
Show more lines
Run the app to view the Trails layer in the map.
Add a polygon feature layer Polygon features are typically displayed in a feature layer before lines . Use the FeatureLayerParks and Open Spaces URL and add features to the map.
Go to the Parks and Open Spaces URL and browse the properties of the layer. Make note of the Name , Type , Drawing Info , and Fields properties.
In CodePen , create a FeatureLayerurl
Use dark colors for code blocks
Show more lines
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
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" >
< title > ArcGIS API for JavaScript Tutorials: Add a feature layer </ title >
< style >
html , body , #viewDiv {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
}
</ style >
< link rel = "stylesheet" href = "https://js.arcgis.com/4.23/esri/themes/light/main.css" >
< script src = "https://js.arcgis.com/4.23/" > </ script >
< script >
require ([
"esri/config" ,
"esri/Map" ,
"esri/views/MapView" ,
"esri/layers/FeatureLayer"
], function ( esriConfig, Map , MapView, FeatureLayer ) {
esriConfig.apiKey = "YOUR_API_KEY" ;
const map = new Map ({
basemap : "arcgis-topographic"
});
const view = new MapView({
container : "viewDiv" ,
map : map,
center : [- 118.80543 , 34.02700 ],
zoom : 13
});
//Trailheads feature layer (points)
const trailheadsLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
});
map.add(trailheadsLayer);
//Trails feature layer (lines)
const trailsLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
});
map.add(trailsLayer, 0 );
// Parks and open spaces (polygons)
const parksLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0"
});
map.add(parksLayer, 0 );
});
</ script >
</ head >
< body >
< div id = "viewDiv" > </ div >
</ body >
</ html >
Show more lines
Add parksLayer to the map with an index of 0. This ensures that the layer is added to the top of the array and is drawn before trailsLayer.
Use dark colors for code blocks
Show more lines
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
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" >
< title > ArcGIS API for JavaScript Tutorials: Add a feature layer </ title >
< style >
html , body , #viewDiv {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
}
</ style >
< link rel = "stylesheet" href = "https://js.arcgis.com/4.23/esri/themes/light/main.css" >
< script src = "https://js.arcgis.com/4.23/" > </ script >
< script >
require ([
"esri/config" ,
"esri/Map" ,
"esri/views/MapView" ,
"esri/layers/FeatureLayer"
], function ( esriConfig, Map , MapView, FeatureLayer ) {
esriConfig.apiKey = "YOUR_API_KEY" ;
const map = new Map ({
basemap : "arcgis-topographic"
});
const view = new MapView({
container : "viewDiv" ,
map : map,
center : [- 118.80543 , 34.02700 ],
zoom : 13
});
//Trailheads feature layer (points)
const trailheadsLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
});
map.add(trailheadsLayer);
//Trails feature layer (lines)
const trailsLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
});
map.add(trailsLayer, 0 );
// Parks and open spaces (polygons)
const parksLayer = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0"
});
map.add(parksLayer, 0 );
});
</ script >
</ head >
< body >
< div id = "viewDiv" > </ div >
</ body >
</ html >
Show more lines
Run the app In CodePen , run your code to display the map.
The map view should display all three feature layers in the map. The map view draws the map in following order:
Topographic basemap layer Parks and Open Spaces (polygons ) Trails (lines ) Trailheads (points ) It is important to add feature layers in the correct order so that features are displayed correctly (not overlapping) and so you can interact with the features.
What's next? Learn how to use additional API features and
ArcGIS services in these tutorials: