Views

The map object is the central component of an OpenLayers web application. It is a central place to add and remove things such as layers and controls, and bind them all together. The remaining chapters in the book will introduce you to these other things, but one of those bits is really very closely tied to the map object, and that is the view object. The view object provides the map with the information it needs to decide what location and level of detail—or zoom level—you are looking at. A view also has a projection (which we discussed in Chapter 2, Key Concepts in OpenLayers) that determines the geospatial reference system of the map.

The view Class

OpenLayers currently provides a single View class, ol.View. This class represents a simple 2D view, which can be manipulated through three key properties: center, resolution, and rotation. We will create a new instance of ol.View in the same way that we create a map object, like the following:

var view = new ol.View(ViewOptions);

We've used views in all our examples because a view is a mandatory parameter when creating a new map instance, but we haven't discussed it in detail yet. Let's dive in.

View options

The options you can use when creating a new ol.View instance are as follows:

Property	Type	Description
`center`	`ol.Coordinate` \| `undefined`	This is the initial center for the view. The coordinate system for the center is specified with the projection option. The default value is `undefined`, and if this property is not set, then layer sources will not fetch data (no map will render).
`constrainRotation`	`boolean \| number`	This option controls how the view will constrain rotation. `False` indicates no constraint. `True` indicates that the view should snap to 0 rotation when the rotation is close to zero, but otherwise, not constraint rotation. If this option is set to a number, then rotation is constrained to that many values. For instance, a value of 4 constrains to 0, 90, 180, and 270.
`enableRotation`	`boolean`	This controls whether the view can be rotated at all; the default is `true`.
`extent`	`ol.Extent \| undefined`	This establishes a constraint for the center of the view such that it always lies within this extent. If not provided (the default), the view's center is not constrained.
`maxResolution`	`number` \| `undefined`	This is the maximum resolution in projection units per pixel that the map supports. This property, combined with `minResolution`, `maxZoom`, `minZoom`, and `zoomFactor`, determines the zoom levels and resolutions that the map supports. See the section after this table for a complete description of how these properties work together.
`minResolution`	`number\|undefined`	This is the minimum resolution in projection units per pixel that the map supports.
`maxZoom`	`number` \| `undefined`	This is the maximum zoom level that the map supports.
`minZoom`	`number\|undefined`	This is the minimum zoom level that the map supports.
`projection`	`ol.proj.ProjectionLike`	This is the projection of the view; default is EPSG:3857 (Spherical Mercator).
`resolution`	`number` \| `undefined`	This is the initial resolution for the view. The units are projection units per pixel (for example, meters per pixel).
`resolutions`	`Array.<number>` \| `undefined`	These are resolutions to determine the resolution constraint. If set, the `maxResolution`, `minResolution`, `maxZoom` , `minZoom` and `zoomFactor` options are ignored.
`rotation`	`number` \| `undefined`	This is the initial rotation for the view in radians (positive rotation clockwise).
`zoom`	`number` \| `undefined`	This is the zoom level used to calculate the initial resolution for the view. The initial resolution is determined using the `constrainResolution` method.
`zoomFactor`	`number` \| `undefined`	This is the zoom factor used to determine the resolution constraint. It is used together with `maxResolution` `minResolution`, `maxZoom`, and `minZoom`. The default value is 2.

Understanding resolution

It is important to understand what is meant by the term resolution and how the various view options related to resolution work together.

In the context of OpenLayers, the term resolution means the number of projection units per pixel. A projection determines how the real world, which is a sphere, is represented in 2D space. The definition of a projection includes a number of things, including a 2D coordinate system and an algorithm for converting real-world locations (latitude and longitude) to and from the projection's coordinate system. The projection's coordinate system is defined in a particular set of units, such as meters, feet, or even decimal degrees. The projection's coordinate system has a bounding box defined as values in the projection's unit system. When we say projection units per pixel, we mean a value expressed in the unit system of the projection.

The most zoomed out state of the map will render the bounds of the projection into a 256 x 256 pixel tile. This is considered the maximum resolution and can be calculated as the width of the projection's bounds divided by 256. When the map is at its most zoomed in, the minimum resolution can be calculated as the width of the projection's bounds divided by the number of tiles wide times 256. We yet don't know how many tiles are required to draw the map at the most zoomed in level; so, this has to be known or computed in some way.

The most zoomed out state of the map is, by convention, called ZoomLevel 0. When a user zooms in or out, they change to the next zoom level. Zooming effectively changes the number of tiles used to represent the projection's bounds. The default zoom factor is 2, which means that zooming in to the next zoom level doubles the number of tiles in the map (in each dimension) and halves the resolution. If ZoomLevel 0 is 1 tile (wide and high), then ZoomLevel 1 is 4 tiles (2 wide and 2 high). ZoomLevel 3 is 16 tiles (4 wide and 4 high). In fact, the number of tiles required for the width and height of any zoom level can be easily calculated as numTiles = 2 ^ zoom. Each zoom level has a resolution defined by the projection's bounds divided by the zoom level's width in tiles. For any given zoom level z, the resolution can be computed as resolution = projection width / (2 ^ z). Likewise, the zoom level equivalent to any resolution can be computed by rearranging the algorithm to z = log(projection width / resolution)/log(2).

When a view is configured, it needs to know a maximum and minimum resolution and a zoom factor for determining the resolutions between the maximum and minimum for zooming. The View class provides several options that are used together to determine the resolution constraints. Since zoom level and resolution can be computed from each other, the constraints can be determined in terms of resolution (maxResolution and minResolution), zoom levels (minZoom is equivalent to maxResolution, maxZoom is equivalent to minResolution), or some combination of these. OpenLayers uses the resolution options in preference to the zoom options if both are provided.

In practice, it is usually sufficient to define just the maxZoom or minResolution because minZoom defaults to 0 (the maximum resolution computed from the projection bounds).

View KVO properties

As with the Map class, the View class has a number of KVO properties that have accessor methods (get and set), property binding, and events as discussed earlier:

Name	Type	Description
`center`	`ol.Coordinate`	This is the center of the view, with units determined by the projection.
`resolution`	`number`	This is the resolution of the view. The units are projection units per pixel (for example, meters per pixel).
`rotation`	`number`	This is the rotation of the view in radians (positive rotation clockwise).

View methods

The View class has several methods in addition to its properties:

Method	Parameters	Description
`calculateExtent(size)`	`size` – `ol.Size`	This calculates the extent in projection units for the given size, based on the current resolution and center.
`centerOn( coordinate )`	`coordinate – ol.Coordinate`	This centers the view at the geographic coordinate provided.
`constrainCenter( center )`	`coordinate – ol.Coordinate`	Given a center coordinate, this applies any constraints and returns the resulting coordinate.
`constrainResolution(resolution, delta, direction)`	`resolution` – `number` \| `undefined` `delta` – `number` `direction` – `number`	Given a resolution, this applies any resolution constraints and returns the resulting resolution.
`constrainRotation(rotation, delta)`	`rotation` – `number` `delta` - `number`	Given a rotation value, this applies any rotation constraint and returns the resulting rotation.
`fitExtent(extent, size)`	`extent` – `ol.Extent` `size – ol.Size`	This fits the given extent based on the given map size.
`fitGeometry(geometry, size, options)`	`geometry – ol.Geometry` `size – ol.Size` `options - Object`	This zooms the map to show the extent of a geometry in a given box size. The options object may contain any of the following: `padding`: This is an array of four numbers to use as extra padding around the geometry. The order to apply the padding values is top, right, bottom, then left. Default is all 0s (no padding). `constrainResolution`: This is a Boolean value indicating whether the resolution after zooming should be constrained to the nearest zoom level. The default value is `false`. `nearest`: This is a Boolean value used when `constrainResolution` is `true`, which indicates whether the nearest resolution should be chosen or not. If this is `false`, then the next most zoomed out resolution will be used (ensuring the geometry's extent will definitely be visible). If this is `true`, then the closest zoom level will be used, which might mean that the geometry's extent is not entirely contained after zooming. The default value is `false`. `minResolution`: This is the minimum resolution to zoom to when fitting a geometry, which can be used to prevent zooming in really far on small geometries. The default value is 0, which means zoom in as far as possible.
`getCenter()`		This returns the center of the view.
`getProjection()`		This returns the projection of the view.
`getResolutionForExtent(extent, size)`	`extent - ol.Extent` `size – ol.Size`	This computes the resolution of a given extent and map size.
`getZoom()`		This returns the zoom level of the view.
`rotate(rotation, opt_anchor)`	`rotation – number` `opt_anchor – ol.Coordinate`	This rotates the view around the specified coordinate, or the center of the map if an anchor is not provided.
`setZoom(zoom)`	`zoom` - `number`	This sets the zoom level of the view.

Previous Chapter

Events

Next Chapter

Time for action – linking two views