Put a Cesium Ion Access Token in React Framework

CesiumJS
1

Current i use ReactJs tu call cesium. However, i had a problem that imagery below not appear :

  1. Bing Maps Aerial
  2. Bing Maps Aerial with Label
  3. Sentinal-2
  4. Blue Marble
  5. Earth at Night

this is error request:
Resource.js:2175 GET https://api.cesium.com/v1/assets/4/endpoint?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2N2NjZjU1MS02ZDE5LTRjYzAtYjg0Zi0wODc2YjMxNGE1ZWEiLCJpZCI6MjU5LCJpYXQiOjE2MjAwNDczMDl9.159vCWIGDh0dexF393wvC4zUCbq4oZg6VkPAB5U6tg0 401.

I didn’t declare or put access token yet. But i try to put it, how ever i didn’t know know and where to put it…

Below is code i use…

import React, { useEffect, useRef } from ‘react’;

import { makeStyles } from ‘@material-ui/core/styles’;

import Lod from ‘./Lod’;

import { Viewer, Cesium3DTileset } from ‘cesium’;

import lod_dat from ‘./data_lod’;

const useStyles = makeStyles({

main: {

height:'100vh',

Width:'100vw',

}

})

const Cesium = () => {

const ref = useRef();

const classes = useStyles();


useEffect(() => {

  if (!ref.current) return;

  const viewer = new Viewer(ref.current);

  lod_dat.map((dat) => viewer.scene.primitives.add(new Cesium3DTileset({ url: dat.link })));

      

  console.log(viewer.scene.primitives);

});

return <div ref={ref} className={classes.main} />

}

export default Cesium;

Need help on this problem…

Thanks and appreciate…

2

@833e9af2bc9388b35b62

Thank you for the detailed post! The access token should go at the top of your javascript file. It should look something like

// Grant CesiumJS access to your ion assets
Cesium.Ion.defaultAccessToken = "ey........";

You can get your CesiumJS token by creating a Cesium ion account, logging in, and selecting the “Access Tokens” tab.

https://cesium.com/ion/tokens

Let me know if you have any other questions or concerns!

-Sam

3

Thanks for the shared…

if i want to add token that i create, do i need to use this keyword?
Cesium.Ion.defaultAccessToken
or no need to put default word?

4

@833e9af2bc9388b35b62

You should use the keyword and syntax that I provided. Cesium.Ion.defaultAccessToken is correct. Let me know if you have any other questions!

-Sam

5

Cesium.Ion.defaultAccessToken = process.env.REACT_APP_CESIUM_ION_TERRAIN;

I do put code above after import library and before function component.

its no define Cesium. even i was try import Cesium from ‘cesium’ & try import Cesium from ‘resium’

need your idea

1 Like
6

@833e9af2bc9388b35b62

The following line of code does not look familiar to me in the context of resium.

Cesium.Ion.defaultAccessToken = process.env.REACT_APP_CESIUM_ION_TERRAIN;

However, it is difficult for me to diagnose exactly what is going wrong without seeing the rest of your codebase. Could you possibly share your repository with the rest of the community? Sharing the exact error that you are receiving would also be helpful.

One great first step would be to work through the “Getting Started” guide on resium’s website.

This guide will help you build a base application, which should address the issue that you are having with Cesium.Ion.defaultAccessToken.

Admittedly, my experience with resium is limited. If you still are having trouble after going through the “Getting Started” guide, addressing the issue with the resium developers might help expedite your progress.

Do other community members have any suggestions?

-Sam

7

I have the same problem, no idea how to add the AccessToken to Resium. Did you find a solution ? I don’t think it’s mention anywhere in the Resium documentation.

8

fond it. :

import { Ion } from "cesium";
Ion.defaultAccessToken = "YOUR_ACCESS_TOKEN";
9

Hi @romza,

Thank you for posting an update! Happy we were able to work this out.

-Sam

10

Hi @sam.rothstein,
You’re welcome.
It’s working, but kind of not totally.
It let me access my ion asset, but the cesium player still show the : " **This application is using Cesium's default ion access token. Please assign *Cesium.Ion.defaultAccessToken* with an access token from your ion account before making any Cesium API calls. You can sign up for a free ion account a**"

Do you have an idea what can be done about it ?
Thanks !

11

Hi @romza,

That’s interesting. Are you certain that you are only using the default access token that is associated with your personal Cesium ion account?

-Sam

12

Hi Sam,
I was not, but I’m now, and it’s still the same.

13

Hi @romza,

Understood - are you having trouble accessing certain assets?

-Sam

14

No, no trouble at all, I can access them. It’s not a big issue.

15

Hi @romza,

So what exactly is the issue?

-Sam

16

Just the line saying “This application is using Cesium’s default ion access token etc” on the player, but that’s not that important, it’s only a cosmetic issue, not a functional one.

17

I have the same issue.