Tutorial: Display a 3D object pop-up

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 Location Platform or ArcGIS Online account.

Get an access token

You need an access token with the correct privileges to access the resources used in this tutorial.

  1. Go to the Create an API key tutorial and create an API key with the following privilege(s):

    • Privileges
      • Location services > Basemaps
    • Item access
      • Note: If you are using your own custom data layer for this tutorial, you need to grant the API key credentials access to the layer item. Learn more in Item access privileges.
  2. Copy the API key access token to your clipboard when prompted.

  3. In CodePen, update the accessToken variable to use your access token.

    Use dark colors for code blocks
    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
          const accessToken = "YOUR_ACCESS_TOKEN";
    
          Cesium.ArcGisMapService.defaultAccessToken = accessToken;
    
          const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
    
          Cesium.Ion.defaultAccessToken = cesiumAccessToken;
    
          const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);
    
          const viewer = new Cesium.Viewer("cesiumContainer", {
    
            baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
    
          });
    

To learn about the other types of authentication available, go to Types of authentication.

Code

Use dark colors for code blocksCopy
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.121/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.121/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 accessToken = "YOUR_ACCESS_TOKEN";

      Cesium.ArcGisMapService.defaultAccessToken = accessToken;

      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/GVgbJbqm8hXASVYi/arcgis/rest/services/EGM2008/ImageServer");

      const i3sLayer = "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer";

      const i3sProvider = await Cesium.I3SDataProvider.fromUrl(i3sLayer, {
          geoidTiledTerrainProvider: geoidService,
          token: accessToken
      })

      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:

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.