OpenLayers 3 API Documentation

Class: Map

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:

var map = new ol.Map({
  view: new ol.View({
    center: [0, 0],
    zoom: 1
  }),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.MapQuest({layer: 'osm'})
    })
  ],
  target: 'map'
});

The above snippet creates a map using a ol.layer.Tile to display ol.source.MapQuest 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 ol.Overlay for the difference). The map itself is placed in a further element within the viewport, either DOM or Canvas, depending on the renderer.

new ol.Map(options)

src/ol/map.js, line 162
Name Type Description
options

Map options.

Name Type Description
controls ol.Collection.<ol.control.Control> | Array.<ol.control.Control> | undefined

Controls initially added to the map. If not specified, ol.control.defaults() is used.
deviceOptions olx.DeviceOptions | undefined experimental

Device options for the map.
pixelRatio number | undefined experimental

The ratio between physical pixels and device-independent pixels (dips) on the device. If undefined then it gets set by using window.devicePixelRatio.
interactions ol.Collection.<ol.interaction.Interaction> | Array.<ol.interaction.Interaction> | undefined

Interactions that are initially added to the map. If not specified, ol.interaction.defaults() is used.
keyboardEventTarget Element | Document | string | undefined experimental

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.<ol.layer.Base> | ol.Collection.<ol.layer.Base> | undefined

Layers. If this is not defined, a map with no layers will be rendered.
logo boolean | string | olx.LogoOptions | undefined

The map logo. A logo to be displayed on the map at all times. If a string is provided, it will be set as the image source of the logo. If an object is provided, the src property should be the URL for an image and the href property should be a URL for creating a link. To disable the map logo, set the option to false. By default, the OpenLayers 3 logo is shown.
overlays ol.Collection.<ol.Overlay> | Array.<ol.Overlay> | undefined

Overlays initially added to the map. By default, no overlays are added.
renderer ol.RendererType | Array.<(ol.RendererType|string)> | string | undefined

Renderer. By default, Canvas, DOM and WebGL renderers are tested for support in that order, and the first supported used. Specify a ol.RendererType here to use a specific renderer. Note that at present only the Canvas renderer supports vector data.
target Element | string | undefined

The container for the map, either the element itself or the id of the element. If not specified at construction time, ol.Map#setTarget must be called for the map to be rendered.
view ol.View | undefined

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

Extends

Observable Properties

Name Type Settable ol.ObjectEvent type Description
layerGroup ol.layer.Group yes change:layergroup

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

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

The Element or id of the Element that the map is rendered in.
view ol.View | undefined yes change:view

The view that controls this map.

Methods

addControl(control)

src/ol/map.js, line 472

Add the given control to the map.

Name Type Description
control ol.control.Control

Control.

addInteraction(interaction)

src/ol/map.js, line 484

Add the given interaction to the map.

Name Type Description
interaction ol.interaction.Interaction

Interaction to add.

addLayer(layer)

src/ol/map.js, line 496

Adds the given layer to the top of this map.

Name Type Description
layer ol.layer.Base

Layer.

addOverlay(overlay)

src/ol/map.js, line 508

Add the given overlay to the map.

Name Type Description
overlay ol.Overlay

Overlay.

beforeRender(var_args) experimental

src/ol/map.js, line 522

Add functions to be called before rendering. This can be used for attaching animations before updating the map's view. The ol.animation namespace provides several static methods for creating prerender functions.

Name Type Description
var_args ol.PreRenderFunction

Any number of pre-render functions.

bindTo(key, target, opt_targetKey){ol.ObjectAccessor} inherited experimental

src/ol/object.js, line 301

The bindTo method allows you to set up a two-way binding between a source and target object. The method returns an object with a transform method that you can use to provide from and to functions to 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

Target key.

dispatchChangeEvent() inherited experimental

src/ol/observable.js, line 42

Dispatches a change event.

Fires:
  • change experimental

forEachFeatureAtPixel(pixel, callback, opt_this, opt_layerFilter, opt_this2){T|undefined}

src/ol/map.js, line 569

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 opt_layerFilter. Feature overlays will always be included in the detection.

Name Type Description
pixel ol.Pixel

Pixel.
callback function

Feature callback. If the detected feature is not on a layer, but on a ol.FeatureOverlay, then the 2nd argument to this function will be null. To stop detection, callback functions can return a truthy value.
this S

Value to use as this when executing callback.
layerFilter function

Layer filter function, 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. Feature overlays will always be tested.
this2 U

Value to use as this when executing layerFilter.
Returns:
Callback result, i.e. the return value of last callback execution, or the first truthy callback return value.

get(key){*} inherited experimental

src/ol/object.js, line 358

Gets a value.

Name Type Description
key string

Key name.
Returns:
Value.

