Entity Descriptions not rendering if CDN Import is used

CesiumJS
1

Hi all,

I’m encountering an issue when trying to build off of the QuickStart guide using the CDN import method. I used the code in the CDN import method from the QuickStart guide (link), and then expanded it by working my way through some of the entity creation demos. However, I cannot get the entity description to render in the InfoBox when using the CDN import method.

description
description732×632 341 KB

It works just fine in Sandcastle (here’s a link to one I made).

description2
description21897×560 207 KB

I have some suspicion as to why this is occurring. When running the code from the Cesium QuickStart guide, a console error is raised:

caught TypeError: Cannot read properties of null (reading 'createElement')
    at HTMLIFrameElement.<anonymous> (Cesium.js:56:182157)
(anonymous) @ Cesium.js:56
load

This error does not prevent the globe for rendering, and all the demos and examples can be done just fine despite this error. However, I suspect that it may be causing my issue with the description not rendering. Here’s a small code snippet from the offending section of code in cesium.js:

o.addEventListener("load", (function() {
            const e = o.contentDocument  
              , n = e.createElement("link");  // This is the line that throws the error
            n.href = buildModuleUrl("Widgets/InfoBox/InfoBoxDescription.css"),  // Therefore this wont run
            n.rel = "stylesheet",
            n.type = "text/css";
            const i = e.createElement("div");
            i.className = "cesium-infoBox-description",

The error is thrown right before some configuration of the InfoBoxDescription occurs, and therefore it appears to me that this is causing an issue with the rendering of the InfoBox description. Please note that I am new to Cesium, and I could be way off base here. Would anyone be able to help me devise a solution to this problem? Or a work-around? I’m working on a project that would require the CDN method and would also greatly benefit from using the InfoBox description.

Here’s the HTML file I was using:

<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.105.1/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.105.1/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>

<body>
	<div id="cesiumContainer"></div>
  <script>

    // Access Token
    Cesium.Ion.defaultAccessToken = 'XXXXXXXXXXXXXXXXXXXXx'

    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
    const viewer = new Cesium.Viewer('cesiumContainer');

    // Add scene entities
    const scene_objects = [];
    var entity = ''
    
    var point1 = viewer.entities.add({
		name : "Point 1", position : Cesium.Cartesian3.fromDegrees(-75.000000000, 45.000000000, 0.000000000),
		point : {pixelSize : 10, color : Cesium.Color.GREEN}
	})
	point1.description = "<p>This is a point</p>"
	scene_objects.push(point1)


	// Zoom to last object
    viewer.zoomTo(scene_objects[scene_objects.length-1]);
  </script>
</body>
</html>

Note that this problem was identified in an earlier post, but the issue remained unsolved.

Entity description not displaying - CesiumJS - Cesium Community

Version: 1.105.1
Attempted on Chrome and Edge

2

Hi @slindsay, when I run your sample HTML file, the infoBox works as expected. I don’t see any console errors.

image
image868×695 65.6 KB

Are you running this HTML as a standalone page, or inside an iframe?

3

Interesting…

I’m running this HTML file as a standalone page.

4

@slindsay Are you serving your HTML file, or running it off disk? There can be some security implications when running directly out of the file system that can prevent needed files from being loaded at runtime.

1 Like
5

I am running directly off of disk. Doing so is very helpful to my use case, since it allows the easy embedding of CesiumJS windows into existing auto-generated HTML reports, that can then be accessed with ease by anyone (no knowledge of anything required except how to open a file). CesiumJS enables a much more interactive (and interesting!) way of manually analyzing the geospatial data we obtain. So I’d like to keep doing it this way. If this requires being locked out of certain cosmetic features (like entity descriptions), then I will find a work-around to display text-based information to the user and won’t lose sleep over it. However, if some other features will be unavailable as a result of this approach, I’d like to know before I spend too much time developing a CesiumJS-based solution to our geospatial visualization needs. Are there any additional problems that running locally off-disk will cause? So far, I have not had any issues, with the exception of the description text not displaying.

6

Fair enough! I just wanted to make the disclaimer that this is not the intended use case.

The only problem I’ve seen so far with running off disk is the infobox issue you’ve described here.

7

If I find anything else that does not work quite right in my development, I’ll be sure to make a post to make it known.

Thanks for the replies on this issue, and big thank you working on awesome open-source projects like this!

2 Likes