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. You use the ol-popup library to achieve this.
You need an ArcGIS account to access the developer dashboard and create an API key .
To get started, either complete the Display a map tutorial or use this pen . To access location services , you need an API key or OAuth 2.0 access token .
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.
Change line
1
2
3
4
const apiKey = "YOUR_API_KEY" ;
const basemapId = "ArcGIS:Streets" ;
const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;
olms(map, basemapURL);
OpenLayers does not include a pop-up component. You can use the third-party library ol-popup to simplify adding pop-ups to your map.
In the <head> element, add references to the ol-popup library.
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
84
85
86
87
88
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" />
< title > OpenLayers Tutorials: Display a Popup </ title >
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px ;
color : #323232 ;
}
</ style >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type = "text/css" />
< script src = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js" > </ script >
< script src = "https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type = "text/javascript" > </ script >
< script src = "https://unpkg.com/ol-popup@4.0.0" > </ script >
< link rel = "stylesheet" href = "https://unpkg.com/ol-popup@4.0.0/src/ol-popup.css" />
</ head >
< body >
< div id = "map" > </ div >
< script >
const apiKey = "YOUR_API_KEY" ;
const map = new ol.Map({
target : "map"
});
map.setView(
new ol.View({
center : ol.proj.fromLonLat([- 118.805 , 34.027 ]),
zoom : 12
})
);
const basemapId = "ArcGIS:Streets" ;
const trailheadsLayer = new ol.layer.Vector({
source : new ol.source.Vector({
format : new ol.format.GeoJSON(),
url : `https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson`
})
});
olms(map, "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey)
.then( function ( map ) {
map.addLayer(trailheadsLayer);
});
const popup = new Popup();
map.addOverlay(popup);
map.on( "click" , ( event ) => {
let trailName, parkName;
const trailheads = map.getFeaturesAtPixel(event.pixel, {
layerFilter : layer => layer === trailheadsLayer
});
if (trailheads.length > 0 ) {
const trailName = trailheads[ 0 ].get( 'TRL_NAME' );
const parkName = trailheads[ 0 ].get( 'PARK_NAME' );
popup.show(event.coordinate, `<b> ${trailName} </b></br> ${parkName} ` );
} else {
popup.hide();
}
});
</ script >
</ body >
</ html >
Show more lines
Use a VectorVector
Before the olms initialization, create a a VectorVectorGeoJSON feature format to load and display the trailheads feature layer. Save it to a trailheadsLayer variable.
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
84
85
86
87
88
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" />
< title > OpenLayers Tutorials: Display a Popup </ title >
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px ;
color : #323232 ;
}
</ style >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type = "text/css" />
< script src = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js" > </ script >
< script src = "https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type = "text/javascript" > </ script >
< script src = "https://unpkg.com/ol-popup@4.0.0" > </ script >
< link rel = "stylesheet" href = "https://unpkg.com/ol-popup@4.0.0/src/ol-popup.css" />
</ head >
< body >
< div id = "map" > </ div >
< script >
const apiKey = "YOUR_API_KEY" ;
const map = new ol.Map({
target : "map"
});
map.setView(
new ol.View({
center : ol.proj.fromLonLat([- 118.805 , 34.027 ]),
zoom : 12
})
);
const basemapId = "ArcGIS:Streets" ;
const trailheadsLayer = new ol.layer.Vector({
source : new ol.source.Vector({
format : new ol.format.GeoJSON(),
url : `https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson`
})
});
olms(map, "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey)
.then( function ( map ) {
map.addLayer(trailheadsLayer);
});
const popup = new Popup();
map.addOverlay(popup);
map.on( "click" , ( event ) => {
let trailName, parkName;
const trailheads = map.getFeaturesAtPixel(event.pixel, {
layerFilter : layer => layer === trailheadsLayer
});
if (trailheads.length > 0 ) {
const trailName = trailheads[ 0 ].get( 'TRL_NAME' );
const parkName = trailheads[ 0 ].get( 'PARK_NAME' );
popup.show(event.coordinate, `<b> ${trailName} </b></br> ${parkName} ` );
} else {
popup.hide();
}
});
</ script >
</ body >
</ html >
Show more lines
Add a load handler to the olms initialization. Inside, Use map.addLayer
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
84
85
86
87
88
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" />
< title > OpenLayers Tutorials: Display a Popup </ title >
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px ;
color : #323232 ;
}
</ style >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type = "text/css" />
< script src = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js" > </ script >
< script src = "https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type = "text/javascript" > </ script >
< script src = "https://unpkg.com/ol-popup@4.0.0" > </ script >
< link rel = "stylesheet" href = "https://unpkg.com/ol-popup@4.0.0/src/ol-popup.css" />
</ head >
< body >
< div id = "map" > </ div >
< script >
const apiKey = "YOUR_API_KEY" ;
const map = new ol.Map({
target : "map"
});
map.setView(
new ol.View({
center : ol.proj.fromLonLat([- 118.805 , 34.027 ]),
zoom : 12
})
);
const basemapId = "ArcGIS:Streets" ;
const trailheadsLayer = new ol.layer.Vector({
source : new ol.source.Vector({
format : new ol.format.GeoJSON(),
url : `https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson`
})
});
olms(map, "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey)
.then( function ( map ) {
map.addLayer(trailheadsLayer);
});
const popup = new Popup();
map.addOverlay(popup);
map.on( "click" , ( event ) => {
let trailName, parkName;
const trailheads = map.getFeaturesAtPixel(event.pixel, {
layerFilter : layer => layer === trailheadsLayer
});
if (trailheads.length > 0 ) {
const trailName = trailheads[ 0 ].get( 'TRL_NAME' );
const parkName = trailheads[ 0 ].get( 'PARK_NAME' );
popup.show(event.coordinate, `<b> ${trailName} </b></br> ${parkName} ` );
} else {
popup.hide();
}
});
</ script >
</ body >
</ html >
Show more lines
A PopupOverlaymap.addOverlay
Create a new Popup and save it to a popup variable. Add it to the map with map.addOverlay.
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
84
85
86
87
88
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" />
< title > OpenLayers Tutorials: Display a Popup </ title >
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px ;
color : #323232 ;
}
</ style >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type = "text/css" />
< script src = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js" > </ script >
< script src = "https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type = "text/javascript" > </ script >
< script src = "https://unpkg.com/ol-popup@4.0.0" > </ script >
< link rel = "stylesheet" href = "https://unpkg.com/ol-popup@4.0.0/src/ol-popup.css" />
</ head >
< body >
< div id = "map" > </ div >
< script >
const apiKey = "YOUR_API_KEY" ;
const map = new ol.Map({
target : "map"
});
map.setView(
new ol.View({
center : ol.proj.fromLonLat([- 118.805 , 34.027 ]),
zoom : 12
})
);
const basemapId = "ArcGIS:Streets" ;
const trailheadsLayer = new ol.layer.Vector({
source : new ol.source.Vector({
format : new ol.format.GeoJSON(),
url : `https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson`
})
});
olms(map, "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey)
.then( function ( map ) {
map.addLayer(trailheadsLayer);
});
const popup = new Popup();
map.addOverlay(popup);
map.on( "click" , ( event ) => {
let trailName, parkName;
const trailheads = map.getFeaturesAtPixel(event.pixel, {
layerFilter : layer => layer === trailheadsLayer
});
if (trailheads.length > 0 ) {
const trailName = trailheads[ 0 ].get( 'TRL_NAME' );
const parkName = trailheads[ 0 ].get( 'PARK_NAME' );
popup.show(event.coordinate, `<b> ${trailName} </b></br> ${parkName} ` );
} else {
popup.hide();
}
});
</ script >
</ body >
</ html >
Show more lines
A pop-up can display any HTML content. Use a click event handler to detect the click, then use map.getFeaturesAtPixellayerFilter to do so.
If the returned array contains at least one feature, you can use Feature.getTRL_NAME) and park name (PARK_NAME). You then use popup.show to update the pop-up position and content.
Add a clickgetFeaturesAtPixel to get an array of trailhead features clicked on.
Show more lines
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
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" />
< title > OpenLayers Tutorials: Display a Popup </ title >
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px ;
color : #323232 ;
}
</ style >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type = "text/css" />
< script src = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js" > </ script >
< script src = "https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type = "text/javascript" > </ script >
< script src = "https://unpkg.com/ol-popup@4.0.0" > </ script >
< link rel = "stylesheet" href = "https://unpkg.com/ol-popup@4.0.0/src/ol-popup.css" />
</ head >
< body >
< div id = "map" > </ div >
< script >
const apiKey = "YOUR_API_KEY" ;
const map = new ol.Map({
target : "map"
});
map.setView(
new ol.View({
center : ol.proj.fromLonLat([- 118.805 , 34.027 ]),
zoom : 12
})
);
const basemapId = "ArcGIS:Streets" ;
const trailheadsLayer = new ol.layer.Vector({
source : new ol.source.Vector({
format : new ol.format.GeoJSON(),
url : `https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson`
})
});
olms(map, "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey)
.then( function ( map ) {
map.addLayer(trailheadsLayer);
});
const popup = new Popup();
map.addOverlay(popup);
map.on( "click" , ( event ) => {
let trailName, parkName;
const trailheads = map.getFeaturesAtPixel(event.pixel, {
layerFilter : layer => layer === trailheadsLayer
});
if (trailheads.length > 0 ) {
const trailName = trailheads[ 0 ].get( 'TRL_NAME' );
const parkName = trailheads[ 0 ].get( 'PARK_NAME' );
popup.show(event.coordinate, `<b> ${trailName} </b></br> ${parkName} ` );
} else {
popup.hide();
}
});
</ script >
</ body >
</ html >
Show more lines
If there is a trail name to show, use popup.show to set the position and content of the pop-up. Otherwise, use popup.hide to hide it.
Show more lines
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
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" />
< title > OpenLayers Tutorials: Display a Popup </ title >
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px ;
color : #323232 ;
}
</ style >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type = "text/css" />
< script src = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js" > </ script >
< script src = "https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" type = "text/javascript" > </ script >
< script src = "https://unpkg.com/ol-popup@4.0.0" > </ script >
< link rel = "stylesheet" href = "https://unpkg.com/ol-popup@4.0.0/src/ol-popup.css" />
</ head >
< body >
< div id = "map" > </ div >
< script >
const apiKey = "YOUR_API_KEY" ;
const map = new ol.Map({
target : "map"
});
map.setView(
new ol.View({
center : ol.proj.fromLonLat([- 118.805 , 34.027 ]),
zoom : 12
})
);
const basemapId = "ArcGIS:Streets" ;
const trailheadsLayer = new ol.layer.Vector({
source : new ol.source.Vector({
format : new ol.format.GeoJSON(),
url : `https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson`
})
});
olms(map, "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey)
.then( function ( map ) {
map.addLayer(trailheadsLayer);
});
const popup = new Popup();
map.addOverlay(popup);
map.on( "click" , ( event ) => {
let trailName, parkName;
const trailheads = map.getFeaturesAtPixel(event.pixel, {
layerFilter : layer => layer === trailheadsLayer
});
if (trailheads.length > 0 ) {
const trailName = trailheads[ 0 ].get( 'TRL_NAME' );
const parkName = trailheads[ 0 ].get( 'PARK_NAME' );
popup.show(event.coordinate, `<b> ${trailName} </b></br> ${parkName} ` );
} else {
popup.hide();
}
});
</ script >
</ body >
</ html >
Show more lines
In CodePen , run your code to display the map.
The map view should display the Trailheads feature layer . When you click a feature, the name of the trailhead and its park name is displayed in a pop-up.
SharedTutorialContent WhatsNext />
