window limit

Hi!

I need to limit the border of the 2D view map with the window. I want to fix the map when I zoom or drag.

The image shows what I do NOT want:

How can I do it?

Thanks!

Correct me if I’m wrong, you want to limit the zoom to the point where the map fits the viewport. You wouldn’t be able to zoom out past this point:

Do you still want to be able to drag the map off the screen at this zoom?

“Correct me if I’m wrong, you want to limit the zoom to the point where the map fits the viewport. You wouldn’t be able to zoom out past this point:”

Yes, exactly it.

“Do you still want to be able to drag the map off the screen at this zoom?”

I don’t want to see the black background, so I don’t want to be able to drag the map like it:

Thank you!

For the first part, you can set the maximumZoomFactor:

scene.getCamera().controller.maximumZoomFactor = 1.0;

If you want to remove the bounce-back when the camera passes the edge of the map, you can set the maximumTranslateFactor:

scene.getCamera().controller.maximumTranslateFactor = 1.0;

There is no flag, like above, to limit the edges of the map to the window, but you can check the camera before rendering. After calling initializeFrame and before calling render, add the following code:

if (scene.mode === Cesium.SceneMode.SCENE2D) {

var projection = scene.scene2D.projection;

var maxCoord = projection.project(new Cesium.Cartographic(Math.PI, Cesium.Math.PI_OVER_TWO));

var camera = scene,getCamera();

var frustum = camera.frustum;

var minX = -maxCoord.x - frustum.left;

var maxX = maxCoord.x - frustum.right;

camera.position.x = Cesium.Math.clamp(camera.position.x, minX, maxX);

}

I hope that helps.

Works fine! Thank you!

I just add code for top and bottom:

scene.getCamera().controller.maximumZoomFactor = 0.74;

.

.

.
if (scene.mode === Cesium.SceneMode.SCENE2D) {

var projection = scene.scene2D.projection;

var maxCoord = projection.project(new Cesium.Cartographic(Math.PI, Cesium.Math.PI_OVER_TWO));

var frustum = camera.frustum;

var minX = -maxCoord.x - camera.frustum.left;

var maxX = maxCoord.x - camera.frustum.right;

camera.position.x = Cesium.Math.clamp(camera.position.x, minX, maxX);

var minY = -maxCoord.y - frustum.bottom;

var maxY = maxCoord.y - frustum.top;

camera.position.y = Cesium.Math.clamp(camera.position.y, minY, maxY);

}