Learn how to display feature attributes in a pop-up .
A pop-up , also known as a "popup", is a visual element that displays information about a feature when it is clicked. You typically style and configure a pop-up using HTML and CSS for each layer in a map. Pop-ups can display attribute values, calculated values, or rich content such as images, charts, or videos.
In this tutorial, you create an interactive pop-up for the Trailheads feature layer in the Santa Monica Mountains. When a feature is clicked, a pop-up is displayed containing the name of the trail and the service that manages it.
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
//
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "ArcGIS:Streets" ;
const map = new mapboxgl.Map({
container : "map" , // the id of the div element
style : `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ ${basemapEnum} ?type=style&token= ${apiKey} ` ,
zoom : 12 , // starting zoom
center : [- 118.805 , 34.027 ] // starting location [longitude, latitude]
});
Add a load handler You need to wait for the map to be completely loaded before adding any layers
Add an event handler to the map load
Use dark colors for code blocks
Show more lines
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
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" />
< script src = "https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js" > </ script >
< link href = "https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel = "stylesheet" />
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
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 = new mapboxgl.Map({
container : "map" , // the id of the div element
style : `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ ${basemapEnum} ?type=style&token= ${apiKey} ` ,
zoom : 12 , // starting zoom
center : [- 118.805 , 34.027 ] // starting location [longitude, latitude]
});
map.once( "load" , () => {
map.addSource( "trailheads" , {
type : "vector" ,
tiles : [
"https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/VectorTileServer/tile/{z}/{y}/{x}.pbf"
]
});
map.addLayer({
id : "trailheads-circle" ,
type : "circle" ,
source : "trailheads" ,
"source-layer" : "Trailheads" ,
paint : {
"circle-color" : "hsla(200,80%,70%,0.5)" ,
"circle-stroke-width" : 2 ,
"circle-radius" : 5 ,
"circle-stroke-color" : "hsl(200,80%,50%)"
}
});
map.on( "click" , "trailheads-circle" , ( e ) => {
const trailhead = e.features[ 0 ];
new mapboxgl.Popup()
.setHTML( `<b> ${trailhead.properties.TRL_NAME} </b> ${trailhead.properties.PARK_NAME} ` )
.setLngLat(trailhead.geometry.coordinates)
.addTo(map);
});
map.on( "mouseenter" , "trailheads-circle" , () => {
map.getCanvas().style.cursor = "pointer" ;
});
map.on( "mouseleave" , "trailheads-circle" , () => {
map.getCanvas().style.cursor = "" ;
});
});
</ script >
</ body >
</ html >
Show more lines
Add the trailheads layer You will use a vector tile source and a circle layer to display the trailheads.
Inside the load handler, add a source called trailheads and set the url property of the vector tile layer.
Use dark colors for code blocks
Show more lines
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
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" />
< script src = "https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js" > </ script >
< link href = "https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel = "stylesheet" />
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
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 = new mapboxgl.Map({
container : "map" , // the id of the div element
style : `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ ${basemapEnum} ?type=style&token= ${apiKey} ` ,
zoom : 12 , // starting zoom
center : [- 118.805 , 34.027 ] // starting location [longitude, latitude]
});
map.once( "load" , () => {
map.addSource( "trailheads" , {
type : "vector" ,
tiles : [
"https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/VectorTileServer/tile/{z}/{y}/{x}.pbf"
]
});
map.addLayer({
id : "trailheads-circle" ,
type : "circle" ,
source : "trailheads" ,
"source-layer" : "Trailheads" ,
paint : {
"circle-color" : "hsla(200,80%,70%,0.5)" ,
"circle-stroke-width" : 2 ,
"circle-radius" : 5 ,
"circle-stroke-color" : "hsl(200,80%,50%)"
}
});
map.on( "click" , "trailheads-circle" , ( e ) => {
const trailhead = e.features[ 0 ];
new mapboxgl.Popup()
.setHTML( `<b> ${trailhead.properties.TRL_NAME} </b> ${trailhead.properties.PARK_NAME} ` )
.setLngLat(trailhead.geometry.coordinates)
.addTo(map);
});
map.on( "mouseenter" , "trailheads-circle" , () => {
map.getCanvas().style.cursor = "pointer" ;
});
map.on( "mouseleave" , "trailheads-circle" , () => {
map.getCanvas().style.cursor = "" ;
});
});
</ script >
</ body >
</ html >
Show more lines
Add a circle layer called trailheads-circle, which references the trailheads source.
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.
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
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" />
< script src = "https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js" > </ script >
< link href = "https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel = "stylesheet" />
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
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 = new mapboxgl.Map({
container : "map" , // the id of the div element
style : `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ ${basemapEnum} ?type=style&token= ${apiKey} ` ,
zoom : 12 , // starting zoom
center : [- 118.805 , 34.027 ] // starting location [longitude, latitude]
});
map.once( "load" , () => {
map.addSource( "trailheads" , {
type : "vector" ,
tiles : [
"https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/VectorTileServer/tile/{z}/{y}/{x}.pbf"
]
});
map.addLayer({
id : "trailheads-circle" ,
type : "circle" ,
source : "trailheads" ,
"source-layer" : "Trailheads" ,
paint : {
"circle-color" : "hsla(200,80%,70%,0.5)" ,
"circle-stroke-width" : 2 ,
"circle-radius" : 5 ,
"circle-stroke-color" : "hsl(200,80%,50%)"
}
});
map.on( "click" , "trailheads-circle" , ( e ) => {
const trailhead = e.features[ 0 ];
new mapboxgl.Popup()
.setHTML( `<b> ${trailhead.properties.TRL_NAME} </b> ${trailhead.properties.PARK_NAME} ` )
.setLngLat(trailhead.geometry.coordinates)
.addTo(map);
});
map.on( "mouseenter" , "trailheads-circle" , () => {
map.getCanvas().style.cursor = "pointer" ;
});
map.on( "mouseleave" , "trailheads-circle" , () => {
map.getCanvas().style.cursor = "" ;
});
});
</ script >
</ body >
</ html >
Show more lines
Add a click handler To display a pop-up appear when a trailheads feature is clicked, add a click
Add a handler for theclickMaptrailheads-circle id to the onfeatures property to a trailhead variable.
More info If there are multiple overlapping features where you click, all of those features will be included in the features array. The first element listed will be the topmost feature.
See the Mapbox GL JS documentation for more map events you can respond to.
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" />
< script src = "https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js" > </ script >
< link href = "https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel = "stylesheet" />
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
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 = new mapboxgl.Map({
container : "map" , // the id of the div element
style : `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ ${basemapEnum} ?type=style&token= ${apiKey} ` ,
zoom : 12 , // starting zoom
center : [- 118.805 , 34.027 ] // starting location [longitude, latitude]
});
map.once( "load" , () => {
map.addSource( "trailheads" , {
type : "vector" ,
tiles : [
"https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/VectorTileServer/tile/{z}/{y}/{x}.pbf"
]
});
map.addLayer({
id : "trailheads-circle" ,
type : "circle" ,
source : "trailheads" ,
"source-layer" : "Trailheads" ,
paint : {
"circle-color" : "hsla(200,80%,70%,0.5)" ,
"circle-stroke-width" : 2 ,
"circle-radius" : 5 ,
"circle-stroke-color" : "hsl(200,80%,50%)"
}
});
map.on( "click" , "trailheads-circle" , ( e ) => {
const trailhead = e.features[ 0 ];
new mapboxgl.Popup()
.setHTML( `<b> ${trailhead.properties.TRL_NAME} </b> ${trailhead.properties.PARK_NAME} ` )
.setLngLat(trailhead.geometry.coordinates)
.addTo(map);
});
map.on( "mouseenter" , "trailheads-circle" , () => {
map.getCanvas().style.cursor = "pointer" ;
});
map.on( "mouseleave" , "trailheads-circle" , () => {
map.getCanvas().style.cursor = "" ;
});
});
</ script >
</ body >
</ html >
Show more lines
Create the pop-up You create a new Popupmapboxgl.Popup. The default parameters give a simple white bubble which stays open until you click its close button or somewhere on the map.
To add content, you use Popup.setHTMLtrailhead variable to make the HTML string. It is a GeoJSON object, so the clicked trailhead's attributes are in a properties object. The name of the trail is stored in TRL_NAME and the name of the park service is in PARK_NAME.
Create a new Popup
More info You can pass additional options, to change behavior such as whether there is a close button in the corner. See the Mapbox documentation for more details.
Use dark colors for code blocks
Show more lines
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
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" />
< script src = "https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js" > </ script >
< link href = "https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel = "stylesheet" />
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
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 = new mapboxgl.Map({
container : "map" , // the id of the div element
style : `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ ${basemapEnum} ?type=style&token= ${apiKey} ` ,
zoom : 12 , // starting zoom
center : [- 118.805 , 34.027 ] // starting location [longitude, latitude]
});
map.once( "load" , () => {
map.addSource( "trailheads" , {
type : "vector" ,
tiles : [
"https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/VectorTileServer/tile/{z}/{y}/{x}.pbf"
]
});
map.addLayer({
id : "trailheads-circle" ,
type : "circle" ,
source : "trailheads" ,
"source-layer" : "Trailheads" ,
paint : {
"circle-color" : "hsla(200,80%,70%,0.5)" ,
"circle-stroke-width" : 2 ,
"circle-radius" : 5 ,
"circle-stroke-color" : "hsl(200,80%,50%)"
}
});
map.on( "click" , "trailheads-circle" , ( e ) => {
const trailhead = e.features[ 0 ];
new mapboxgl.Popup()
.setHTML( `<b> ${trailhead.properties.TRL_NAME} </b> ${trailhead.properties.PARK_NAME} ` )
.setLngLat(trailhead.geometry.coordinates)
.addTo(map);
});
map.on( "mouseenter" , "trailheads-circle" , () => {
map.getCanvas().style.cursor = "pointer" ;
});
map.on( "mouseleave" , "trailheads-circle" , () => {
map.getCanvas().style.cursor = "" ;
});
});
</ script >
</ body >
</ html >
Show more lines
Use Popup.setHTML<h3> tag, then the name of the park service.
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" />
< script src = "https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js" > </ script >
< link href = "https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel = "stylesheet" />
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
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 = new mapboxgl.Map({
container : "map" , // the id of the div element
style : `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ ${basemapEnum} ?type=style&token= ${apiKey} ` ,
zoom : 12 , // starting zoom
center : [- 118.805 , 34.027 ] // starting location [longitude, latitude]
});
map.once( "load" , () => {
map.addSource( "trailheads" , {
type : "vector" ,
tiles : [
"https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/VectorTileServer/tile/{z}/{y}/{x}.pbf"
]
});
map.addLayer({
id : "trailheads-circle" ,
type : "circle" ,
source : "trailheads" ,
"source-layer" : "Trailheads" ,
paint : {
"circle-color" : "hsla(200,80%,70%,0.5)" ,
"circle-stroke-width" : 2 ,
"circle-radius" : 5 ,
"circle-stroke-color" : "hsl(200,80%,50%)"
}
});
map.on( "click" , "trailheads-circle" , ( e ) => {
const trailhead = e.features[ 0 ];
new mapboxgl.Popup()
.setHTML( `<b> ${trailhead.properties.TRL_NAME} </b> ${trailhead.properties.PARK_NAME} ` )
.setLngLat(trailhead.geometry.coordinates)
.addTo(map);
});
map.on( "mouseenter" , "trailheads-circle" , () => {
map.getCanvas().style.cursor = "pointer" ;
});
map.on( "mouseleave" , "trailheads-circle" , () => {
map.getCanvas().style.cursor = "" ;
});
});
</ script >
</ body >
</ html >
Show more lines
Add the pop-up to the map When you create the PopupsetLngLataddToMap
Set the location of the PopupsetLngLat
More info Most methods of PopupPopup
Use dark colors for code blocks
Show more lines
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
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" />
< script src = "https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js" > </ script >
< link href = "https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel = "stylesheet" />
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
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 = new mapboxgl.Map({
container : "map" , // the id of the div element
style : `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ ${basemapEnum} ?type=style&token= ${apiKey} ` ,
zoom : 12 , // starting zoom
center : [- 118.805 , 34.027 ] // starting location [longitude, latitude]
});
map.once( "load" , () => {
map.addSource( "trailheads" , {
type : "vector" ,
tiles : [
"https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/VectorTileServer/tile/{z}/{y}/{x}.pbf"
]
});
map.addLayer({
id : "trailheads-circle" ,
type : "circle" ,
source : "trailheads" ,
"source-layer" : "Trailheads" ,
paint : {
"circle-color" : "hsla(200,80%,70%,0.5)" ,
"circle-stroke-width" : 2 ,
"circle-radius" : 5 ,
"circle-stroke-color" : "hsl(200,80%,50%)"
}
});
map.on( "click" , "trailheads-circle" , ( e ) => {
const trailhead = e.features[ 0 ];
new mapboxgl.Popup()
.setHTML( `<b> ${trailhead.properties.TRL_NAME} </b> ${trailhead.properties.PARK_NAME} ` )
.setLngLat(trailhead.geometry.coordinates)
.addTo(map);
});
map.on( "mouseenter" , "trailheads-circle" , () => {
map.getCanvas().style.cursor = "pointer" ;
});
map.on( "mouseleave" , "trailheads-circle" , () => {
map.getCanvas().style.cursor = "" ;
});
});
</ script >
</ body >
</ html >
Show more lines
Change the cursor on hover To indicate that you can interact with a layer by clicking, it is useful to change the mouse cursor to a pointing hand when hovering over the layer. You use Map.getCanvas<canvas> element, so you can set the CSS cursor property.
Add a handler to the mouseenter
Use dark colors for code blocks
Show more lines
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
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" />
< script src = "https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js" > </ script >
< link href = "https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel = "stylesheet" />
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
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 = new mapboxgl.Map({
container : "map" , // the id of the div element
style : `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ ${basemapEnum} ?type=style&token= ${apiKey} ` ,
zoom : 12 , // starting zoom
center : [- 118.805 , 34.027 ] // starting location [longitude, latitude]
});
map.once( "load" , () => {
map.addSource( "trailheads" , {
type : "vector" ,
tiles : [
"https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/VectorTileServer/tile/{z}/{y}/{x}.pbf"
]
});
map.addLayer({
id : "trailheads-circle" ,
type : "circle" ,
source : "trailheads" ,
"source-layer" : "Trailheads" ,
paint : {
"circle-color" : "hsla(200,80%,70%,0.5)" ,
"circle-stroke-width" : 2 ,
"circle-radius" : 5 ,
"circle-stroke-color" : "hsl(200,80%,50%)"
}
});
map.on( "click" , "trailheads-circle" , ( e ) => {
const trailhead = e.features[ 0 ];
new mapboxgl.Popup()
.setHTML( `<b> ${trailhead.properties.TRL_NAME} </b> ${trailhead.properties.PARK_NAME} ` )
.setLngLat(trailhead.geometry.coordinates)
.addTo(map);
});
map.on( "mouseenter" , "trailheads-circle" , () => {
map.getCanvas().style.cursor = "pointer" ;
});
map.on( "mouseleave" , "trailheads-circle" , () => {
map.getCanvas().style.cursor = "" ;
});
});
</ script >
</ body >
</ html >
Show more lines
Add a handler to the mouseleave event, changing the cursor back to the default.
Use dark colors for code blocks
Show more lines
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
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" />
< script src = "https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js" > </ script >
< link href = "https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel = "stylesheet" />
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
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 = new mapboxgl.Map({
container : "map" , // the id of the div element
style : `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ ${basemapEnum} ?type=style&token= ${apiKey} ` ,
zoom : 12 , // starting zoom
center : [- 118.805 , 34.027 ] // starting location [longitude, latitude]
});
map.once( "load" , () => {
map.addSource( "trailheads" , {
type : "vector" ,
tiles : [
"https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/VectorTileServer/tile/{z}/{y}/{x}.pbf"
]
});
map.addLayer({
id : "trailheads-circle" ,
type : "circle" ,
source : "trailheads" ,
"source-layer" : "Trailheads" ,
paint : {
"circle-color" : "hsla(200,80%,70%,0.5)" ,
"circle-stroke-width" : 2 ,
"circle-radius" : 5 ,
"circle-stroke-color" : "hsl(200,80%,50%)"
}
});
map.on( "click" , "trailheads-circle" , ( e ) => {
const trailhead = e.features[ 0 ];
new mapboxgl.Popup()
.setHTML( `<b> ${trailhead.properties.TRL_NAME} </b> ${trailhead.properties.PARK_NAME} ` )
.setLngLat(trailhead.geometry.coordinates)
.addTo(map);
});
map.on( "mouseenter" , "trailheads-circle" , () => {
map.getCanvas().style.cursor = "pointer" ;
});
map.on( "mouseleave" , "trailheads-circle" , () => {
map.getCanvas().style.cursor = "" ;
});
});
</ script >
</ body >
</ html >
Show more lines
Run the app In CodePen , run your code to display the map.
The map view should display the Trailheads feature layer . When you hover over a feature the cursor should change. When you click a feature, the name of the trailhead and its park name is displayed in a pop-up.
What's next? Learn how to use additional ArcGIS location services in these tutorials:
