Adding Cesium app to Plotly Dash Doesn’t Work

Question

I’m trying to integrate Cesium into my Plotly Dash application but it doesn’t render the Cesium app in Plotly Dash when I run this locally from my Jupyter notebook. My python code is as follows:

import dash
import dash_html_components as html
external_css = ['https://cesium.com/downloads/cesiumjs/releases/1.76/Build/Cesium/Widgets/widgets.css']

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

app.layout = html.Div(id='blah',
                      children=[
                          'Testing...',
                          html.Script(src='https://cesium.com/downloads/cesiumjs/releases/1.76/Build/Cesium/Cesium.js'),
                          html.Div(id='cesiumContainer'),
                          html.Script('''
          Cesium.Ion.defaultAccessToken = 'any_code_works';
          var viewer = new Cesium.Viewer('cesiumContainer');
                          ''')
                      ])

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

Here is a working example (Click on the “Show” button to see it renders the Cesium app):

https://glitch.com/edit/#!/hyper-sixth-hope?path=index.html%3A17%3A11

Answer 1

@alexcjohnson helped me over on the Plotly community

Here's the working code:

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

external_css = ['https://cesium.com/downloads/cesiumjs/releases/1.76/Build/Cesium/Widgets/widgets.css']
external_scripts = [{'src':'https://cesium.com/downloads/cesiumjs/releases/1.76/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 = "any_code_works";
        var viewer = new Cesium.Viewer(id);
        return true;
    }
    ''',
    Output('cesiumContainer', 'data-done'),
    Input('cesiumContainer', 'id')
)

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