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