ol. ol.Map

The map is the core component of OpenLayers. In its minimal configuration it needs a view, one or more layers, and a target container:

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

The above snippet creates a map with a MapQuest OSM layer on a 2D view and renders it to a DOM element with the id map.

new Map

Stability: experimental
Parameters:
Name Type Description
options olx.MapOptions

Map options.

Source:
  • map.js, line 170
Fires:

Extends

Observable Properties

Name Type Settable ol.ObjectEvent type Description
layergroup ol.layer.LayerGroup yes change:layergroup a layer group containing the layers in this map.
size ol.Size yes change:size the size in pixels of the map in the DOM
target string | Element yes change:target the Element or id of the Element that the map is rendered in.
view ol.IView yes change:view the view that controls this map

Methods

addControl

Stability: experimental

Add the given control to the map.

Parameters:
Name Type Description
control ol.control.Control

Control.

Source:
  • map.js, line 481

addInteraction

Stability: not documented

Add the given interaction to the map.

Parameters:
Name Type Description
interaction ol.interaction.Interaction

Interaction to add.

Source:
  • map.js, line 492

addLayer

Stability: experimental

Adds the given layer to the top of this map.

Parameters:
Name Type Description
layer ol.layer.Base

Layer.

Source:
  • map.js, line 504

addOverlay

Stability: experimental

Add the given overlay to the map.

Parameters:
Name Type Description
overlay ol.Overlay

Overlay.

Source:
  • map.js, line 516

beforeRender

Stability: experimental

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.

Parameters:
Name Type Description
var_args ol.PreRenderFunction

Any number of pre-render functions.

Source:
  • map.js, line 530

bindTo

Stability: experimental

The bindTo method allows you to set up a two-way binding between a source and target object. The method returns an ol.ObjectAccessor with a transform method that lets you 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;
    }
  );
Parameters:
Name Type Argument Description
key string

Key name.

target ol.Object

Target.

targetKey string <optional>

Target key.

Inherited From:
Source:
  • object.js, line 242
Returns:
Type
ol.ObjectAccessor

dispatchChangeEvent

Stability: experimental

Dispatches a change event. Register a listener for this event to get notified of changes.

Inherited From:
Source:
  • observable.js, line 39
Fires:
  • event:change

forEachFeatureAtPixel

Stability: not documented
Parameters:
Name Type Argument Description
pixel ol.Pixel

Pixel.

callback function

Feature callback.

this S <optional>

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.

this2 U <optional>

Value to use as this when executing layerFilter.

Source:
  • map.js, line 568
Returns:

Callback result.

Type
T | undefined

get

Stability: experimental

Gets a value.

Parameters:
Name Type Description
key string

Key name.

Inherited From:
Source:
  • object.js, line 299
Returns:

Value.

Type
*

getControls

Stability: experimental
Source:
  • map.js, line 657
Returns:

Controls.

Type
ol.Collection

getCoordinateFromPixel

Stability: not documented
Parameters:
Name Type Description
pixel ol.Pixel

Pixel.

Source:
  • map.js, line 642
Returns:

Coordinate.

Type
ol.Coordinate

getEventCoordinate

Stability: experimental

Returns the geographical coordinate for a browser event.

Parameters:
Name Type Description
event Event

Event.

Source:
  • map.js, line 590
Returns:

Coordinate.

Type
ol.Coordinate

getEventPixel

Stability: experimental

Returns the map pixel position for a browser event.

Parameters:
Name Type Description
event Event

Event.

Source:
  • map.js, line 601
Returns:

Pixel.

Type
ol.Pixel

getInteractions

Stability: experimental

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.

Source:
  • map.js, line 681
Returns:

Interactions.

Type
ol.Collection

getLayerGroup

Stability: experimental

Get the layergroup associated with this map.

Source:
  • map.js, line 691
Returns:

LayerGroup.

Type
ol.layer.Group

getLayers

Stability: experimental

Get the collection of layers associated with this map.

Source:
  • map.js, line 706
Returns:

Layers.

Type
ol.Collection | undefined

getOverlays

Stability: experimental
Source:
  • map.js, line 666
Returns:

Overlays.

Type
ol.Collection

getPixelFromCoordinate

Stability: not documented
Parameters:
Name Type Description
coordinate ol.Coordinate

Coordinate.

Source:
  • map.js, line 720
Returns:

Pixel.

Type
ol.Pixel

getProperties

Stability: experimental

Get an object of all property names and values.

Inherited From:
Source:
  • object.js, line 358
Returns:

Object.

Type
Object.<string, *>

getSize

Stability: experimental

Get the size of this map.

Source:
  • map.js, line 736
Returns:

Size.

Type
ol.Size | undefined

getTarget

Stability: experimental

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.

Source:
  • map.js, line 628
Returns:

Target.

Type
Element | string | undefined

getView

Stability: experimental

Get the view associated with this map. This can be a 2D or 3D view. A 2D view manages properties such as center and resolution.

Source:
  • map.js, line 751
Returns:

View.

Type
ol.View | undefined

getViewport

Stability: experimental
Source:
  • map.js, line 764
Returns:

Viewport.

Type
Element

notify

Stability: experimental

Notify all observers of a change on this property. This notifies both objects that are bound to the object's property as well as the object that it is bound to.

Parameters:
Name Type Description
key string

Key name.

Inherited From:
Source:
  • object.js, line 378

on

Stability: experimental

Listen for a certain type of event.

Parameters:
Name Type Argument Description
type string | Array.<string>

The event type or array of event types.

listener function

The listener function.

this Object <optional>

The object to use as this in listener.

Inherited From:
Source:
  • observable.js, line 62
Returns:

Unique key for the listener.

Type
goog.events.Key

once

Stability: experimental

Listen once for a certain type of event.

Parameters:
Name Type Argument Description
type string | Array.<string>

The event type or array of event types.

listener function

The listener function.

this Object <optional>

The object to use as this in listener.

Inherited From:
Source:
  • observable.js, line 75
Returns:

Unique key for the listener.

Type
goog.events.Key

removeControl

Stability: experimental

Remove the given control from the map.

Parameters:
Name Type Description
control ol.control.Control

Control.

Source:
  • map.js, line 1122
Returns:

The removed control of undefined if the control was not found.

Type
ol.control.Control | undefined

removeInteraction

Stability: not documented

Remove the given interaction from the map.

Parameters:
Name Type Description
interaction ol.interaction.Interaction

Interaction to remove.

Source:
  • map.js, line 1138
Returns:

The removed interaction (or undefined if the interaction was not found).

Type
ol.interaction.Interaction | undefined

removeLayer

Stability: experimental

Removes the given layer from the map.

Parameters:
Name Type Description
layer ol.layer.Base

Layer.

Source:
  • map.js, line 1156
Returns:

The removed layer or undefined if the layer was not found.

Type
ol.layer.Base | undefined

removeOverlay

Stability: experimental

Remove the given overlay from the map.

Parameters:
Name Type Description
overlay ol.Overlay

Overlay.

Source:
  • map.js, line 1170
Returns:

The removed overlay of undefined if the overlay was not found.

Type
ol.Overlay | undefined

render

Stability: not documented

Request that renderFrame_ be called some time in the future.

Source:
  • map.js, line 1108

renderSync

Stability: not documented

Render.

Source:
  • map.js, line 1100

set

Stability: experimental

Sets a value.

Parameters:
Name Type Description
key string

Key name.

value *

Value.

Inherited From:
Source:
  • object.js, line 409

setLayerGroup

Stability: experimental

Sets the layergroup of this map.

Parameters:
Name Type Description
layerGroup ol.layer.Group

Layergroup.

Source:
  • map.js, line 1296

setSize

Stability: experimental

Set the size of this map.

Parameters:
Name Type Description
size ol.Size | undefined

Size.

Source:
  • map.js, line 1310

setTarget

Stability: experimental

Set the target element to render this map into.

Parameters:
Name Type Description
target Element | string | undefined

Target.

Source:
  • map.js, line 1324

setValues

Stability: experimental

Sets a collection of key-value pairs.

Parameters:
Name Type Description
values Object.<string, *>

Values.

Inherited From:
Source:
  • object.js, line 438

setView

Stability: experimental

Set the view for this map.

Parameters:
Name Type Description
view ol.IView

View.

Source:
  • map.js, line 1338

un

Stability: experimental

Unlisten for a certain type of event.

Parameters:
Name Type Argument Description
type string | Array.<string>

The event type or array of event types.

listener function

The listener function.

this Object <optional>

The object to use as this in listener.

Inherited From:
Source:
  • observable.js, line 87

unbind

Stability: experimental

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.

Parameters:
Name Type Description
key string

Key name.

Inherited From:
Source:
  • object.js, line 452

unbindAll

Stability: experimental

Removes all bindings.

Inherited From:
Source:
  • object.js, line 476

unByKey

Stability: experimental

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

Parameters:
Name Type Description
key goog.events.Key

Key.

Inherited From:
Source:
  • observable.js, line 97

updateSize

Stability: experimental

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

Source:
  • map.js, line 1352