loading a czml file when launching CisiumViewer

CesiumJS
1

Hello guys

Looking at the different sujects already publuished, this is very confusing to understand how having a CZML loaded when staring CesiumViewer

Here after what I am trying but no success to have it work. This is located in the index.html file

Hope you will be able to point out the right sentences to use

Thanks

Bruno

2

With the latest release of Cesium, we’ve made this much easier. Here’s a small snippet below.

var cesiumWidget = new Cesium.Viewer(‘cesiumContainer’);

var czmlSource = new Cesium.CzmlDataSource();

czmlSource.loadUrl(url);

cesiumWidget.dataSources.add(czmlSource);

That will load the CZML, but if it’s time-dynamic, you still need to make sure you set the clock to the same time in the czml. If you are loading a CZML that you know nothing about, you can get the time settings in the CZML by calling czmlSource.getClock(), however you need to do this after the load happens. Since loadUrl returns a Promise, the code would look something like this:

czmlSource.loadUrl(url).then(function(source){

var clock = czmlSource.getClock();

});

3

Hi Matt,

Here the content on my Index.html file (in Build/apps/cesiumViewer)
This is not working. As I am really a beginner in Javascript and having no error message, I don’t know which way to search to solve
I can see only the viewer loading but not my CZML content

thanks

Bruno

Cesium Viewer
4

If you bring up the JavaScript console (In Chrome, under the Tools menu), you’ll see the error message you’re getting.

Try making your changes to the HelloWorld.html file instead, which is even simpler than the CesiumViewer application. You’ll also need to change the CSS in that file to use the CSS for the Viewer widget instead of the CesiumViewer widget by importing Cesium/Widgets/Viewer/Viewer.css.

I tried your code, and the next problem you’ll have is that the CZML file you’re trying to load from http://www.dreaminglobe.com/test.czml won’t load because your server doesn’t send the CORS header that browser require in order to request resources from different hosts. See http://enable-cors.org/ for more details. You can also just store the CZML file locally and reference it using a relative URL so that it’s served by the same host.

Alternatively, if you do want to build on the features of the CesiumViewer app, instead of putting your code directly into the HTML, you will have better results by making your changes in the non-built JavaScript source file at Apps/CesiumViewer/CesiumViewer.js.

Scott

5

HI Scott,

Many thanks

Looking in the different samples, I am now able having CesiumViewer loading a CZML file. Not evident to understand all and how to do but it is working now

Just one question about something I still not undestand

CesiumViewer is able to start when using it from the “build/Apps” folder

But when running fro the non bluid Apps folder, impossible to start it. THe loader image animation is never stoping.

THe same when running for IIS or from my localhost

thanks

Bruno

6

Try opening the Chrome developer tools before loading the page, and check for JavaScript errors in the Console tab, and also check the Network tab for files that are failing to load. That should help narrow it down.

7

For other people having this issue: This has since changed from 'czmlSource.loadUrl(url)' to 'czmlSource.load(url)' in newer versions of Cesium as far as I can tell.

8

This is correct, it is CzmlDataSource.load(url).