How can I properly get Cesium to load when placed in a div that sits on a tab control and lives on something like the third tab which is not visible upon page load?
There is no error but when i finally navigate to the tab the contains the cesium viewer, and then try to load czml in client-side code, nothing will show up, even though i can see that the datasource is loaded when debugging the client-side javascript.
I do notice that if i happen to drag a .czml file onto the viewer, everything shows up correctly.
I would like to implement something like the cesiumjs homepage, where the viewer doesn't activate until the user clicks on an image, but I'd rather not use an iframe. Is it possible to have Cesium load on-demand like that?
load cesium in a div that has an absolute positioned off the screen positioned outside the client width or height, rather than hidden, when you want to show it, reposition it , I used this trick to load, google maps, google earth and cesium at the same time , with some toggle buttons to switch back and for between the different api’s
yes, i see how that would work, except the problem is that my div container is positioned inside a div that jquery is transforming into tabs. by doing this, jquery hides the div container, which is different than simply positioning it out of view. The problem is the visibility, and i had the exact same issue with the Google Earth plugin.
What i'm doing right now, is dropping an iframe into the div container. Then i let the user choose when to start the interaction similar to the main page at Cesiumjs.org. Then, using css, i can repostion and resize the div container to allow the user to enlarge/shrink the cesium viewer so that it can occupy the full extent of the client area, if they so choose.
so, i am kinda doing what you mentioned, except for a different purpose.
I’m not super familiar with tabs in jquery but if you can post an example we can run I’d be happy to take a look. (JSFiddle is probably ideal in this case). One suggestion I would make is calling viewer.resize() on tab activation so that Cesium properly resizes to it’s new display size. That may be the source of your problems (but like I said, I’ve never used jquery tabs before).