Constraining a view

There are some cases when restricting the center is not enough; the users should not pan outside an arbitrary extent. There is an easy method to do this; however, it is hard to calculate with rotations and impossible to show every part of a rotated map with a hard constrained view. In the next example, called ch06_constrain, we will implement this method.

Note

We will learn how to rotate the map later in this chapter.

An easy implementation calculates a new extent based on a more permissive, full extent for a given resolution. Then, we simply check the value of the center in every change in the map's view and snap it to our new extent's border if it tries to escape it:

map.getView().on('propertychange', function (evt) {
    var projExtent = this.getProjection().getExtent();
    if (projExtent) {
        var currentCenter = this.getCenter();
        var currentResolution = this.getResolution();
        var mapSize = map.getSize();
        var newExtent = [projExtent[0] + currentResolution...