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.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.

experimental new ol.Map(options)

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

Map options.

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

Controls initially added to the map.
deviceOptions olx.DeviceOptions | undefined

Device options for the map.
pixelRatio number | undefined

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 | Array.<ol.interaction.Interaction> | undefined

Interactions that are initially added to the map.
keyboardEventTarget Element | 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.<ol.layer.Base> | ol.Collection | undefined

Layers.
ol3Logo boolean | undefined

Show ol3 logo. Default is true.
overlays ol.Collection | Array.<ol.Overlay> | undefined

Overlays initially added to the map.
renderer ol.RendererHint | Array.<(ol.RendererHint|string)> | string | undefined

Renderer.
target Element | string | undefined

The container for the map.
view ol.IView | undefined

The map's view.
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.IView | undefined yes change:view

The view that controls this map.

Methods

experimental addControl(control)

src/ol/map.js, line 465

Add the given control to the map.

Name Type Description
control ol.control.Control

Control.

experimental addInteraction(interaction)

src/ol/map.js, line 477

Add the given interaction to the map.

Name Type Description
interaction ol.interaction.Interaction

Interaction to add.

experimental addLayer(layer)

src/ol/map.js, line 489

Adds the given layer to the top of this map.

Name Type Description
layer ol.layer.Base

Layer.

experimental addOverlay(overlay)

src/ol/map.js, line 501

Add the given overlay to the map.

Name Type Description
overlay ol.Overlay

Overlay.

experimental beforeRender(var_args)

src/ol/map.js, line 515

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.

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

src/ol/object.js, line 247

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 Argument Description
key string

Key name.
target ol.Object

Target.
targetKey string <optional>
 optional

Target key.

experimental inherited dispatchChangeEvent()

src/ol/observable.js, line 39

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

Fires:
  • change

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

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

Pixel.
callback function

Feature callback.
this S <optional>
 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>
 optional

Value to use as this when executing layerFilter.
Returns:
result.

experimental inherited get(key){*}

src/ol/object.js, line 304

Gets a value.

Name Type Description
key string

Key name.

experimental getControls(){ol.Collection}

src/ol/map.js, line 646

experimental getCoordinateFromPixel(pixel){ol.Coordinate}

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

Pixel.

experimental getEventCoordinate(event){ol.Coordinate}

src/ol/map.js, line 576

Returns the geographical coordinate for a browser event.

Name Type Description
event Event

Event.

experimental getEventPixel(event){ol.Pixel}

src/ol/map.js, line 587

Returns the map pixel position for a browser event.

Name Type Description
event Event

Event.

experimental getInteractions(){ol.Collection}

src/ol/map.js, line 669

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:
ol.interaction.Interaction Interactions}.

experimental inherited getKeys(){Array.<string>}

src/ol/object.js, line 332

Get a list of object property names.

Returns:
of property names.

experimental getLayerGroup(){ol.layer.Group}

src/ol/map.js, line 680

Get the layergroup associated with this map.

Returns:
layer group containing the layers in this map.

experimental getLayers(){ol.Collection|undefined}

src/ol/map.js, line 695

Get the collection of layers associated with this map.

experimental getOverlays(){ol.Collection}

src/ol/map.js, line 655

experimental getPixelFromCoordinate(coordinate){ol.Pixel}

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

Coordinate.

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

src/ol/object.js, line 364

Get an object of all property names and values.

experimental getSize(){ol.Size|undefined}

src/ol/map.js, line 727

Get the size of this map.

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

experimental getTarget(){Element|string|undefined}

src/ol/map.js, line 616

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:
Element or id of the Element that the map is rendered in.

experimental getView(){ol.IView|undefined}

src/ol/map.js, line 743

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:
view that controls this map.

experimental getViewport(){Element}

src/ol/map.js, line 756

experimental inherited notify(key)

src/ol/object.js, line 384

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.

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

src/ol/observable.js, line 61

Listen for a certain type of event.

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

The event type or array of event types.
listener function

The listener function.
this Object <optional>
 optional

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

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

src/ol/observable.js, line 74

Listen once for a certain type of event.

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

The event type or array of event types.
listener function

The listener function.
this Object <optional>
 optional

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

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

src/ol/map.js, line 1089

Remove the given control from the map.

Name Type Description
control ol.control.Control

Control.
Returns:
removed control of undefined if the control was not found.

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

src/ol/map.js, line 1106

Remove the given interaction from the map.

Name Type Description
interaction ol.interaction.Interaction

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

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

src/ol/map.js, line 1124

Removes the given layer from the map.

Name Type Description
layer ol.layer.Base

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

experimental removeOverlay(overlay){ol.Overlay|undefined}

src/ol/map.js, line 1138

Remove the given overlay from the map.

Name Type Description
overlay ol.Overlay

Overlay.
Returns:
removed overlay of undefined if the overlay was not found.

experimental render()

src/ol/map.js, line 1075

Request that renderFrame_ be called some time in the future.

experimental renderSync()

src/ol/map.js, line 1066

Render.

experimental inherited set(key, value)

src/ol/object.js, line 415

Sets a value.

Name Type Description
key string

Key name.
value *

Value.

experimental setLayerGroup(layerGroup)

src/ol/map.js, line 1262

Sets the layergroup of this map.

Name Type Description
layerGroup ol.layer.Group

A layer group containing the layers in this map.

experimental setSize(size)

src/ol/map.js, line 1277

Set the size of this map.

Name Type Description
size ol.Size | undefined

The size in pixels of the map in the DOM.

experimental setTarget(target)

src/ol/map.js, line 1293

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.

experimental inherited setValues(values)

src/ol/object.js, line 444

Sets a collection of key-value pairs.

Name Type Description
values Object.<string, *>

Values.

experimental setView(view)

src/ol/map.js, line 1308

Set the view for this map.

Name Type Description
view ol.IView

The view that controls this map.

experimental inherited un(type, listener, opt_this)

src/ol/observable.js, line 86

Unlisten for a certain type of event.

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

The event type or array of event types.
listener function

The listener function.
this Object <optional>
 optional

The object to use as this in listener.

experimental inherited unbind(key)

src/ol/object.js, line 458

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.

experimental inherited unbindAll()

src/ol/object.js, line 482

Removes all bindings.

experimental inherited unByKey(key)

src/ol/observable.js, line 96

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

Name Type Description
key goog.events.Key

Key.

experimental updateSize()

src/ol/map.js, line 1332

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