Error with Google API key

CesiumJS
1

Been trying to use the new Google Tileset but Im getting an error with the key:

Error loading Photorealistic 3D Tiles tileset.
Request has failed. Status Code: 403

and the code…

Cesium.Ion.defaultAccessToken = "<MY CESIUM TOKEN>";
Cesium.GoogleMaps.defaultApiKey = "<MY GOOGLE API KEY";

async function main() {
  const viewer = new Cesium.Viewer("cesiumContainer", {
    timeline: false,
    animation: false,
    sceneModePicker: false,
    baseLayerPicker: false,
  });

  // The globe does not need to be displayed,
  // since the Photorealistic 3D Tiles include terrain
  viewer.scene.globe.show = false;

  // Add Photorealistic 3D Tiles
  try {
    const tileset = await Cesium.createGooglePhotorealistic3DTileset();
    viewer.scene.primitives.add(tileset);
  } catch (error) {
    console.log(`Error loading Photorealistic 3D Tiles tileset.\n${error}`);
  }

  viewer.scene.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(
      174.7615727937406,
      -36.84333832264615,
      400
    ),
    orientation: {
      heading: 2.165775125478591,
      pitch: -0.5620692967690193,
      roll: 6.283180485546438
    }
  });
}

main();
1 Like
2

I got the same error and solved it by going to the Network section in Chrome Dev Tools to view the error response. It gave me a link where I needed to enable permissions for using Google Tilesets.

I’m not sure if this was the exact link but it should work for you… Google Cloud console

1 Like
3

Legend thanks so much!

4

Hi, I got the same error.

And I already set the permissions for Map Tiles API. However, after some 3DTiles are loaded, 403 errors are displayed and the tiles do not seem to display properly. (Please see screenshot) For example, Is there a need to set a limit on the amount of tile used on Google Cloud Console?

Screenshot 2023-05-11 at 15.39.40
Screenshot 2023-05-11 at 15.39.401920×1584 113 KB

5

It should just work. I haven’t had to manage any tiling size or anything.

6

Thanks, it seems that it just took some time for the API Key public range setting to take effect. Now it works fine.

https://tweet.mapping.jp/

1 Like
7

I would say it also has to do with all of those API calls to the thousands of tweets you have going on at the same time.

8

Even if the api shows as on in google console it need s to be added to the key specifically

and you may have blocked
“Requests from referer https://sandcastle.cesium.com/ are blocked.”

9

Tried adding photoreal tiles to

no errors, no tiles… somebody managed with web pack or can see my mistake?
Are there additional settings? Somebody able to upgrade the example?

import { Ion, Viewer, createGooglePhotorealistic3DTileset, GoogleMaps, createWorldTerrain, Cartesian3, Math } from “cesium”;
import “cesium/Build/Cesium/Widgets/widgets.css”;
import “…/src/css/main.css”

Ion.defaultAccessToken = ‘e…’;
GoogleMaps.defaultApiKey = “A…”;

const viewer = new Viewer(“cesiumContainer”, {
timeline: false,
animation: false,
sceneModePicker: false,
baseLayerPicker: false,
});

const tileset = await createGooglePhotorealistic3DTileset();
tileset.debugShowViewerRequestVolume = true;
viewer.scene.primitives.add(tileset);
console.log("tileset: ", tileset._url)

10

I think I am facing the same situation, and not knowing what’s the problem.
To provide more in details from my side.
I am using the cesium-webpack-example from the github repo, and I revised the code in index.js to the following as the previous comment.

import * as Cesium from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
import "../src/css/main.css"

// Your access token can be found at: https://cesium.com/ion/tokens.
// This is the default access token
Cesium.Ion.defaultAccessToken = 'e.....';
Cesium.GoogleMaps.defaultApiKey = 'A....;

async function main() {
  const viewer = new Cesium.Viewer("cesiumContainer", {
    timeline: false,
    animation: false,
    sceneModePicker: false,
    baseLayerPicker: false,
  });

  // // The globe does not need to be displayed,
  // // since the Photorealistic 3D Tiles include terrain
  viewer.scene.globe.show = false;

  // Add Photorealistic 3D Tiles
  try {
    const tileset = await Cesium.createGooglePhotorealistic3DTileset();
    console.log(tileset)
    viewer.scene.primitives.add(tileset);
    console.log(viewer.scene.primitives)
  } catch (error) {
    console.log(`Error loading Photorealistic 3D Tiles tileset.\n${error}`);
  }

  viewer.scene.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(
      174.7615727937406,
      -36.84333832264615,
      400
    ),
    orientation: {
      heading: 2.165775125478591,
      pitch: -0.5620692967690193,
      roll: 6.283180485546438
    }
  });
}

main();

The console.log()s showed there are something already be put in viewer.scene.primitives but somehow not being displayed.

image
image1920×1331 179 KB

I am not that familiar with GCP and billing account, does it mean it ran some requests already? but still no 3D buildings shown.

image
image1106×311 19.7 KB

If anyone has any comments will be appreciated. thanks

While I have no problem use a simple html file to show the buildings. I followed this example code and only changed the API token.

image
image807×755 135 KB

1 Like
11

Great with the latest “1.105.2”, let me know if it doesnt work for you and i push it to github

image
image1920×1066 477 KB

12

Thank you. It works

1 Like
13

I’m having struggle finding this option. Can you please help me find it.