Iframe embedded cesium map tiles blocked

CesiumJS
1

I am working on a project that brings CesiumJS into an iframe to feed data. I’ve been able to follow the quickstart guide to run Cesium in a separate app, but when conforming to the iframe framework on my project no tiles are being served in the network tab.

I am using the following setup to bring in OpenStreetMaps:

const viewer = new Viewer(this.element.id, {
    terrain: Terrain.fromWorldTerrain(),
    baseLayer: new ImageryLayer(new OpenStreetMapImageryProvider({
      url: 'https://tile.openstreetmap.org'
    })),
    geocoder: false,
    baseLayerPicker: false
  })

  viewer.camera.flyTo({
    destination: Cartesian3.fromDegrees(-122.4175, 37.655, 400),
    orientation: {
      heading: CesiumMath.toRadians(0.0),
      pitch: CesiumMath.toRadians(-15.0)
    }
  })

  // Add Cesium OSM Buildings, a global 3D buildings layer.
  const buildingTileset = await createOsmBuildingsAsync()

  viewer.scene.primitives.add(buildingTileset)

I’ve confirmed that the iframe is the issue, as the same code works when pointing the viewer to a different element, but I need to make it work from the iframe.

Is this a CORS issue? Is there a way around this?

Edit: Adding an image of what I am getting in my app

image
image1263×597 79.5 KB

2

Does the Network tab in your browser’s dev tools provide any info?
If it’s a CORS issue, you should be able to see that on one or multiple network calls.

3

I’m not seeing any requests to openstreetmaps in the network tab, while on my working test app I am seeing images coming in.

So I haven’t seen any errors either in the console or network tab.

After some digging into the source code, it seems like the processImagery function within GlobeSurfaceTile.js is running infinitely, and I’ve been able to track a few promises that never resolve.

For some more context, the iframe has a link to an es6 class that instantiates a Cesium viewer. Once the iframe loads, the viewer is initialized.

4

I was able to reproduce this in a sample project. The following code results in the same view in my other project:

window.CESIUM_BASE_URL = '/'

const element = document.querySelector('#container')
const iframe = document.createElement('iframe')
iframe.srcdoc = `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script type="module">
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrain: Cesium.Terrain.fromWorldTerrain(),
    });

    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),
      }
    });

    const buildingTileset = await Cesium.createOsmBuildingsAsync();
    viewer.scene.primitives.add(buildingTileset);
  </script>
 </div>
</body>
</html>
`
element.append(iframe)

image
image964×486 162 KB

5

image
image1113×830 74.3 KB

U May try this!