Tutorial: Display a 3D object pop-up

Learn how to display attributes of 3D objects in a pop-up when clicked.

Display attributes of 3D objects using API key authentication

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

Steps

Get the starter app

Select a type of authentication below and follow the steps to create a new application.

You can choose one of the following to create a new CodePen:

  • Option 1: Complete the Display a scene tutorial; or,
  • Option 2: Start from the Display a scene tutorial .

Set up authentication

Create developer credentials in your portal for the type of authentication you selected.

Create a new API key credential 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.

Set developer credentials

Use the API key or OAuth developer credentials created in the previous step in your application.

  1. Add <script> elements in the HTML <body> and create an accessToken variable to store your access token. Set YOUR_ACCESS_TOKEN with the access token you previously copied from your API key credentials.

    Expand
    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
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
      <script>
    
        /* Use for API key authentication */
        const accessToken = "YOUR_ACCESS_TOKEN";
    
      </script>
    
    Expand
  2. Set the defaultAccessToken included with Cesium to authenticate requests to the ArcGIS services used in this tutorial.

    Expand
    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
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
      <script>
    
        /* Use for API key authentication */
        const accessToken = "YOUR_ACCESS_TOKEN";
    
        Cesium.ArcGisMapService.defaultAccessToken = accessToken;
    
      </script>
    
    Expand

Get a Cesium ion access token

All Cesium applications must use an access token provided through Cesium ion. This token allows you to access assets such as Cesium World Terrain in your application.

  1. Go to your Cesium ion dashboard to generate an access token. Copy the key to your clipboard.

  2. Create a cesiumAccessToken variable and replace YOUR_CESIUM_ACCESS_TOKEN with the access token you copied from the Cesium ion dashboard.

    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
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
      <script>
    
        /* Use for API key authentication */
        const accessToken = "YOUR_ACCESS_TOKEN";
    
        // or
    
        /* Use for user authentication */
        // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
        //   clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
        //   redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
        //   portal: "YOUR_PORTAL_URL" // Your portal URL
        // })
    
        // const accessToken = session.token;
    
        Cesium.ArcGisMapService.defaultAccessToken = accessToken;
    
        const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
    
      </script>
    
  3. Configure Cesium.Ion.defaultAccessToken with the Cesium access token to validate the application.

    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
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
      <script>
    
        /* Use for API key authentication */
        const accessToken = "YOUR_ACCESS_TOKEN";
    
        // or
    
        /* Use for user authentication */
        // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
        //   clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
        //   redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
        //   portal: "YOUR_PORTAL_URL" // Your portal URL
        // })
    
        // const accessToken = session.token;
    
        Cesium.ArcGisMapService.defaultAccessToken = accessToken;
    
        const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
    
        Cesium.Ion.defaultAccessToken = cesiumAccessToken;
    
      </script>
    

Update the camera position

  1. Update the camera position to -122.43305, 37.77655, 500 to focus on San Francisco, California.

    Expand
    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
    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
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
        viewer.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(-122.43305, 37.77655, 500),
          orientation: {
            heading: Cesium.Math.toRadians(60),
            pitch: Cesium.Math.toRadians(-15.0),
          }
        });
    
    Expand

Add a terrain provider

To ensure that your 3D objects sit properly on top of the terrain, you need to use a geoid service. This service will allow the elevation of the 3D objects to align with the elevation values of Cesium World Terrain.

  1. Initialize a terrain provider called geoidService that references the Earth Gravitational Model EGM2008. This provider will allow for geoid conversion between the gravity-based 3D object layer and the ellipsoidal-based Cesium World Terrain.

    Expand
    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
    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
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
        const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://tiles.arcgis.com/tiles/GVgbJbqm8hXASVYi/arcgis/rest/services/EGM2008/ImageServer");
    
        viewer.creditDisplay.addStaticCredit(new Cesium.Credit("National Geospatial-Intelligence Agency (NGA)", false));
    
    Expand
  2. Add the data attribution for the elevation layer source.

    • Go to the EGM2008 item.
    • Scroll down to the Credits (Attribution) section and copy its value.
    • Create an attribution property and paste the attribution value from the item.
      Expand
      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
      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
      146
      147
      148
      149
      150
      151
      152
      153
      154
      155
      156
      157
      158
      159
      160
      161
      162
      163
      164
      165
      166
      167
      168
      169
      170
      171
      172
      173
      174
          const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://tiles.arcgis.com/tiles/GVgbJbqm8hXASVYi/arcgis/rest/services/EGM2008/ImageServer");
      
          viewer.creditDisplay.addStaticCredit(new Cesium.Credit("National Geospatial-Intelligence Agency (NGA)", false));
      
      Expand

Add 3D objects

  1. Reference the service URL of the San Francisco 3D Objects scene layer.

    Expand
    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
    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
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
        const i3sLayer = "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer";
    
    
    Expand
  2. Create an I3SDataProvider by calling the fromUrl method. Pass the geoidService you created and add it to the viewer.

    Expand
    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
    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
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
        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);
    
    
    Expand
  3. Add the data attribution for the scene layer source.

    • Go to the San Francisco 3D Objects item.
    • Scroll down to the Credits (Attribution) section and copy its value.
    • Create an attribution property and paste the attribution value from the item.
      Expand
      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
      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
      146
      147
      148
      149
      150
      151
      152
      153
      154
      155
      156
      157
      158
      159
      160
      161
      162
      163
      164
      165
      166
      167
      168
      169
      170
      171
      172
      173
      174
          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);
      
          // Attribution text retrieved from https://www.arcgis.com/home/item.html?id=d3344ba99c3f4efaa909ccfbcc052ed5
          viewer.creditDisplay.addStaticCredit(new Cesium.Credit("Precision Light Works (PLW)", false));
      
      Expand

Get feature attributes

  1. Create a click handler to detect user clicks on the viewer. Get the clicked feature using viewer.scene.pick(), and get the position of the click using viewer.scene.pickPosition().

    Expand
    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
    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
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
        // 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);
    
        },
          Cesium.ScreenSpaceEventType.LEFT_CLICK);
    
    Expand
  2. Create a helper function isNameProperty that checks if a property is a name field. You will use this helper function when displaying information of a clicked feature in a popup.

    Expand
    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
    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
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
        function isNameProperty(propertyName) {
          const name = propertyName.toLowerCase();
          if (
            name.localeCompare("name") === 0 ||
            name.localeCompare("objname") === 0
          ) {
            return true;
          }
          return false;
        }
    
    Expand
  3. Inside the click handler, use I3SNode.loadFields() to load the properties of the closest I3S node. Get the exact geometry that was clicked using I3SGeometry.getClosestPointIndexOnTriangle.

    Expand
    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
    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
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
        // 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 (!Cesium.defined(name)) {
                  name = "unknown";
                }
                selectedEntity.name = name;
                selectedEntity.description = description;
                viewer.selectedEntity = selectedEntity;
              }
            });
          }
    
        },
          Cesium.ScreenSpaceEventType.LEFT_CLICK);
    
    Expand
  4. Access the properties of the clicked geometry. Display them in an InfoBox.

    Expand
    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
    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
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
          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;
              }
            });
          }
    
    Expand

Run the app

Run the app.

When you click on a feature, a popup should appear displaying the attribute information of the selected feature.

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.