I was trying to load cesium into a react skeleton, and I was running into several issues. I installed cesium with npm, but I couldn’t get Cesium to load with require. Plus I was exactly sure how to load cesium within a component, although I had several ideas that I thought would have worked. I ended up getting the Viewer to load, but ran into a error deep down in the Viewer constructor( this._dataSourceAdded is not a function line 675 ). After finding that error, I decided to load the CesiumWidget and I was able to finally get the load correctly. I saw the information about Aditya Raisinghani’s project, but it doesn’t look like that project is open source.
Has anyone successfully loaded the cesium viewer into a react component?
Scott
Hi Scott,
The new user interface in Australia’s NationalMap / TerriaJS uses React:
https://github.com/NICTA/nationalmap/tree/newui
Our approach is to keep Cesium “outside” the React DOM so we don’t have to fight it. If React were to repeatedly create/destroy the Cesium window according to its component life cycle, that would be bad, but of course there are other ways to avoid that if you don’t like our approach.
We also use our own fork of Cesium, published to npm as terriajs-cesium, that makes it easier to use with webpack and also fixes some minor things for our applications.
This is very much a work in progress, but let me know if you have questions.
Kevin
Thanks, wow this is a lot of work.
I’d like to see the newui running either locally or on the web. I’m a little confused how to get the newui running locally. I did pull down the newui for both nationalmap and terriajs so I’ve been able to look through the code. Is the nationalmap the only example of using the ReactViews? I see that http://nationalmap.gov.au/ is not using the newui.
I just found the nationalmap wiki, so I’m reading through that now. Thanks again, Scott
Hi,
You can try a running version here:
http://nationalmap.research.nicta.com.au/newui/
(no guarantee this is in a working state at all times, but we try)
The new UI is in heavy development at the moment, but the plan is to roll it out on nationalmap.gov.au in the next couple of months. It will also be used by a bunch of other TerriaJS-based projects.
We’re in the middle of a major doc overhaul, but the instructions here should be pretty good for building and running it locally:
https://github.com/TerriaJS/terriajs/tree/master/Documentation/Deployment
The only thing I might add is that, if you’re running with TerriaJS npm link’d, you should run npm install repeatedly until it stops installing stuff, first in the NationalMap folder and then in the TerriaJS folder. npm is shockingly buggy when it comes to npm link. 
Pop into our gitter if you have trouble.
https://gitter.im/TerriaJS/terriajs
Kevin
Yep, I’m in development on an application right now, and so far it’s great. See my thread at https://groups.google.com/forum/#!topic/cesium-dev/Ay7fbqDxyqw , and my sample project config over at https://github.com/markerikson/react-redux-cesium-testing-demo. Feel free to ask if you have any questions on it.
Greetings! Would you be so kind as to elaborate on how you were able to mitigate the ‘this._dataSourceAdded is not a function’ error? I’m encountering the same error when loading Cesium into a Drupal 7 project. Everything seems to function just fine, other than the dataSources.
Here was my SO post, just in case => http://stackoverflow.com/questions/39428929/cesium-in-drupal-load-viewer-on-a-page-using-drupal-behaviors
Thanks!
Emmanuel
Hi Kevin,
I'm in the same situation, must integrate multiple Cesium globes in a React app.
Our approach is to keep Cesium "outside" the React DOM so we don't have to fight it. If React were to repeatedly create/destroy the Cesium window according to its component life cycle, that would be bad, but of course there are other ways to avoid that if you don't like our approach.
Which other ways are you thinking of? Here are my initial ideas, but since I'm just starting the integration, none of them are yet tested:
Thanks!
Norman