Learn how to display attributes of 3D objects in a pop-up when clicked.
A pop-up , also known as a "popup", is a visual element that displays information about an object 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 customize the interactive pop-up created by CesiumJS for the San Francisco Buildings 3D object layer. When a building is clicked, a pop-up is displayed containing the name of the building and its object ID.
Prerequisites You need an ArcGIS Developer or ArcGIS Online account to access the developer dashboard and create an API key .
Code
Use dark colors for code blocks Copy
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "utf-8" />
< title > CesiumJS: Display a 3D object layer popup </ title >
<!-- Include the CesiumJS JavaScript and CSS files -->
< script src = "https://cesium.com/downloads/cesiumjs/releases/1.105/Build/Cesium/Cesium.js" > </ script >
< link href = "https://cesium.com/downloads/cesiumjs/releases/1.105/Build/Cesium/Widgets/widgets.css" rel = "stylesheet" >
< style >
html ,
body {
margin : 0px ;
padding : 0px ;
height : 100% ;
}
#cesiumContainer {
height : 100% ;
}
</ style >
</ head >
< body >
< div id = "cesiumContainer" > </ div >
< script type = "module" >
const apiKey = "YOUR_API_KEY" ;
Cesium.ArcGisMapService.defaultAccessToken = apiKey;
const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN" ;
Cesium.Ion.defaultAccessToken = cesiumAccessToken;
const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE, {
enablePickFeatures : false
});
const viewer = new Cesium.Viewer( "cesiumContainer" , {
baseLayer : Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
terrain : Cesium.Terrain.fromWorldTerrain(),
timeline : false ,
animation : false ,
geocoder : false
});
viewer.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(- 122.43305 , 37.77655 , 500 ),
orientation : {
heading : Cesium.Math.toRadians( 60 ),
pitch : Cesium.Math.toRadians(- 15.0 ),
}
});
const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl( "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer" );
const i3sLayer = "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_3DObjects_1_7/SceneServer" ;
const i3sProvider = await Cesium.I3SDataProvider.fromUrl(i3sLayer, {
geoidTiledTerrainProvider : geoidService,
token : apiKey
})
viewer.scene.primitives.add(i3sProvider);
// An entity object which will hold info about the currently selected feature for infobox display
const selectedEntity = new Cesium.Entity();
// Show metadata in the InfoBox.
viewer.screenSpaceEventHandler.setInputAction( function onLeftClick ( movement ) {
// Pick a new feature
const pickedFeature = viewer.scene.pick(movement.position);
if (!Cesium.defined(pickedFeature)) {
return ;
}
const pickedPosition = viewer.scene.pickPosition(movement.position);
if (
Cesium.defined(pickedFeature.content) &&
Cesium.defined(pickedFeature.content.tile.i3sNode)
) {
const i3sNode = pickedFeature.content.tile.i3sNode;
i3sNode.loadFields().then( function ( ) {
const geometry = i3sNode.geometryData[ 0 ];
if (pickedPosition) {
const location = geometry.getClosestPointIndexOnTriangle(
pickedPosition.x,
pickedPosition.y,
pickedPosition.z
);
let description = "No attributes" ;
let name;
if (location.index !== - 1 && geometry.customAttributes.featureIndex) {
const featureIndex =
geometry.customAttributes.featureIndex[location.index];
if ( Object .keys(i3sNode.fields).length > 0 ) {
description =
'<table class="cesium-infoBox-defaultTable"><tbody>' ;
for ( const fieldName in i3sNode.fields) {
if (i3sNode.fields.hasOwnProperty(fieldName)) {
const field = i3sNode.fields[fieldName];
description += `<tr><th> ${field.name} </th><td>` ;
description += ` ${field.values[featureIndex]} </td></tr>` ;
console .log(
` ${field.name} : ${field.values[featureIndex]} `
);
if (
!Cesium.defined(name) &&
isNameProperty(field.name)
) {
name = field.values[featureIndex];
}
}
}
description += `</tbody></table>` ;
}
}
if (!Cesium.defined(name)) {
name = "unknown" ;
}
selectedEntity.name = name;
selectedEntity.description = description;
viewer.selectedEntity = selectedEntity;
}
});
}
},
Cesium.ScreenSpaceEventType.LEFT_CLICK);
function isNameProperty ( propertyName ) {
const name = propertyName.toLowerCase();
if (
name.localeCompare( "name" ) === 0 ||
name.localeCompare( "objname" ) === 0
) {
return true ;
}
return false ;
}
</ script >
</ body >
</ html >
What's next? Learn how to use additional ArcGIS location services in these tutorials:
