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
<!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.107/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.107/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:
