OpenLayers 3 API Documentation

Class: Map

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.MapQuest({layer: 'osm'})
    })
  ],
  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 ol.Map(options) experimental

src/ol/map.js, line 154

Name Type Description

options

Map options.

Name	Type	Description
`controls`	ol.Collection \| Array.<ol.control.Control> \| undefined	optional Controls initially added to the map.
`deviceOptions`	olx.DeviceOptions \| undefined	optional Device options for the map.
`pixelRatio`	number \| undefined	optional The ratio between physical pixels and device-independent pixels (dips) on the device. If `undefined` then it gets set by using `ol.BrowserFeature.DEVICE_PIXEL_RATIO`.
`interactions`	ol.Collection \| Array.<ol.interaction.Interaction> \| undefined	optional Interactions that are initially added to the map.
`keyboardEventTarget`	Element \| Document \| string \| undefined	optional 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 \| undefined	optional Layers.
`ol3Logo`	boolean \| undefined	optional Show ol3 logo. Default is `true`.
`overlays`	ol.Collection \| Array.<ol.Overlay> \| undefined	optional Overlays initially added to the map.
`renderer`	ol.RendererType \| Array.<(ol.RendererType\|string)> \| string \| undefined	optional Renderer.
`target`	Element \| string \| undefined	optional The container for the map.
`view`	ol.IView \| undefined	optional The map's view.

Fires:

beforepropertychange (ol.ObjectEvent) experimental - Triggered before a property is changed.
change:layergroup (ol.ObjectEvent) experimental
change:size (ol.ObjectEvent) experimental
change:target (ol.ObjectEvent) experimental
change:view (ol.ObjectEvent) experimental
click (ol.MapBrowserEvent) experimental - A click with no dragging. A double click will fire two of this.
dblclick (ol.MapBrowserEvent) experimental - A true double click, with no dragging.
moveend (ol.MapEvent) experimental - Triggered after the map is moved.
pointerdrag (ol.MapBrowserEvent) experimental - Triggered when a pointer is dragged.
pointermove (ol.MapBrowserEvent) experimental - Triggered when a pointer is moved.
postcompose (ol.render.Event) experimental
postrender (ol.MapEvent) experimental - Triggered after a map frame is rendered.
precompose (ol.render.Event) experimental
propertychange (ol.ObjectEvent) experimental - Triggered when a property is changed.
singleclick (ol.MapBrowserEvent) experimental - A true single click with no dragging and no double click. Note that this event is delayed by 250 ms to ensure that it is not a double click.

Extends

ol.Object

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.IView \| undefined	yes	`change:view`	The view that controls this map.

Methods

addControl(control) experimental src/ol/map.js, line 462

Add the given control to the map.

Name	Type	Description
`control`	ol.control.Control	Control.

addInteraction(interaction) experimental src/ol/map.js, line 474

Add the given interaction to the map.

Name	Type	Description
`interaction`	ol.interaction.Interaction	Interaction to add.

addLayer(layer) experimental src/ol/map.js, line 486

Adds the given layer to the top of this map.

Name	Type	Description
`layer`	ol.layer.Base	Layer.

addOverlay(overlay) experimental src/ol/map.js, line 498

Add the given overlay to the map.

Name	Type	Description
`overlay`	ol.Overlay	Overlay.

beforeRender(var_args) experimental src/ol/map.js, line 512

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	repeatable Any number of pre-render functions.

bindTo(key, target, opt_targetKey){ol.ObjectAccessor} inherited experimental src/ol/object.js, line 257

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;
    }
  );

Name	Type	Description
`key`	string	Key name.
`target`	ol.Object	Target.
`targetKey`	string	optional Target key.

dispatchChangeEvent() inherited experimental src/ol/observable.js, line 41

Dispatches a change event.

Fires:

change experimental

forEachFeatureAtPixel(pixel, callback, opt_this, opt_layerFilter, opt_this2){T|undefined} experimental src/ol/map.js, line 551

Name	Type	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`.

Returns:

Callback result.

get(key){*} inherited experimental src/ol/object.js, line 314

Gets a value.

Name	Type	Description
`key`	string	Key name.

Returns:

Value.

getControls(){ol.Collection} experimental src/ol/map.js, line 643

Returns:

Controls.

getCoordinateFromPixel(pixel){ol.Coordinate} experimental src/ol/map.js, line 628

Name	Type	Description
`pixel`	ol.Pixel	Pixel.

Returns:

Coordinate.

getEventCoordinate(event){ol.Coordinate} experimental src/ol/map.js, line 573

Returns the geographical coordinate for a browser event.

Name	Type	Description
`event`	Event	Event.

Returns:

Coordinate.

getEventPixel(event){ol.Pixel} experimental src/ol/map.js, line 584

Returns the map pixel position for a browser event.

Name	Type	Description
`event`	Event	Event.

Returns:

Pixel.

getInteractions(){ol.Collection} experimental src/ol/map.js, line 666

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 342

Get a list of object property names.

Returns:

List of property names.

getLayerGroup(){ol.layer.Group} experimental src/ol/map.js, line 677

Get the layergroup associated with this map.

Returns:

A layer group containing the layers in this map.

getLayers(){ol.Collection|undefined} experimental src/ol/map.js, line 692

Get the collection of layers associated with this map.

Returns:

Layers.

getOverlays(){ol.Collection} experimental src/ol/map.js, line 652

Returns:

Overlays.

getPixelFromCoordinate(coordinate){ol.Pixel} experimental src/ol/map.js, line 707

Name	Type	Description
`coordinate`	ol.Coordinate	Coordinate.

Returns:

Pixel.

getProperties(){Object.<string, *>} inherited experimental src/ol/object.js, line 374

Get an object of all property names and values.

Returns:

Object.

getSize(){ol.Size|undefined} experimental src/ol/map.js, line 733

Get the size of this map.

Returns:

The size in pixels of the map in the DOM.

getTarget(){Element|string|undefined} experimental src/ol/map.js, line 613

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.IView|undefined} experimental src/ol/map.js, line 749

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.

Returns:

The view that controls this map.

getViewport(){Element} experimental src/ol/map.js, line 762

Returns:

Viewport.

notify(key) inherited experimental src/ol/object.js, line 394

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.

Name	Type	Description
`key`	string	Key name.

on(type, listener, opt_this){goog.events.Key} inherited experimental src/ol/observable.js, line 63

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	optional The object to use as `this` in `listener`.

Returns:

Unique key for the listener.

once(type, listener, opt_this){goog.events.Key} inherited experimental src/ol/observable.js, line 76

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	optional The object to use as `this` in `listener`.

Returns:

Unique key for the listener.

removeControl(control){ol.control.Control|undefined} experimental src/ol/map.js, line 1096

Remove the given control from the map.

Name	Type	Description
`control`	ol.control.Control	Control.

Returns:

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

removeInteraction(interaction){ol.interaction.Interaction|undefined} experimental src/ol/map.js, line 1113

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} experimental src/ol/map.js, line 1131

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} experimental src/ol/map.js, line 1145

Remove the given overlay from the map.

Name	Type	Description
`overlay`	ol.Overlay	Overlay.

Returns:

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

render() experimental src/ol/map.js, line 1082

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

renderSync() experimental src/ol/map.js, line 1072

Requests an immediate render in a synchronous manner.

set(key, value) inherited experimental src/ol/object.js, line 425

Sets a value.

Name	Type	Description
`key`	string	Key name.
`value`	*	Value.

setLayerGroup(layerGroup) experimental src/ol/map.js, line 1272

Sets the layergroup of this map.

Name	Type	Description
`layerGroup`	ol.layer.Group	A layer group containing the layers in this map.

setSize(size) experimental src/ol/map.js, line 1287

Set the size of this map.

Name	Type	Description
`size`	ol.Size \| undefined	optional The size in pixels of the map in the DOM.

setTarget(target) experimental src/ol/map.js, line 1303

Set the target element to render this map into.

Name	Type	Description
`target`	Element \| string \| undefined	optional The Element or id of the Element that the map is rendered in.

setValues(values) inherited experimental src/ol/object.js, line 454

Sets a collection of key-value pairs.

Name	Type	Description
`values`	Object.<string, *>	Values.

setView(view) experimental src/ol/map.js, line 1318

Set the view for this map.

Name	Type	Description
`view`	ol.IView	The view that controls this map.

un(type, listener, opt_this) inherited experimental src/ol/observable.js, line 88

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	optional The object to use as `this` in `listener`.

unbind(key) inherited experimental src/ol/object.js, line 468

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 492

Removes all bindings.

unByKey(key) inherited experimental src/ol/observable.js, line 98

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

Name	Type	Description
`key`	goog.events.Key	Key.

updateSize() experimental src/ol/map.js, line 1342

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