# window limit

**URL:** <https://community.cesium.com/t/window-limit/205>\
**Category:** CesiumJS\
**Created:** [January 3, 2013, 1:44pm UTC](https://community.cesium.com/t/window-limit/205 "2013-01-03T13:44:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tamy](https://avatars.discourse-cdn.com/v4/letter/t/bbe5ce/32.png) [@Tamy](https://community.cesium.com/u/Tamy)\
**Post date:** [January 3, 2013, 1:44pm UTC](https://community.cesium.com/t/window-limit/205/1 "2013-01-03T13:44:26Z")

</div>

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:

[![](https://lh4.googleusercontent.com/-uc6AQwvTxwo/UOWK56sLQBI/AAAAAAAAAC8/H6DOMX25XHI/s320/window.png)](https://lh4.googleusercontent.com/-uc6AQwvTxwo/UOWK56sLQBI/AAAAAAAAAC8/H6DOMX25XHI/s1600/window.png)

How can I do it?

Thanks!

---

<div class="post-metadata">

**Author:** ![Dan\_Bagnell](https://avatars.discourse-cdn.com/v4/letter/d/ba9def/32.png) [@Dan\_Bagnell](https://community.cesium.com/u/Dan_Bagnell)\
**Post date:** [January 4, 2013, 11:01pm UTC](https://community.cesium.com/t/window-limit/205/2 "2013-01-04T23:01:26Z")

</div>

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:

[![](https://lh4.googleusercontent.com/-rR4jHyYl8Qk/UOddWmFqYGI/AAAAAAAAABo/PN5dGFG0om8/s320/max_2d.jpg)](https://lh4.googleusercontent.com/-rR4jHyYl8Qk/UOddWmFqYGI/AAAAAAAAABo/PN5dGFG0om8/s1600/max_2d.jpg)

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

---

<div class="post-metadata">

**Author:** ![Tamy](https://avatars.discourse-cdn.com/v4/letter/t/bbe5ce/32.png) [@Tamy](https://community.cesium.com/u/Tamy)\
**Post date:** [January 7, 2013, 10:14am UTC](https://community.cesium.com/t/window-limit/205/3 "2013-01-07T10:14:56Z")

</div>

_“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:

[![](https://lh6.googleusercontent.com/-DgMydvbXipc/UOqf4jYpaWI/AAAAAAAAADM/T4kUHzT6VvQ/s320/screen.png)](https://lh6.googleusercontent.com/-DgMydvbXipc/UOqf4jYpaWI/AAAAAAAAADM/T4kUHzT6VvQ/s1600/screen.png)

Thank you!

---

<div class="post-metadata">

**Author:** ![Dan\_Bagnell](https://avatars.discourse-cdn.com/v4/letter/d/ba9def/32.png) [@Dan\_Bagnell](https://community.cesium.com/u/Dan_Bagnell)\
**Post date:** [January 7, 2013, 7:14pm UTC](https://community.cesium.com/t/window-limit/205/4 "2013-01-07T19:14:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Tamy](https://avatars.discourse-cdn.com/v4/letter/t/bbe5ce/32.png) [@Tamy](https://community.cesium.com/u/Tamy)\
**Post date:** [January 8, 2013, 4:31pm UTC](https://community.cesium.com/t/window-limit/205/5 "2013-01-08T16:31:32Z")

</div>

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);

}