Resium over CesiumJs

Hi there,

I am about to start a big project and I wonder if Resium has all the features Cesium has. Basically I will have a lot of realtime actions where I will need to add points and graphics to the ma, after the page fully loaded.

Will glad to hear anyone take on this.

Thanks

Never heard of it until you brought it up just now. Looking it up it seems to be a superset to Cesium using the React library, hence Cesium with the C replaced with an R (sort of like how TypeScript is to JavaScript.) Being a superset naturally it will have all the features of Cesium. I suppose it you really like the React library it might be worthwhile. I’m not all that familiar with the React library so I’m not sure what sort of advantages this might bring.

https://terria.io/ might be of interest

1 Like

I used Resium as part of a prototype project last year (that we were intending to fully build out until the work got shelved for the time being). I thought it was great.

React is all about declarative UI rendering - just say “here’s what I want the UI to look like now, based on this data”. Cesium’s API is very imperative - billboardCollection.addBillboard(), etc, and that means you can’t use it directly in React. You have to add a wrapper layer on top.

I had written a blog post a few years ago about hand-writing a React wrapper layer for Cesium (Declaratively Rendering Earth in 3D, Part 2: Controlling Cesium with React). Resium is a full-blown complete version of what I was trying to do there by hand.

So yeah, being able to just render <Billboard position={pos} src={url} /> is great, as well as the fact that Resium is written in TS and so you get correct types for everything.

I would strongly recommend using Resium to anyone trying to use Cesium in a React app.

3 Likes

Good to hear thanks.

As a follow-up, I wonder - using those React components is very straight forward, but as I mentioned I am facing a flow where all the points and models added to the map are after the full page load. Meaning that for these events I cant use a React component, if I got it right. So achieving this will still be easy? (I couldn’t find a code example)

Thanks again

Not sure I follow. Can you give a concrete example?

React is specifically designed for updating the UI as data changes over time, whether it be from having fetched some new data from the server, or user interactions. That goes with what I was saying about Resium earlier, where it eliminates the need to manually create/modify things like a billboard instance or its position - you just render what the current UI should be given the current data.

1 Like

Thanks all, So after trying to implement the Redium package I faced some non Cesium issues basically in Webpack and decided to start with the CesiumJs pure javascript package.

Hopefully this will not affect performance.

Again, thanks for your help

What Webpack-related issues are you seeing? How are you building the app overall? Is it based on Create-React-App, or something else?

If you’re using CRA, I’d recommend using https://github.com/darwin-education/craco-cesium to enable adding Cesium itself to the CRA project.

This might help.. Some example config here.