# Class: View2D

## ol.View2D

An ol.View2D object represents a simple 2D view of the map.

This is the object to act upon to change the center, resolution, and rotation of the map.

### The view states

An `ol.View2D` is determined by three states: `center`, `resolution`, and `rotation`. To each state corresponds a getter and a setter. E.g. `getCenter` and `setCenter` for the `center` state.

An `ol.View2D` has a `projection`. The projection determines the coordinate system of the center, and its units determine the units of the resolution (projection units per pixel). The default projection is Spherical Mercator (EPSG:3857).

### The constraints

`setCenter`, `setResolution` and `setRotation` can be used to change the states of the view. Any value can be passed to the setters. And the value that is passed to a setter will effectively be the value set in the view, and returned by the corresponding getter.

But an `ol.View2D` object also has a resolution constraint, a rotation constraint and a center constraint.

As said above no constraints are applied when the setters are used to set new states for the view. Applying constraints is done explicitly through the use of the `constrain*` functions (`constrainResolution` and `constrainRotation` and `constrainCenter`).

The main users of the constraints are the interactions and the controls. For example, double-clicking on the map changes the view to the "next" resolution. And releasing the fingers after pinch-zooming snaps to the closest resolution (with an animation).

So the resolution constraint snaps to specific resolutions. It is determined by the following options: `resolutions`, `maxResolution`, `maxZoom`, and `zoomFactor`. If `resolutions` is set, the other three options are ignored. See `ol.View2DOptions` for more information.

The rotation constaint is currently not configurable. It snaps the rotation value to zero when approaching the horizontal.

#### new ol.View2D(opt_options) experimental

src/ol/view2d.js, line 90

  Name | Type | Description
  --- | --- | ---
  `options` | optional View2D options.
  Name | Type | Description
  --- | --- | ---
  `center` | ol.Coordinate | undefined | optional The initial center for the view. The coordinate system for the center is specified with the `projection` option. Default is `undefined`, and layer sources will not be fetched if this is not set.
  `constrainRotation` | boolean | number | undefined | optional Rotation constraint. `false` means no constraint. `true` means no constraint, but snap to zero near zero. A number constraints the rotation to that number of values. For example, `4` will constrain the rotation to 0, 90, 180, and 270 degrees. The default is `true`.
  `enableRotation` | boolean | undefined | optional Enable rotation. Default is `true`.
  `extent` | ol.Extent | undefined | optional The extent that constrains the center, in other words, center cannot be set outside this extent. Default is `undefined`.
  `maxResolution` | number | undefined | optional The maximum resolution used to determine the resolution constraint. It is used together with `minResolution` (or `maxZoom`) and `zoomFactor`. If unspecified it is calculated in such a way that the projection's validity extent fits in a 256x256 px tile. If the projection is Spherical Mercator (the default) then `maxResolution` defaults to `40075016.68557849 / 256 = 156543.03392804097`.
  `minResolution` | number | undefined | optional The minimum resolution used to determine the resolution constraint. It is used together with `maxResolution` (or `minZoom`) and `zoomFactor`. If unspecified it is calculated assuming 29 zoom levels (with a factor of 2). If the projection is Spherical Mercator (the default) then `minResolution` defaults to `40075016.68557849 / 256 / Math.pow(2, 28) = 0.0005831682455839253`.
  `maxZoom` | number | undefined | optional The maximum zoom level used to determine the resolution constraint. It is used together with `minZoom` (or `maxResolution`) and `zoomFactor`. Default is `28`. Note that if `minResolution` is also provided, it is given precedence over `maxZoom`.
  `minZoom` | number | undefined | optional The minimum zoom level used to determine the resolution constraint. It is used together with `maxZoom` (or `minResolution`) and `zoomFactor`. Default is `0`. Note that if `maxResolution` is also provided, it is given precedence over `minZoom`.
  `projection` | ol.proj.ProjectionLike | The projection. Default is `EPSG:3857` (Spherical Mercator).
  `resolution` | number | undefined | optional The initial resolution for the view. The units are `projection` units per pixel (e.g. meters per pixel). An alternative to setting this is to set `zoom`. Default is `undefined`, and layer sources will not be fetched if neither this nor `zoom` are defined.
  `resolutions` | Array.<number> | undefined | optional Resolutions to determine the resolution constraint. If set the `maxResolution`, `minResolution`, `minZoom`, `maxZoom`, and `zoomFactor` options are ignored.
  `rotation` | number | undefined | optional The initial rotation for the view in radians (positive rotation clockwise). Default is `0`.
  `zoom` | number | undefined | optional Only used if `resolution` is not defined. Zoom level used to calculate the initial resolution for the view. The initial resolution is determined using the `ol.View2D#constrainResolution` method.
  `zoomFactor` | number | undefined | optional The zoom factor used to determine the resolution constraint. Default is `2`.

  ##### Fires:

  - `beforepropertychange` (ol.ObjectEvent) experimental - Triggered before a property is changed.
  - `change:center` (ol.ObjectEvent) experimental
  - `change:projection` (ol.ObjectEvent) experimental
  - `change:resolution` (ol.ObjectEvent) experimental
  - `change:rotation` (ol.ObjectEvent) experimental
  - `propertychange` (ol.ObjectEvent) experimental - Triggered when a property is changed.

### Extends

- ol.IView2D
- ol.IView3D
- ol.View

### Observable Properties

Name | Type | Settable | ol.ObjectEvent type | Description
--- | --- | --- | --- | ---
`center` | ol.Coordinate | undefined | yes | `change:center` | The center of the view.
`projection` | ol.proj.Projection | undefined | yes | `change:projection` | The projection of the view.
`resolution` | number | undefined | yes | `change:resolution` | The resolution of the view.
`rotation` | number | undefined | yes | `change:rotation` | The rotation of the view.

### Methods

#### bindTo(key, target, opt_targetKey){ol.ObjectAccessor} inherited experimental

src/ol/object.js, line 257

  The bindTo method allows you to set up a two-way binding between a `source` and `target` object. The method returns an ol.ObjectAccessor with a transform method that lets you transform values on the way from the source to the target and on the way back.

  For example, if you had two map views (sourceView and targetView) and you wanted the target view to have double the resolution of the source view, you could transform the resolution on the way to and from the target with the following:

      sourceView.bindTo('resolution', targetView)
        .transform(
          function(sourceResolution) {
            // from sourceView.resolution to targetView.resolution
            return 2 * sourceResolution;
          },
          function(targetResolution) {
            // from targetView.resolution to sourceView.resolution
            return targetResolution / 2;
          }
        );

  Name | Type | Description
  --- | --- | ---
  `key` | string | Key name.
  `target` | ol.Object | Target.
  `targetKey` | string | optional Target key.

#### calculateExtent(size){ol.Extent} experimental

src/ol/view2d.js, line 247

  Calculate the extent for the given size in pixels, based on the current resolution and the current center.

  Name | Type | Description
  --- | --- | ---
  `size` | ol.Size | Box pixel size.

  ##### Returns:

  Extent.

#### centerOn(coordinate, size, position) experimental

src/ol/view2d.js, line 523

  Center on coordinate and view position. Take care on the map angle.

  Name | Type | Description
  --- | --- | ---
  `coordinate` | ol.Coordinate | Coordinate.
  `size` | ol.Size | Box pixel size.
  `position` | ol.Pixel | Position on the view to center on.

#### constrainCenter(center){ol.Coordinate|undefined} experimental

src/ol/view2d.js, line 191

  Get the constrained center of this view.

  Name | Type | Description
  --- | --- | ---
  `center` | ol.Coordinate | undefined | optional Center.

  ##### Returns:

  Constrained center.

#### constrainResolution(resolution, opt_delta, opt_direction){number|undefined} experimental

src/ol/view2d.js, line 204

  Get the constrained resolution of this view.

  Name | Type | Description
  --- | --- | ---
  `resolution` | number | undefined | optional Resolution.
  `delta` | number | optional Delta. Default is `0`.
  `direction` | number | optional Direction. Default is `0`.

  ##### Returns:

  Constrained resolution.

#### constrainRotation(rotation, opt_delta){number|undefined} experimental

src/ol/view2d.js, line 219

  Get the constrained rotation of this view.

  Name | Type | Description
  --- | --- | ---
  `rotation` | number | undefined | optional Rotation.
  `delta` | number | optional Delta. Default is `0`.

  ##### Returns:

  Constrained rotation.

#### dispatchChangeEvent() inherited experimental

src/ol/observable.js, line 41

  Dispatches a `change` event.

  ##### Fires:

  - `change` experimental

#### fitExtent(extent, size) experimental

src/ol/view2d.js, line 434

  Fit the given extent based on the given map size.

  Name | Type | Description
  --- | --- | ---
  `extent` | ol.Extent | Extent.
  `size` | ol.Size | Box pixel size.

#### fitGeometry(geometry, size, opt_options) experimental

src/ol/view2d.js, line 456

  Fit the given geometry based on the given map size and border. Take care on the map angle.

  Name | Type | Description
  --- | --- | ---
  `geometry` | ol.geom.SimpleGeometry | Geometry.
  `size` | ol.Size | Box pixel size.
  `options` | optional Options.
  Name | Type | Description
  --- | --- | ---
  `padding` | Array.<number> | Padding (in pixels) to be cleared inside the view. Values in the array are top, right, bottom and left padding. Default is `[0, 0, 0, 0]`.
  `constrainResolution` | boolean | undefined | optional Constrain the resolution. Default is `true`.
  `nearest` | boolean | undefined | optional Get the nearest extent. Default is `false`.
  `minResolution` | number | undefined | optional Minimum resolution that we zoom to. Default is `0`.

#### get(key){*} inherited experimental

src/ol/object.js, line 314

  Gets a value.

  Name | Type | Description
  --- | --- | ---
  `key` | string | Key name.

  ##### Returns:

  Value.

#### getCenter(){ol.Coordinate|undefined} experimental

src/ol/view2d.js, line 230

  ##### Returns:

  The center of the view.

#### getKeys(){Array.<string>} inherited experimental

src/ol/object.js, line 342

  Get a list of object property names.

  ##### Returns:

  List of property names.

#### getProjection(){ol.proj.Projection|undefined} experimental

src/ol/view2d.js, line 264

  ##### Returns:

  The projection of the view.

#### getProperties(){Object.<string, *>} inherited experimental

src/ol/object.js, line 374

  Get an object of all property names and values.

  ##### Returns:

  Object.

#### getResolution(){number|undefined} experimental

src/ol/view2d.js, line 279

  ##### Returns:

  The resolution of the view.

#### getResolutionForExtent(extent, size){number} experimental

src/ol/view2d.js, line 297

  Get the resolution for a provided extent (in map units) and size (in pixels).

  Name | Type | Description
  --- | --- | ---
  `extent` | ol.Extent | Extent.
  `size` | ol.Size | Box pixel size.

  ##### Returns:

  The resolution at which the provided extent will render at the given size.

#### getRotation(){number|undefined} experimental

src/ol/view2d.js, line 334

  ##### Returns:

  The rotation of the view.

#### getView2D(){ol.IView2D} experimental

src/ol/view2d.js, line 372

  ##### Returns:

  View2D.

#### getZoom(){number|undefined} experimental

src/ol/view2d.js, line 408

  Get the current zoom level. Return undefined if the current resolution is undefined or not a "constrained resolution".

  ##### Returns:

  Zoom.

#### notify(key) inherited experimental

src/ol/object.js, line 394

  Notify all observers of a change on this property. This notifies both objects that are bound to the object's property as well as the object that it is bound to.

  Name | Type | Description
  --- | --- | ---
  `key` | string | Key name.

#### on(type, listener, opt_this){goog.events.Key} inherited experimental

src/ol/observable.js, line 63

  Listen for a certain type of event.

  Name | Type | Description
  --- | --- | ---
  `type` | string | Array.<string> | The event type or array of event types.
  `listener` | function | The listener function.
  `this` | Object | optional The object to use as `this` in `listener`.

  ##### Returns:

  Unique key for the listener.

#### once(type, listener, opt_this){goog.events.Key} inherited experimental

src/ol/observable.js, line 76

  Listen once for a certain type of event.

  Name | Type | Description
  --- | --- | ---
  `type` | string | Array.<string> | The event type or array of event types.
  `listener` | function | The listener function.
  `this` | Object | optional The object to use as `this` in `listener`.

  ##### Returns:

  Unique key for the listener.

#### rotate(rotation, opt_anchor) experimental

src/ol/view2d.js, line 558

  Rotate the view around a given coordinate.

  Name | Type | Description
  --- | --- | ---
  `rotation` | number | New rotation value for the view.
  `anchor` | ol.Coordinate | optional The rotation center.

#### set(key, value) inherited experimental

src/ol/object.js, line 425

  Sets a value.

  Name | Type | Description
  --- | --- | ---
  `key` | string | Key name.
  `value` | * | Value.

#### setCenter(center) experimental

src/ol/view2d.js, line 573

  Set the center of the current view.

  Name | Type | Description
  --- | --- | ---
  `center` | ol.Coordinate | undefined | optional The center of the view.

#### setProjection(projection) experimental

src/ol/view2d.js, line 589

  Set the projection of this view. Warning! This code is not yet implemented. Function should not be used.

  Name | Type | Description
  --- | --- | ---
  `projection` | ol.proj.Projection | undefined | optional The projection of the view.

#### setResolution(resolution) experimental

src/ol/view2d.js, line 604

  Set the resolution for this view.

  Name | Type | Description
  --- | --- | ---
  `resolution` | number | undefined | optional The resolution of the view.

#### setRotation(rotation) experimental

src/ol/view2d.js, line 619

  Set the rotation for this view.

  Name | Type | Description
  --- | --- | ---
  `rotation` | number | undefined | optional The rotation of the view.

#### setValues(values) inherited experimental

src/ol/object.js, line 454

  Sets a collection of key-value pairs.

  Name | Type | Description
  --- | --- | ---
  `values` | Object.<string, *> | Values.

#### setZoom(zoom) experimental

src/ol/view2d.js, line 633

  Zoom to a specific zoom level.

  Name | Type | Description
  --- | --- | ---
  `zoom` | number | Zoom level.

#### un(type, listener, opt_this) inherited experimental

src/ol/observable.js, line 88

  Unlisten for a certain type of event.

  Name | Type | Description
  --- | --- | ---
  `type` | string | Array.<string> | The event type or array of event types.
  `listener` | function | The listener function.
  `this` | Object | optional The object to use as `this` in `listener`.

#### unbind(key) inherited experimental

src/ol/object.js, line 468

  Removes a binding. Unbinding will set the unbound property to the current value. The object will not be notified, as the value has not changed.

  Name | Type | Description
  --- | --- | ---
  `key` | string | Key name.

#### unbindAll() inherited experimental

src/ol/object.js, line 492

  Removes all bindings.

#### unByKey(key) inherited experimental

src/ol/observable.js, line 98

  Removes an event listener using the key returned by `on()` or `once()`.

  Name | Type | Description
  --- | --- | ---
  `key` | goog.events.Key | Key.