getControls(){ol.Collection.<ol.control.Control>}

src/ol/map.js, line 661
Returns:
Controls.

getCoordinateFromPixel(pixel){ol.Coordinate}

src/ol/map.js, line 646
Name Type Description
pixel ol.Pixel

Pixel.
Returns:
Coordinate.

getEventCoordinate(event){ol.Coordinate}

src/ol/map.js, line 591

Returns the geographical coordinate for a browser event.

Name Type Description
event Event

Event.
Returns:
Coordinate.

getEventPixel(event){ol.Pixel}

src/ol/map.js, line 602

Returns the map pixel position for a browser event.

Name Type Description
event Event

Event.
Returns:
Pixel.

getInteractions(){ol.Collection.<ol.interaction.Interaction>}

src/ol/map.js, line 684

Gets the collection of ol.interaction.Interaction instances associated with this map. 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 experimental

src/ol/object.js, line 386

Get a list of object property names.

Returns:
List of property names.

getLayerGroup(){ol.layer.Group}

src/ol/map.js, line 695

Get the layergroup associated with this map.

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

getLayers(){ol.Collection.<ol.layer.Base>|undefined}

src/ol/map.js, line 709

Get the collection of layers associated with this map.

Returns:
Layers.

getOverlays(){ol.Collection.<ol.Overlay>}

src/ol/map.js, line 670
Returns:
Overlays.

getPixelFromCoordinate(coordinate){ol.Pixel}

src/ol/map.js, line 724
Name Type Description
coordinate ol.Coordinate

Coordinate.
Returns:
Pixel.

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

src/ol/object.js, line 418

Get an object of all property names and values.

Returns:
Object.

getRevision(){number} inherited experimental

src/ol/observable.js, line 52
Returns:
Revision.

getSize(){ol.Size|undefined}

src/ol/map.js, line 750

Get the size of this map.

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

getTarget(){Element|string|undefined}

src/ol/map.js, line 631

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.

getView(){ol.View|undefined}

src/ol/map.js, line 766

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

Returns:
The view that controls this map.

getViewport(){Element}

src/ol/map.js, line 779
Returns:
Viewport.

on(type, listener, opt_this){goog.events.Key} inherited

src/ol/observable.js, line 65

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

The object to use as this in listener.
Returns:
Unique key for the listener.

once(type, listener, opt_this){goog.events.Key} inherited

src/ol/observable.js, line 78

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

The object to use as this in listener.
Returns:
Unique key for the listener.

removeControl(control){ol.control.Control|undefined}

src/ol/map.js, line 1113

Remove the given control from the map.

Name Type Description
control ol.control.Control

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

removeInteraction(interaction){ol.interaction.Interaction|undefined}

src/ol/map.js, line 1130

Remove the given interaction from the map.

Name Type Description
interaction ol.interaction.Interaction

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

removeLayer(layer){ol.layer.Base|undefined}

src/ol/map.js, line 1148

Removes the given layer from the map.

Name Type Description
layer ol.layer.Base

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

removeOverlay(overlay){ol.Overlay|undefined}

src/ol/map.js, line 1162

Remove the given overlay from the map.

Name Type Description
overlay ol.Overlay

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

render()

src/ol/map.js, line 1099

Requests a render frame; rendering will effectively occur at the next browser animation frame.

renderSync()

src/ol/map.js, line 1089

Requests an immediate render in a synchronous manner.

set(key, value) inherited experimental

src/ol/object.js, line 448

Sets a value.

Name Type Description
key string

Key name.
value *

Value.

setLayerGroup(layerGroup)

src/ol/map.js, line 1284

Sets the layergroup of this map.

Name Type Description
layerGroup ol.layer.Group

A layer group containing the layers in this map.

setProperties(values) inherited experimental

src/ol/object.js, line 477

Sets a collection of key-value pairs.

Name Type Description
values Object.<string, *>

Values.

setSize(size) experimental

src/ol/map.js, line 1299

Set the size of this map.

Name Type Description
size ol.Size | undefined

The size in pixels of the map in the DOM.

setTarget(target)

src/ol/map.js, line 1315

Set the target element to render this map into.

Name Type Description
target Element | string | undefined

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

setView(view)

src/ol/map.js, line 1330

Set the view for this map.

Name Type Description
view ol.View

The view that controls this map.

un(type, listener, opt_this) inherited

src/ol/observable.js, line 91

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

The object which was used as this by the listener.

unbind(key) inherited experimental

src/ol/object.js, line 491

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 515

Removes all bindings.

unByKey(key) inherited

src/ol/observable.js, line 101

Removes an event listener using the key returned by on() or once().

Name Type Description
key goog.events.Key

Key.

updateSize()

src/ol/map.js, line 1354

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