v1.63 regression - window.CESIUM_BASE_URL undefined

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

ES6 is a great step forward for Cesium, but unfortunately a bug in v1.42 and 1.44 apparent in my app has now resurfaced in v1.63, namely the need to specify window.CESIUM_BASE_URL="…(Cesium directory)…"; Without the definition misc resource files are searched for in “…/undefined/Assets/…” etc. and no globe appears.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

Just a Cesium.js script without window.CESIUM_BASE_URL.

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

Production system. No problem to add the window.CESIUM_BASE_URL, but it should not be necessary.

4. The Cesium version you’re using, your operating system and browser.

v1.63, Win10 64. Opera/Chrome…

2

Thanks for bringing this up. Setting the CESIUM_BASE_URL is necessary if you’re importing CesiumJS as an ES6 module. Matt explains it a bit here:

If you are just copying the Build folder and including Cesium.js, then you don’t need to set it because we can find it automatically. We look for the location of Cesium.js script in the HTML and create a relative path from that. If you are building an app from modules, then there is no relation to where the Workers, etc… live on your server vs where your compiled JS lives, that’s when it needs to be set. It just so happens that in most modern tooling setups, this is the case.

From this GitHub issue: https://github.com/AnalyticalGraphicsInc/cesium/pull/8314#issuecomment-546487096

Although, if it fails to detect the correct base URL it should throw an error, I think. Can you describe your setup and how you’re loading in the library?

3

I’m having the same problem in that I just upgraded to Cesium 1.63, and now I’m receiving errors such as:

(running locally…)

http://localhost:8383/JS3D/undefined/Assets/approximateTerrainHeights.json net::ERR_EMPTY_RESPONSE

http://localhost:8383/JS3D/undefined/Assets/IAU2006_XYS/IAU2006_XYS_16.json net::ERR_EMPTY_RESPONSE

http://localhost:8383/JS3D/undefined/Assets/Textures/moonSmall.jpg net::ERR_EMPTY_RESPONSE

My project uses simple JavaScript, and I include/reference the Cesium Build folder, so I’m not sure why I’d be having this problem.

Additionally for some reason I’m having a hard time figuring out how to successfully set the CESIUM_BASE_URL variable.

I’m creating an instance of the Cesium Viewer as follows:

if (!document.getElementById(“divCanvas”)) {

var divCesiumContainer = document.createElement(“div”);

divCesiumContainer.id = “divCanvas”;

document.body.appendChild(divCesiumContainer);

console.log("Cesium version: " + Cesium.VERSION);

}

// Create an instance of the terrain provider to be used for retrieving elevation data elsewhere

terrainProvider = new Cesium.createWorldTerrain({

requestVertexNormals: true

});

// Set the Cesium Ion Access Token

Cesium.Ion.defaultAccessToken = cesiumDefaultAccessToken;

// Eliminate Cesium Bing Key issue

Cesium.BingMapsApi.defaultKey = ‘bogus’;

// Using Cesium viewer

var skyBoxBaseUrl = “resources/plugins/cesium/Cesium/Assets/Textures/SkyBox/tycho2t3_80”;

cesiumViewer = new Cesium.Viewer(‘divCanvas’, {

animation: false,

baseLayerPicker: false,

fullscreenButton: false,

geocoder: false,

homeButton: false,

infoBox: false,

sceneModePicker: false,

selectionIndicator: false,

timeline: false,

navigationHelpButton: false,

navigationInstructionsInitiallyVisible: false,

// This is the new Cesium terrain provider which is free until September 1, 2018

terrainProvider: terrainProvider,

skyBox: new Cesium.SkyBox({

sources : {

positiveX : skyBoxBaseUrl + ‘_px.jpg’,

negativeX : skyBoxBaseUrl + ‘_mx.jpg’,

positiveY : skyBoxBaseUrl + ‘_py.jpg’,

negativeY : skyBoxBaseUrl + ‘_my.jpg’,

positiveZ : skyBoxBaseUrl + ‘_pz.jpg’,

negativeZ : skyBoxBaseUrl + ‘_mz.jpg’

}

}),

sceneMode: Cesium.SceneMode.SCENE3D

});

``

4

Rob, are you including Cesium.js with a script tag like this?

``

If so, can you post that script tag?

5

Hi Omar,

No, I’m not including Cesium.js in that fashion. I load Cesium and other 3rd party JS libraries through a function as follows:

function preLoad(arrFiles, funcCallback) {

if (arrFiles.length === 0) return;



var i=0;

function loadScript(url, callback) {

    var head = document.getElementsByTagName("head")[0];

    var script = document.createElement("script");

    script.type = "text/javascript";

    script.src = url;

    script.onreadystatechange = callback;

    script.onload = callback;

    head.appendChild(script);

    i++;

// console.log(“Pre-loaded script '” + url + “’”);

}

var recursiveCallback = function() {

    if (i < arrFiles.length) {

        loadScript(arrFiles[i], recursiveCallback);

    }

    else {

        funcCallback();

    }

};



loadScript(arrFiles[0], recursiveCallback);

}

``

My project still recognizes the Cesium object and it seems the majority of methods/functions work. But it seems the Assets and Workers folders can’t be found.

6

Ok, here is where CesiumJS will read the script tag to get the correct URL:

It sounds like this check runs before the script tag you create is added to the DOM.

You should be able to fix it by setting the base URL to the URL that serves the Cesium.js directory. So for example if you can access Cesium.js on your server at:

http://localhost:8383/JS3D/Build/Cesium/Cesium.js

``

Then the base URL would be:

window.CESIUM_BASE_URL = ‘JS3D/Build/Cesium’;

``

7

This variable needs to be defined before Cesium loads, right?

I’m setting this variable before loading the Cesium library, but it still doesn’t work. Below you can see the function where I’ve defined the variable. This function also calls the “preLoad” function I referenced earlier and loads the Cesium.js library. You can see the path to the Cesium.js library is the same path I’m using to set the CESIUM_BAS_URL variable.

function onDeviceReady() {

showSplash();

showLoadingMessage();

showActivityIndicator(“onDeviceReady”);

// Define the CESIUM_BASE_URL

window.CESIUM_BASE_URL = “resources/plugins/cesium/Cesium”;

console.log(“Loading resources…”);

var arrFiles = [“resources/imports/Public3rdPartyCombined.js?”,

“resources/plugins/cesium/Cesium/Cesium.js?”

];

preLoad(arrFiles, afterDeviceReady);

}

``

I’m confused as to why this isn’t working.

8

Is it attempting to load the assets from a new folder now, or are you still getting the same error at:

http://localhost:8383/JS3D/undefined/Assets/approximateTerrainHeights.json

``

?

9

I’m getting the same error

10

Omar,

I figured out the problem. It was my bad.

We’re using Google’s Closure Compiler with the project, and I needed to add the CESIUM_BASE_URL variable to an extern file for CC.

Everything seems to be working now.

Thanks for the help!

Rob

11

Hi Omar,
Fyi, I do not import CesiumJS as an ES6 module, just a . It has worked like this since when I started with Cesium about v1.15, with no need to specify CESIUM_BASE_URL (other than for v1.42 and 1.44). It works again when I specify window.CESIUM_BASE_URL=’/lib/Cesium/’;