Cesium setup within Primefaces

CesiumJS
1

Hi,

I’m new to Cesium but I’m attempting to integrate Cesium into a xhtml page that uses primefaces for its layout and widgets etc. Using the basic HelloWorld example works but when i copy that lines to display the map into my xhtml page i get the following error:

uncaught exception: DeveloperError: canvasDimensions.x must be greater than zero.
e@http://localhost:8080/GSN/resources/Cesium/Cesium.js:325
u.prototype.getPixelSize@http://localhost:8080/GSN/resources/Cesium/Cesium.js:345
r.prototype.getPixelSize@http://localhost:8080/GSN/resources/Cesium/Cesium.js:345
L.prototype.update@http://localhost:8080/GSN/resources/Cesium/Cesium.js:341
q.prototype.render@http://localhost:8080/GSN/resources/Cesium/Cesium.js:348
y.prototype.render@http://localhost:8080/GSN/resources/Cesium/Cesium.js:352
y@http://localhost:8080/GSN/resources/Cesium/Cesium.js:352

http://localhost:8080/GSN/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces
Line 14

I can see from fire bug (on firefox) that the css page and script file can be found.

For reference my xhtml:

        <html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:p="http://primefaces.org/ui"
  xmlns:pe="http://primefaces.org/ui/extensions" xmlns:c="http://java.sun.com/jsp/jstl/core">

<f:view contentType="text/html">
    <h:head>

        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
            <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
            <title>GSN</title>
        </f:facet>

</pe:layout>

</h:body>
</f:view>

Any ideas would be greatly received!

Thanks.

2

I believe your issue is that the “cesiumContainer” div has no size set via CSS, so it collapses to being 0 pixels in size. Try setting width and height for that div to 100%.

3

Adding a height and width to the div did not help. Changing the layout to primefaces rather than primefaces extensions did seem to fix this problem so that the Cesium widget did appear but the dimensions and ratio was incorrect. I’ll have to look into other avenues for a 3D visualization because i just can’t get Cesium to work with primefaces.

Thanks for the reply.