Difficulty Loading CZML

CesiumJS
1

Hi there,

I am trying to load a CZML file using CzmlDataSource.loadUrl and adding the datasource to the Cesium viewer. I have had no problems doing this in Sandcastle, but with the appliction I am working on, my CZML is not being shown in the Cesium globe.

I am using Cesium 1.6. I have a simple script that is similar to the CZML example in Sandcastle. I have a path to the CZML file that I am trying to load, and I am debugging this and I see that the GET request for the file is working (using Firebug in FireFox). I also have a print statement showing me that the viewers dataSources collection grows, so the data source is being added to it. My problem is that the Cesium globe will not show anything in CZML.

I am able to drag and drop the same CZML file onto the globe with no problems, and load the CZML using a CzmlDataSource inside of Sandcastle, but not inside on my non-Sandcastle app.

Any ideas?

I will post a code snippet here:

<div class="row">
    <div class="col-md-12">
        <div id="cesiumContainer"></div>
    </div>
</div>
<script type="text/javascript">

    var viewer = new Cesium.Viewer("cesiumContainer");

    viewer.extend(Cesium.viewerDragDropMixin);
    viewer.dropError.addEventListener(function (viewerArg, source, error) {
        window.alert('Error processing ' + source + ':' + error);
    });

    var cesiumExists = setInterval(function () {

        if (\(&quot;\#cesiumContainer&quot;\)\.length &amp;&amp; (".cesium-button cesium-toolbar-button cesium-home-button")) {
            clearInterval(cesiumExists);
            $(window).resize();
        }

    }, 100);

    \(window\)\.resize\(function \(\) \{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;("#cesiumContainer").height(\(window\)\.height\(\) \- ("#cesiumContainer").offset().top - (\(&quot;\#cesiumContainer&quot;\)\.outerHeight\(true\) \- ("#cesiumContainer").height()));
    });

    var startingLatitude = 32.71
    var startingLongitude = -92
    var startingHeight = 17000000

    //Set the cameras initial zoom position.
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(startingLongitude, startingLatitude, startingHeight)
    });

    var czmlDataSource = new Cesium.CzmlDataSource();
    czmlDataSource.loadUrl('/#//ephToCZML0.czml');
    viewer.dataSources.add(czmlDataSource);
    console.log(viewer.dataSources.length)

</script>

</script>

2

Are there any errors in the console?

loadUrl is asynchronous and so any thrown exceptions will not propagate up to the top level by themselves. You can also change your loadUrl line to the following to be sure that you are checking for all possible errors.

czmlDataSource.loadUrl(’/#//ephToCZML0.czml’).otherwise(function(e){ console.log(e.message ? e.message : e); });