Learn how to add features from feature layers to a map .
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 access and display features by making query requests to the feature service and displaying them in a map.
In this tutorial, you access and display three different hosted feature layers .
The feature layers are:
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.0.0/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 >
Add code to add feature layers Add the following code to add three feature layers to the map: Trailheads, Trails, and Parks and Open Spaces.
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.
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
<!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.0.0/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);
// Trailheads feature layer (points)
var trailheads = L.esri
.featureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0"
})
.addTo(map);
// Trails feature layer (lines)
var tails = L.esri
.featureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0"
})
.addTo(map);
// Parks and open spaces (polygons)
var parks = L.esri
.featureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space_Styled/FeatureServer/0"
})
.addTo(map);
</ script >
</ body >
</ html >
Show more lines
Run the app In CodePen , run your code to display the map.
The map should display all three feature layers in the map
What's next? Learn how to use additional ArcGIS location services in these tutorials:
