Class: Map

ol/Map~Map 


import Map from 'ol/Map';

The map is the core component of OpenLayers. For a map to render, a view, one or more layers, and a target container are needed:

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

var map = new Map({
  view: new View({
    center: [0, 0],
    zoom: 1
  }),
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  target: 'map'
});

The above snippet creates a map using a module:ol/layer/Tile~TileLayer 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~LayerGroup is a subclass of module:ol/layer/Base~BaseLayer, so layers entered in the options or added with addLayer can be groups, which can contain further groups, and so on.

new Map(options)

Map.js, line 57
Name Type Description
options

Map options.

Name Type Description
controls module:ol/Collection~Collection.<module:ol/control/Control~Control> | Array.<module:ol/control/Control~Control> | undefined

Controls initially added to the map. If not specified, module:ol/control.defaults is used.
pixelRatio number (defaults to window.devicePixelRatio)

The ratio between physical pixels and device-independent pixels (dips) on the device.
interactions module:ol/Collection~Collection.<module:ol/interaction/Interaction~Interaction> | Array.<module:ol/interaction/Interaction~Interaction> | undefined

Interactions that are initially added to the map. If not specified, module:ol/interaction.defaults is used.
keyboardEventTarget HTMLElement | Document | string | undefined

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 Array.<module:ol/layer/Base~BaseLayer> | module:ol/Collection~Collection.<module:ol/layer/Base~BaseLayer> | module:ol/layer/Group~LayerGroup | undefined

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 (defaults to 16)

Maximum number tiles to load simultaneously.
moveTolerance number (defaults to 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.
overlays module:ol/Collection~Collection.<module:ol/Overlay~Overlay> | Array.<module:ol/Overlay~Overlay> | undefined

Overlays initially added to the map. By default, no overlays are added.
target HTMLElement | string | undefined

The container for the map, either the element itself or the id of the element. If not specified at construction time, module:ol/Map~Map#setTarget must be called for the map to be rendered. If passed by element, the container can be in a secondary document.
view module:ol/View~View | Promise.<module:ol/View~ViewOptions> | undefined

The map's view. No layer sources will be fetched unless this is specified at construction time or through module:ol/Map~Map#setView.
Fires:

Extends

Observable Properties

Name Type Settable ol/Object.ObjectEvent type Description
layerGroup module:ol/layer/Group~LayerGroup yes change:layergroup

A layer group containing the layers in this map.
size module:ol/size~Size | undefined yes change:size

The size in pixels of the map in the DOM.
target HTMLElement | string | undefined yes change:target

The Element or id of the Element that the map is rendered in.
view module:ol/View~View yes change:view

The view that controls this map.

Methods

addControl(control) inherited

PluggableMap.js, line 544

Add the given control to the map.

Name Type Description
control module:ol/control/Control~Control

Control.

addInteraction(interaction) inherited

PluggableMap.js, line 557

Add the given interaction to the map. If you want to add an interaction at another point of the collection use getInteractions() and the methods available on module:ol/Collection~Collection. This can be used to stop the event propagation from the handleEvent function. The interactions get to handle the events in the reverse order of this collection.

Name Type Description
interaction module:ol/interaction/Interaction~Interaction

Interaction to add.

addLayer(layer) inherited

PluggableMap.js, line 568

Adds the given layer to the top of this map. If you want to add a layer elsewhere in the stack, use getLayers() and the methods available on module:ol/Collection~Collection.

Name Type Description
layer module:ol/layer/Base~BaseLayer

Layer.

addOverlay(overlay) inherited

PluggableMap.js, line 586

Add the given overlay to the map.

Name Type Description
overlay module:ol/Overlay~Overlay

Overlay.

changed() inherited

Observable.js, line 68

Increases the revision counter and dispatches a 'change' event.

dispatchEvent(event){boolean|undefined} inherited

events/Target.js, line 85

Dispatches an event and calls all listeners listening for events of this type. The event parameter can either be a string or an Object with a type property.

Name Type Description
event module:ol/events/Event~BaseEvent | string

Event object.
Returns:
false if anyone called preventDefault on the event object or if any of the listeners returned false.

forEachFeatureAtPixel(pixel, callback, opt_options){T|undefined} inherited

PluggableMap.js, line 633

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.

Name Type Description
pixel module:ol/pixel~Pixel

Pixel.
callback function

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 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 (defaults to 0)

Hit-detection tolerance in css pixels. Pixels inside the radius around the given position will be checked for features.
checkWrapped boolean (defaults to true)

Check-Wrapped Will check for for wrapped geometries inside the range of +/- 1 world width. Works only if a projection is used that can be wrapped.
Returns:
Callback result, i.e. the return value of last callback execution, or the first truthy callback return value.

forEachLayerAtPixel(pixel, callback, opt_options){T|undefined} inherited

PluggableMap.js, line 724

Please the layer.getData() method for tile layers or image layers instead of using this method.

Detect layers that have a color value at a pixel on the viewport, and execute a callback with each matching layer. Layers included in the detection can be configured through opt_layerFilter.

Note: In maps with more than one layer, this method will typically return pixel data representing the composed image of all layers visible at the given pixel – because layers will generally share the same rendering context. To force layers to render separately, and to get pixel data representing only one layer at a time, you can assign each layer a unique className in its constructor.

Name Type Description
pixel module:ol/pixel~Pixel

Pixel.
callback function

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 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 (defaults to 0)

Hit-detection tolerance in css pixels. Pixels inside the radius around the given position will be checked for features.
checkWrapped boolean (defaults to true)

Check-Wrapped Will check for for wrapped geometries inside the range of +/- 1 world width. Works only if a projection is used that can be wrapped.
Deprecated
  • Yes
Returns:
Callback result, i.e. the return value of last callback execution, or the first truthy callback return value.

get(key){*} inherited

Object.js, line 135

Gets a value.

Name Type Description
key string

Key name.
Returns:
Value.

getAllLayers(){Array.<module:ol/layer/Layer~Layer>} inherited

PluggableMap.js, line 681

Get all layers from all layer groups.

Returns:
Layers.

getControls(){module:ol/Collection~Collection.<module:ol/control/Control~Control>} inherited

PluggableMap.js, line 880

Get the map controls. Modifying this collection changes the controls associated with the map.

Returns:
Controls.

getCoordinateFromPixel(pixel){module:ol/coordinate~Coordinate} inherited

PluggableMap.js, line 849

Get the coordinate for a given pixel. This returns a coordinate in the user projection.

Name Type Description
pixel module:ol/pixel~Pixel

Pixel position in the map viewport.
Returns:
The coordinate for the pixel position.

getEventCoordinate(event){module:ol/coordinate~Coordinate} inherited

PluggableMap.js, line 776

Returns the coordinate in user projection for a browser event.

Name Type Description
event MouseEvent

Event.
Returns:
Coordinate.

getEventPixel(event){module:ol/pixel~Pixel} inherited

PluggableMap.js, line 795

Returns the map pixel position for a browser event relative to the viewport.

Name Type Description
event UIEvent

Event.
Returns:
Pixel.

getFeaturesAtPixel(pixel, opt_options){Array.<module:ol/Feature~FeatureLike>} inherited

PluggableMap.js, line 664

Get all features that intersect a pixel on the viewport.

Name Type Description
pixel module:ol/pixel~Pixel

Pixel.
options

Optional options.

Name Type 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 (defaults to 0)

Hit-detection tolerance in css pixels. Pixels inside the radius around the given position will be checked for features.
checkWrapped boolean (defaults to true)

Check-Wrapped Will check for for wrapped geometries inside the range of +/- 1 world width. Works only if a projection is used that can be wrapped.
Returns:
The detected features or an empty array if none were found.

getInteractions(){module:ol/Collection~Collection.<module:ol/interaction/Interaction~Interaction>} inherited

PluggableMap.js, line 915

Get the map interactions. Modifying this collection changes the interactions associated with the map.

Interactions are used for e.g. pan, zoom and rotate.

Returns:
Interactions.

getKeys(){Array.<string>} inherited

Object.js, line 148

Get a list of object property names.

Returns:
List of property names.

getLayerGroup(){module:ol/layer/Group~LayerGroup} inherited

PluggableMap.js, line 925

Get the layergroup associated with this map.

Returns:
A layer group containing the layers in this map.

getLayers(){module:ol/Collection~Collection.<module:ol/layer/Base~BaseLayer>} inherited

PluggableMap.js, line 951

Get the collection of layers associated with this map.

Returns:
Layers.

getOverlayById(id){module:ol/Overlay~Overlay} inherited

PluggableMap.js, line 902

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.

Name Type Description
id string | number

Overlay identifier.
Returns:
Overlay.

getOverlays(){module:ol/Collection~Collection.<module:ol/Overlay~Overlay>} inherited

PluggableMap.js, line 890

Get the map overlays. Modifying this collection changes the overlays associated with the map.

Returns:
Overlays.

getPixelFromCoordinate(coordinate){module:ol/pixel~Pixel} inherited

PluggableMap.js, line 987

Get the pixel for a coordinate. This takes a coordinate in the user projection and returns the corresponding pixel.

Name Type Description
coordinate module:ol/coordinate~Coordinate

A map coordinate.
Returns:
A pixel position in the map viewport.

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

Object.js, line 157

Get an object of all property names and values.

Returns:
Object.

getRevision(){number} inherited

Observable.js, line 79

Get the version number for this object. Each time the object is modified, its version number will be incremented.

Returns:
Revision.

getSize(){module:ol/size~Size|undefined} inherited

PluggableMap.js, line 1027

Get the size of this map.

Returns:
The size in pixels of the map in the DOM.

getTarget(){HTMLElement|string|undefined} inherited

PluggableMap.js, line 818

Get the target in which this map is rendered. Note that this returns what is entered as an option or in setTarget: if that was an element, it returns an element; if a string, it returns that.

Returns:
The Element or id of the Element that the map is rendered in.

getTargetElement(){HTMLElement} inherited

PluggableMap.js, line 831

Get the DOM element into which this map is rendered. In contrast to getTarget this method always return an Element, or null if the map has no target.

Returns:
The element that the map is rendered in.

getView(){module:ol/View~View} inherited

PluggableMap.js, line 1040

Get the view associated with this map. A view manages properties such as center and resolution.

Returns:
The view that controls this map.

getViewport(){HTMLElement} inherited

PluggableMap.js, line 1049

Get the element that serves as the map viewport.

Returns:
Viewport.

hasFeatureAtPixel(pixel, opt_options){boolean} inherited

PluggableMap.js, line 749

Detect if features intersect a pixel on the viewport. Layers included in the detection can be configured through opt_layerFilter.

Name Type Description
pixel module:ol/pixel~Pixel

Pixel.
options

Optional options.

Name Type 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 (defaults to 0)

Hit-detection tolerance in css pixels. Pixels inside the radius around the given position will be checked for features.
checkWrapped boolean (defaults to true)

Check-Wrapped Will check for for wrapped geometries inside the range of +/- 1 world width. Works only if a projection is used that can be wrapped.
Returns:
Is there a feature at the given pixel?

on(type, listener){module:ol/events~EventsKey|Array.<module:ol/events~EventsKey>} inherited

Observable.js, line 153

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.
Returns:
Unique key for the listener. If called with an array of event types as the first argument, the return will be an array of keys.

once(type, listener){module:ol/events~EventsKey|Array.<module:ol/events~EventsKey>} inherited

Observable.js, line 165

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.
Returns:
Unique key for the listener. If called with an array of event types as the first argument, the return will be an array of keys.

removeControl(control){module:ol/control/Control~Control|undefined} inherited

PluggableMap.js, line 1449

Remove the given control from the map.

Name Type Description
control module:ol/control/Control~Control

Control.
Returns:
The removed control (or undefined if the control was not found).

removeInteraction(interaction){module:ol/interaction/Interaction~Interaction|undefined} inherited

PluggableMap.js, line 1460

Remove the given interaction from the map.

Name Type Description
interaction module:ol/interaction/Interaction~Interaction

Interaction to remove.
Returns:
The removed interaction (or undefined if the interaction was not found).

removeLayer(layer){module:ol/layer/Base~BaseLayer|undefined} inherited

PluggableMap.js, line 1471

Removes the given layer from the map.

Name Type Description
layer module:ol/layer/Base~BaseLayer

Layer.
Returns:
The removed layer (or undefined if the layer was not found).

removeOverlay(overlay){module:ol/Overlay~Overlay|undefined} inherited

PluggableMap.js, line 1491

Remove the given overlay from the map.

Name Type Description
overlay module:ol/Overlay~Overlay

Overlay.
Returns:
The removed overlay (or undefined if the overlay was not found).

render() inherited

PluggableMap.js, line 1436

Request a map rendering (at the next animation frame).

renderSync() inherited

PluggableMap.js, line 1412

Requests an immediate render in a synchronous manner.

set(key, value, opt_silent) inherited

Object.js, line 207

Sets a value.

Name Type Description
key string

Key name.
value *

Value.
silent boolean | undefined

Update without triggering an event.

setLayerGroup(layerGroup) inherited

PluggableMap.js, line 1616

Sets the layergroup of this map.

Name Type Description
layerGroup module:ol/layer/Group~LayerGroup

A layer group containing the layers in this map.

setLayers(layers) inherited

PluggableMap.js, line 934

Clear any existing layers and add layers to the map.

Name Type Description
layers Array.<module:ol/layer/Base~BaseLayer> | module:ol/Collection~Collection.<module:ol/layer/Base~BaseLayer>

The layers to be added to the map.

setProperties(values, opt_silent) inherited

Object.js, line 227

Sets a collection of key-value pairs. Note that this changes any existing properties and adds new ones (it does not remove any existing properties).

Name Type Description
values Object.<string, *>

Values.
silent boolean | undefined

Update without triggering an event.

setSize(size) inherited

PluggableMap.js, line 1630

Set the size of this map.

Name Type Description
size module:ol/size~Size | undefined

The size in pixels of the map in the DOM.

setTarget(target) inherited

PluggableMap.js, line 1641

Set the target element to render this map into.

Name Type Description
target HTMLElement | string | undefined

The Element or id of the Element that the map is rendered in.

setView(view) inherited

PluggableMap.js, line 1654

Set the view for this map.

Name Type Description
view module:ol/View~View | Promise.<module:ol/View~ViewOptions>

The view that controls this map. It is also possible to pass a promise that resolves to options for constructing a view. This alternative allows view properties to be resolved by sources or other components that load view-related metadata.

un(type, listener) inherited

Observable.js, line 174

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.

unset(key, opt_silent) inherited

Object.js, line 251

Unsets a property.

Name Type Description
key string

Key name.
silent boolean | undefined

Unset without triggering an event.

updateSize() inherited

PluggableMap.js, line 1672

Force a recalculation of the map viewport size. This should be called when third-party code changes the size of the map viewport.