# Class: Overlay

## ol.Overlay

Like `ol.control.Control`, Overlays are visible widgets. Unlike Controls, they are not in a fixed position on the screen, but are tied to a geographical coordinate, so panning the map will move an Overlay but not a Control.

Example:

    var popup = new ol.Overlay({
      element: document.getElementById('popup')
    });
    popup.setPosition(coordinate);
    map.addOverlay(popup);

#### new ol.Overlay(options)

src/ol/overlay.js, line 68

  Name | Type | Description
  --- | --- | ---
  `options` | Overlay options.
  Name | Type | Description
  --- | --- | ---
  `element` | Element | undefined | optional The overlay element.
  `position` | ol.Coordinate | undefined | optional The overlay position in map projection.
  `positioning` | ol.OverlayPositioning | string | undefined | optional Positioning.
  `stopEvent` | boolean | undefined | optional Whether event propagation to the map viewport should be stopped. Default is `true`. If `true` the overlay is placed in the same container as that of the controls (`ol-overlaycontainer-stopevent`).
  `insertFirst` | boolean | undefined | optional Whether the overlay is inserted first in the overlay container, or appended. Default is `true`. If the overlay is placed in the same container as that of the controls (see the `stopEvent` option) you will probably set `insertFirst` to `true` so the overlay is displayed below the controls.
  `offsetX` | number | undefined | optional Horizontal offset in pixels. A positive will shift the overlay right. Default is `0`.
  `offsetY` | number | undefined | optional Vertical offset in pixels. A positive will shift the overlay down. Default is `0`.

  ##### Fires:

  - `beforepropertychange` (ol.ObjectEvent) experimental - Triggered before a property is changed.
  - `change:element` (ol.ObjectEvent)
  - `change:map` (ol.ObjectEvent)
  - `change:position` (ol.ObjectEvent)
  - `change:positioning` (ol.ObjectEvent)
  - `propertychange` (ol.ObjectEvent) experimental - Triggered when a property is changed.

### Extends

- ol.Object

### Observable Properties

Name | Type | Settable | ol.ObjectEvent type | Description
--- | --- | --- | --- | ---
`element` | Element | undefined | yes | `change:element` | The Element containing the overlay.
`map` | ol.Map | undefined | yes | `change:map` | The map that the overlay is part of.
`position` | ol.Coordinate | undefined | yes | `change:position` | The spatial point that the overlay is anchored at.
`positioning` | ol.OverlayPositioning | undefined | yes | `change:positioning` | How the overlay is positioned relative to its point on the map.

### 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.

#### dispatchChangeEvent() inherited experimental

src/ol/observable.js, line 41

  Dispatches a `change` event.

  ##### Fires:

  - `change` experimental

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

src/ol/object.js, line 314

  Gets a value.

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

  ##### Returns:

  Value.

#### getElement(){Element|undefined} experimental

src/ol/overlay.js, line 164

  Get the DOM element of this overlay.

  ##### Returns:

  The Element containing the overlay.

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

src/ol/object.js, line 342

  Get a list of object property names.

  ##### Returns:

  List of property names.

#### getMap(){ol.Map|undefined} experimental

src/ol/overlay.js, line 180

  Get the map associated with this overlay.

  ##### Returns:

  The map that the overlay is part of.

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

src/ol/overlay.js, line 197

  Get the current position of this overlay.

  ##### Returns:

  The spatial point that the overlay is anchored at.

#### getPositioning(){ol.OverlayPositioning|undefined} experimental

src/ol/overlay.js, line 214

  Get the current positioning of this overlay.

  ##### Returns:

  How the overlay is positioned relative to its point on the map.

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

src/ol/object.js, line 374

  Get an object of all property names and values.

  ##### Returns:

  Object.

#### 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.

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

src/ol/object.js, line 425

  Sets a value.

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

#### setElement(element) experimental

src/ol/overlay.js, line 292

  Set the DOM element to be associated with this overlay.

  Name | Type | Description
  --- | --- | ---
  `element` | Element | undefined | optional The Element containing the overlay.

#### setMap(map) experimental

src/ol/overlay.js, line 307

  Set the map to be associated with this overlay.

  Name | Type | Description
  --- | --- | ---
  `map` | ol.Map | undefined | optional The map that the overlay is part of.

#### setPosition(position)

src/ol/overlay.js, line 323

  Set the position for this overlay.

  Name | Type | Description
  --- | --- | ---
  `position` | ol.Coordinate | undefined | optional The spatial point that the overlay is anchored at.

#### setPositioning(positioning) experimental

src/ol/overlay.js, line 339

  Set the positioning for this overlay.

  Name | Type | Description
  --- | --- | ---
  `positioning` | ol.OverlayPositioning | undefined | optional how the overlay is positioned relative to its point on the map.

#### setValues(values) inherited experimental

src/ol/object.js, line 454

  Sets a collection of key-value pairs.

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

#### 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.