Class: 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~Group 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 65
Name Type Description

Map options.

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

Controls initially added to the map. If not specified, module:ol/control/util~defaults is used.

pixelRatio number 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>

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

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.

overlays module:ol/Collection~Collection.<module:ol/Overlay~Overlay> | Array.<module:ol/Overlay~Overlay>

Overlays initially added to the map. By default, no overlays are added.

target HTMLElement | string

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.

view module:ol/View~View

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