Put a Cesium Ion Access Token in React Framework

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…

@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

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?

@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

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

@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