Display czml in plotly Dash app

Dear Cesium community,

I am trying to display a set of orbits from a CZML file in a plotly dash application. The problem is that when I run the application the orbits are not rendered, only the globe is displayed. The time displayed is the current time, and not the time in the CZML file.

This is the czml file I’m using → simple.czml (246.7 KB)

The program to launch the Dash app is below, I run this in a Jupyter notebook cell:

import dash
import dash_html_components as html
from dash.dependencies import Input, Output

external_css = ['https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css']
external_scripts = [{'src':'https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js'}]

app = dash.Dash(__name__, 
                title='Cesium Test',
                external_scripts=external_scripts,
                external_stylesheets=external_css)

app.layout = html.Div(id='blah',
                      children=[
                          'Testing...',
                          html.Div(id='cesiumContainer')
                      ])

app.clientside_callback(
    '''
    function(id) {
        Cesium.Ion.defaultAccessToken = 'my_access_token';

        const viewer = new Cesium.Viewer(id, {
          shouldAnimate: true,
        });
        
        var czmlStream = new Cesium.CzmlDataSource();
        viewer.dataSources.add(czmlStream.load('simple.czml'));  
      
        viewer.camera.flyHome(0);
        
        return true;
    }  
    ''',
    Output('cesiumContainer', 'data-done'),
    Input('cesiumContainer', 'id')
)

if __name__ == '__main__':
    app.run_server(debug=True, use_reloader=False)

The simple.czml file is located in the same folder as the jupyter notebook. I am not sure what I am doing wrong. When I put the same JS code in a html file and run it in a local python http server, it works properly and I can see the orbits rendered just fine. I think the problem is in loading the czml file on the Dash server, but I am unable to fix it.

Please help me figure out where I am going wrong. Thanks!

Hi @Komal_Gupta

I am not familiar with Dash/Jupyter, but based on the information you’ve provided, it seems like the CesiumJS application is unable to resolve/request the URL for the CZML file. Is this example being run in a browser environment? If so, could you check the URL that is being requested for the simple.czml request?

Hi @sanjeetsuhag ,

Thanks a lot for your reply. As you correctly mentioned, the issue was with Cesium not being able to resolve the URL of the CZML file when using streamlit/plotly dash. I could not figure out how to fix this problem; instead I created a separate Flask app with pure HTML, CSS and JS for the frontend, which does the job equally well.