Adding My Own Path to Interpolation Demo

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

I'm not very familiar with Cesium, but what I want to do is use the interpolation sandcastle demo as closely as possible. Everything works perfectly in the demo, and all I'd like to do is change the demo circular path with my own coordinates. I can feed an array of each lat, lon, and altitude into Cesium, but I don't know how to use implement. Can someone please help?

Is there a particular format I should feed my coordinates and altitude into Cesium as? I read something about CZML. Can I get this to work without CZML?

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

        var viewer = new Cesium.Viewer('cesiumContainer', {
            infoBox: false, // Disable InfoBox widget
            selectionIndicator: false, // Disable selection indicator
            shouldAnimate: true, // Enable animations
            terrainProvider: Cesium.createWorldTerrain()

        // Enable lighting based on sun/moon positions
        viewer.scene.globe.enableLighting = true;

        // Enable depth testing so things behind the terrain disappear.
        viewer.scene.globe.depthTestAgainstTerrain = true;

        // Set the random number seed for consistent results.

        // Set bounds of our simulation time
        var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
        var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());

        // Make sure viewer is at the desired time.
        viewer.clock.startTime = start.clone();
        viewer.clock.stopTime = stop.clone();
        viewer.clock.currentTime = start.clone();
        viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // Loop at the end
        viewer.clock.multiplier = 10;

        // Set timeline to simulation bounds
        viewer.timeline.zoomTo(start, stop);

        // Generate a random circular pattern with varying heights.
        function computeCirclularFlight(lon, lat, radius) {
            var property = new Cesium.SampledPositionProperty();
            for (var i = 0; i <= 360; i += 45) {
                var radians = Cesium.Math.toRadians(i);
                var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
                var position = Cesium.Cartesian3.fromDegrees(lon + (radius * 1.5 * Math.cos(radians)), lat + (radius * Math.sin(radians)), Cesium.Math.nextRandomNumber() * 500 + 1750);
                property.addSample(time, position);

                // Also create a point for each sample we generate.
                    position : position,
                    point : {
                        pixelSize : 8,
                        color : Cesium.Color.TRANSPARENT,
                        outlineColor : Cesium.Color.YELLOW,
                        outlineWidth : 3
            return property;

        // Compute the entity position property.
        var position = computeCirclularFlight(-112.110693, 36.0994841, 0.03);

        // Actually create the entity
        var entity = viewer.entities.add({

            // Set the entity availability to the same interval as the simulation time.
            availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                start : start,
                stop : stop

            // Use our computed positions
            position : position,

            // Automatically compute orientation based on position movement.
            orientation : new Cesium.VelocityOrientationProperty(position),

            // Load the Cesium plane model to represent the entity
            model : {
                uri : 'Theme/lib/models/CesiumAir/Cesium_Air.gltf',
                minimumPixelSize : 64

            // Show the path as a pink line sampled in 1 second increments.
            path : {
                resolution : 1,
                material : new Cesium.PolylineGlowMaterialProperty({
                    glowPower : 0.1,
                    color : Cesium.Color.YELLOW
                width : 10

        // Add button to view the path from the top down
        Sandcastle.addDefaultToolbarButton('View Top Down', function() {
            viewer.trackedEntity = undefined;
            viewer.zoomTo(viewer.entities, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90)));

        // Add button to view the path from the side
        Sandcastle.addToolbarButton('View Side', function() {
            viewer.trackedEntity = undefined;
            viewer.zoomTo(viewer.entities, new Cesium.HeadingPitchRange(Cesium.Math.toRadians(-90), Cesium.Math.toRadians(-15), 7500));

        // Add button to track the entity as it moves
        Sandcastle.addToolbarButton('View Aircraft', function() {
            viewer.trackedEntity = entity;

        // Add a combo box for selecting each interpolation mode.
            text : 'Interpolation: Linear Approximation',
            onselect : function() {
                    interpolationDegree : 1,
                    interpolationAlgorithm : Cesium.LinearApproximation
        }, {
            text : 'Interpolation: Lagrange Polynomial Approximation',
            onselect : function() {
                    interpolationDegree : 5,
                    interpolationAlgorithm : Cesium.LagrangePolynomialApproximation
        }, {
            text : 'Interpolation: Hermite Polynomial Approximation',
            onselect : function() {
                    interpolationDegree : 2,
                    interpolationAlgorithm : Cesium.HermitePolynomialApproximation
        }], 'interpolationMenu');

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

This is a part of a dashboard displaying a flight path. The Interpolation demo works perfectly. I just need help getting my own coordinates (lat/lon) and altitude plugged in to get it to work.

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

1.58, jQuery, FF and Chrome.

You can definitely get it to work with your own coordinates without CZML. (Generally anything that can be done with CZML can be done directly with the CesiumJS API). If you can generate a list of lat/lon/height and timestamps like this:

var coordinates = [

[new Cesium.Cartographic(-1.9559153213791616,0.6300548558163418,2025.398952187393),‘2015-03-25T20:00:00Z’],

[new Cesium.Cartographic(-1.9561453591752895,0.6304250960611885,1785.3624401628974),‘2015-03-25T20:00:45Z’],

[new Cesium.Cartographic(-1.9567007195425592,0.63057845459194,2104.0739110895584),‘2015-03-25T20:01:30Z’],

[new Cesium.Cartographic(-1.957256079909829,0.6304250960611885,2169.974521152778),‘2015-03-25T20:02:15Z’],

[new Cesium.Cartographic(-1.9574861177059568,0.6300548558163419,1895.4523717973736),‘2015-03-25T20:03:00Z’],

[new Cesium.Cartographic(-1.9572560799098289,0.6296846155714955,1810.6642896295214),‘2015-03-25T20:03:45Z’],

[new Cesium.Cartographic(-1.9567007195425592,0.6295312570407436,2005.413800477372),‘2015-03-25T20:04:30Z’],

[new Cesium.Cartographic(-1.9561453591752898,0.6296846155714955,2034.6556628354876),‘2015-03-25T20:05:15Z’],

[new Cesium.Cartographic(-1.9559153213791618,0.6300548558163419,2196.4734789213817),‘2015-03-25T20:06:00Z’]



Then you can simply iterate over that, and add each to a SampledPosition property:

var property = new Cesium.SampledPositionProperty();

for (var i = 0; i < coordinates.length; i++) {

var time = Cesium.JulianDate.fromIso8601(coordinates[i][1]);

var position = Cesium.Cartographic.toCartesian(coordinates[i][0]);

property.addSample(time, position);
// Add this property as a position to your aircraft


Here’s the interpolation Sandcastle example modified to do this. Hope this helps!

This sounds like a cool application! Is it something publicly available?

Very sorry for my late reply. Thank you for your help! And sadly, this isn't public. I do wish I could share some screenshots at least.

Regarding the lat long coordinates you used as an example, what format are those? I'm currently using latitude and longitude degrees:

Example Lat: 23.2221311845936
Example Lon: -86.6146310929516

How would I get my lat/lon values into the appropriate format that you're using, such as:

[new Cesium.Cartographic(-1.9559153213791616,0.6300548558163418,2025.398952187393),'2015-03-25T20:00:00Z'],

Also, is there a way to switch cesium from 3d to 2d?

Hi Omar, do you know how I convert my lat/long coordinates to be in the format you used in var coordinates?

Those coordinates are using radians for latitude/longitude. The documentation page is a good reference on this:

There are functions there to convert from degrees to radians as well and vice versa to make this easier. And you can convert Cesium from 3D to 2D either by clicking on the widget in the top right or by initializing the viewer with the 2D scene mode (