Move registration point of globe

Hi all,

I am in the middle of implementing a redesign of a Cesium based project.

For desktop users I am looking to move the registration point of the globe 25% to the left of the page. This gives me space on the right for a piece of UI overlaying the globe, and allows me to center the globe in the space left over on the left.

I have been looking at the strafing code which is executed when you hold the shift key down while dragging the globe. But this still keeps the camera centered, causing the globe to be seen from the side.

Does anyone have any directions or tips on how to go about such a thing?


Does the following not produce the desired effect?

var viewer = new Cesium.Viewer(‘cesiumContainer’);;


It does allow you to see a bit more of the right side of the globe than you can when the globe is centered. If you’re trying to avoid that it sounds like what you want to do is push the canvas itself, not the camera?

Thanks Omar!

I started looking at Camera#moveRight, but I haven’t been able to figure out how to move it by exactly the right amount of pixels though. In my app I am mainly using Camera#flyTo to fly between markers. How would I correct the Cartesian3 I am flying to in order to make the camera land in the correct position?

Some code which I was hoping would work – but does not:

var moveScratch = new Cartesian3();

const adjustHorizontalPosition = (position, amount) => {

const pixelSize = camera.getPixelSize(





Cartesian3.multiplyByScalar(, pixelSize * amount, moveScratch);

Cartesian3.add(position, moveScratch, position);

return position;


How do you mean pushing the canvas? (I want the globe to show through underneath the UI on the right, so just working with a smaller canvas is not really an option here…)