Note: for the latter version to work, you have to delay a potential init script if it refers to DOM elements until they are visible, typically, when the app is ready. `js_initscript` is a wrapper, that executes code after the webtransport is subscribed.
```julia
cesium_module_text = """
Cesium.Ion.defaultAccessToken = '$cesium_token';
const viewer = new Cesium.Viewer('cesiumContainer', {
terrain: Cesium.Terrain.fromWorldTerrain(),
});
// Fly the camera to San Francisco at the given longitude, latitude, and height.
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-15.0),
}
});
// Add Cesium OSM Buildings, a global 3D buildings layer.
const buildingTileset = await Cesium.createOsmBuildingsAsync();
viewer.scene.primitives.add(buildingTileset);
"""
cesium_module() = [script(Stipple.js_initscript("""
newscript = document.createElement('script')
newscript.text = $(json(cesium_module_text))
newscript.type = 'module'
document.head.appendChild(newscript)
"""))]
@deps cesium_module
This PR has two parts:
route("/") do page(@init, ui, head_content = cesium_head) end
or alternatively
@page("/", ui, Stipple.ReactiveTools.DEFAULT_LAYOUT(head_content = cesium_head))