The above snippet creates a map using a module:ol/layer/Tile~Tile to
display module:ol/source/OSM~OSM OSM data and render it to a DOM
element with the id map.

The constructor places a viewport container (with CSS class name
ol-viewport) in the target element (see getViewport()), and then two
further elements within the viewport: one with CSS class name
ol-overlaycontainer-stopevent for controls and some overlays, and one with
CSS class name ol-overlaycontainer for other overlays (see the stopEvent
option of module:ol/Overlay~Overlay for the difference). The map
itself is placed in a further element within the viewport.

Layers are stored as a module:ol/Collection~Collection in
layerGroups. A top-level group is provided by the library. This is what is
accessed by getLayerGroup and setLayerGroup. Layers entered in the
options are added to this group, and addLayer and removeLayer change the
layer collection in the group. getLayers is a convenience function for
getLayerGroup().getLayers().
Note that module:ol/layer/Group~Group is a subclass of
module:ol/layer/Base, so layers entered in the options or added
with addLayer can be groups, which can contain further groups, and so on.

Interactions that are initially added to the map. If not specified,
module:ol/interaction~defaults is used.

keyboardEventTarget

HTMLElement
|
Document
|
string

The element to
listen to keyboard events on. This determines when the KeyboardPan and
KeyboardZoom interactions trigger. For example, if this option is set to
document the keyboard interactions will always trigger. If this option is
not specified, the element the library listens to keyboard events on is the
map target (i.e. the user-provided div for the map). If this is not
document, the target element needs to be focused for key events to be
emitted, requiring that the target element has a tabindex attribute.

Layers. If this is not defined, a map with no layers will be rendered. Note
that layers are rendered in the order supplied, so if you want, for example,
a vector layer to appear on top of a tile layer, it must come after the tile
layer.

maxTilesLoading

number

16

Maximum number tiles to load
simultaneously.

loadTilesWhileAnimating

boolean

false

When set to true, tiles
will be loaded during animations. This may improve the user experience, but
can also make animations stutter on devices with slow memory.

loadTilesWhileInteracting

boolean

false

When set to true,
tiles will be loaded while interacting with the map. This may improve the
user experience, but can also make map panning and zooming choppy on devices
with slow memory.

moveTolerance

number

1

The minimum distance in pixels the
cursor must move to be detected as a map move event instead of a click.
Increasing this value can make it easier to click on the map.

Detect features that intersect a pixel on the viewport, and execute a
callback with each intersecting feature. Layers included in the detection can
be configured through the layerFilter option in opt_options.

Feature callback. The callback will be
called with two arguments. The first argument is one
feature or
render feature at the pixel, the second is
the layer of the feature and will be null for
unmanaged layers. To stop detection, callback functions can return a
truthy value.

options

Optional options.

Name

Type

Default

Description

layerFilter

undefined
|
function

Layer filter
function. The filter function will receive one argument, the
layer-candidate and it should return a boolean value.
Only layers which are visible and for which this function returns true
will be tested for features. By default, all visible layers will be tested.

hitTolerance

number

0

Hit-detection tolerance in pixels. Pixels
inside the radius around the given position will be checked for features. This only
works for the canvas renderer and not for WebGL.

Returns:

Callback result, i.e. the return value of last
callback execution, or the first truthy callback return value.

Layer callback. This callback will receive two arguments: first is the
layer, second argument is an array representing
[R, G, B, A] pixel values (0 - 255) and will be null for layer types
that do not currently support this argument. To stop detection, callback
functions can return a truthy value.

options

Configuration options.

Name

Type

Default

Description

layerFilter

undefined
|
function

Layer filter
function. The filter function will receive one argument, the
layer-candidate and it should return a boolean value.
Only layers which are visible and for which this function returns true
will be tested for features. By default, all visible layers will be tested.

hitTolerance

number

0

Hit-detection tolerance in pixels. Pixels
inside the radius around the given position will be checked for features. This only
works for the canvas renderer and not for WebGL.

Returns:

Callback result, i.e. the return value of last
callback execution, or the first truthy callback return value.

Layer filter
function. The filter function will receive one argument, the
layer-candidate and it should return a boolean value.
Only layers which are visible and for which this function returns true
will be tested for features. By default, all visible layers will be tested.

hitTolerance

number

0

Hit-detection tolerance in pixels. Pixels
inside the radius around the given position will be checked for features. This only
works for the canvas renderer and not for WebGL.

Returns:

Get an overlay by its identifier (the value returned by overlay.getId()).
Note that the index treats string and numeric identifiers as the same. So
map.getOverlayById(2) will return an overlay with id '2' or 2.

Layer filter
function. The filter function will receive one argument, the
layer-candidate and it should return a boolean value.
Only layers which are visible and for which this function returns true
will be tested for features. By default, all visible layers will be tested.

hitTolerance

number

0

Hit-detection tolerance in pixels. Pixels
inside the radius around the given position will be checked for features. This only
works for the canvas renderer and not for WebGL.