# Module: ol/Overlay

This documentation is for OpenLayers v10.9.0. The latest is v.

## ol/Overlay

### Classes

Overlay

### Type Definitions

#### Options{Object}

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `id` | number | string | undefined | Set the overlay id. The overlay id can be used with the `getOverlayById` method.
  `element` | HTMLElement | undefined | The overlay element.
  `offset` | Array.<number> (defaults to [0, 0]) | Offsets in pixels used when positioning the overlay. The first element in the array is the horizontal offset. A positive value shifts the overlay right. The second element in the array is the vertical offset. A positive value shifts the overlay down.
  `position` | Coordinate | undefined | The overlay position in map projection.
  `positioning` | Positioning (defaults to 'top-left') | Defines how the overlay is actually positioned with respect to its `position` property. Possible values are `'bottom-left'`, `'bottom-center'`, `'bottom-right'`, `'center-left'`, `'center-center'`, `'center-right'`, `'top-left'`, `'top-center'`, and `'top-right'`.
  `stopEvent` | boolean (defaults to true) | Whether event propagation to the map viewport should be stopped. If `true` the overlay is placed in the same container as that of the controls (CSS class name `ol-overlaycontainer-stopevent`); if `false` it is placed in the container with CSS class name specified by the `className` property.
  `insertFirst` | boolean (defaults to true) | Whether the overlay is inserted first in the overlay container, or appended. 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.
  `autoPan` | PanIntoViewOptions | boolean (defaults to false) | Pan the map when calling `setPosition`, so that the overlay is entirely visible in the current viewport.
  `className` | string (defaults to 'ol-overlay-container ol-selectable') | CSS class name.

#### OverlayObjectEventTypes{Types} {'change:element'} {'change:map'} {'change:offset'} {'change:position'} {'change:positioning'}

#### PanIntoViewOptions{Object}

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `animation` | PanOptions (defaults to {}) | The animation parameters for the pan
  `margin` | number (defaults to 20) | The margin (in pixels) between the overlay and the borders of the map when panning into view.

#### PanOptions{Object}

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `duration` | number (defaults to 1000) | The duration of the animation in milliseconds.
  `easing` | function | undefined | The easing function to use. Can be one from `ol/easing` or a custom function. Default is `inAndOut`.

#### Positioning{'bottom-left'} {'bottom-center'} {'bottom-right'} {'center-left'} {'center-center'} {'center-right'} {'top-left'} {'top-center'} {'top-right'}

  The overlay position: `'bottom-left'`, `'bottom-center'`, `'bottom-right'`, `'center-left'`, `'center-center'`, `'center-right'`, `'top-left'`, `'top-center'`, or `'top-right'`.