diff --git a/examples/geolocation.js b/examples/geolocation.js
index 99b4fcfcdb..e3b1263130 100644
--- a/examples/geolocation.js
+++ b/examples/geolocation.js
@@ -37,9 +37,9 @@ geolocation.on('change', function() {
});
var marker = new ol.Overlay({
- map: map,
element: /** @type {Element} */ ($('').addClass('icon-flag').get(0))
});
+map.addOverlay(marker);
// bind the marker position to the device location.
marker.bindTo('position', geolocation);
diff --git a/examples/icon.js b/examples/icon.js
index a2c2918f55..071dd10a16 100644
--- a/examples/icon.js
+++ b/examples/icon.js
@@ -63,9 +63,9 @@ var map = new ol.Map({
var element = document.getElementById('popup');
var popup = new ol.Overlay({
- map: map,
element: element
});
+map.addOverlay(popup);
map.on('click', function(evt) {
diff --git a/examples/overlay.js b/examples/overlay.js
index 8e44805f77..bd052fc983 100644
--- a/examples/overlay.js
+++ b/examples/overlay.js
@@ -24,17 +24,18 @@ var map = new ol.Map({
// Vienna label
var vienna = new ol.Overlay({
- map: map,
position: ol.proj.transform(
[16.3725, 48.208889], 'EPSG:4326', 'EPSG:3857'),
element: document.getElementById('vienna')
});
+map.addOverlay(vienna);
// Popup showing the position the user clicked
var popup = new ol.Overlay({
- map: map,
element: document.getElementById('popup')
});
+map.addOverlay(popup);
+
map.on('click', function(evt) {
var element = popup.getElement();
var coordinate = evt.getCoordinate();
diff --git a/examples/popup.js b/examples/popup.js
index f291751b8b..bc002694c0 100644
--- a/examples/popup.js
+++ b/examples/popup.js
@@ -7,24 +7,6 @@ goog.require('ol.proj');
goog.require('ol.source.TileJSON');
-var layer = new ol.layer.TileLayer({
- source: new ol.source.TileJSON({
- url: 'http://api.tiles.mapbox.com/v3/' +
- 'mapbox.natural-earth-hypso-bathy.jsonp',
- crossOrigin: 'anonymous'
- })
-});
-
-var map = new ol.Map({
- layers: [layer],
- target: 'map',
- view: new ol.View2D({
- center: [0, 0],
- zoom: 2
- })
-});
-
-
/**
* Elements that make up the popup.
*/
@@ -48,11 +30,32 @@ closer.onclick = function() {
* Create an overlay to anchor the popup to the map.
*/
var overlay = new ol.Overlay({
- map: map,
element: container
});
+/**
+ * Create the map.
+ */
+var map = new ol.Map({
+ layers: [
+ new ol.layer.TileLayer({
+ source: new ol.source.TileJSON({
+ url: 'http://api.tiles.mapbox.com/v3/' +
+ 'mapbox.natural-earth-hypso-bathy.jsonp',
+ crossOrigin: 'anonymous'
+ })
+ })
+ ],
+ overlays: [overlay],
+ target: 'map',
+ view: new ol.View2D({
+ center: [0, 0],
+ zoom: 2
+ })
+});
+
+
/**
* Add a click handler to the map to render the popup.
*/
diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc
index 208f3d51f1..4265022b8c 100644
--- a/src/objectliterals.jsdoc
+++ b/src/objectliterals.jsdoc
@@ -54,6 +54,8 @@
* Controls initially added to the map.
* @property {ol.Collection|undefined} interactions Interactions.
* @property {Array.|ol.Collection|undefined} layers Layers.
+ * @property {ol.Collection|Array.|undefined} overlays
+ * Overlays initially added to the map.
* @property {ol.RendererHint|undefined} renderer Renderer.
* @property {Array.|undefined} renderers Renderers.
* @property {Element|string|undefined} target The container for the map.
@@ -65,7 +67,6 @@
* Object literal with config options for the overlay.
* @typedef {Object} ol.OverlayOptions
* @property {Element|undefined} element The overlay element.
- * @property {ol.Map|undefined} map The map to overlay onto.
* @property {ol.Coordinate|undefined} position The overlay position in map
* projection.
* @property {ol.OverlayPositioning|undefined} positioning Positioning.
diff --git a/src/ol/map.exports b/src/ol/map.exports
index 7627017c2d..b6e7c8c4c6 100644
--- a/src/ol/map.exports
+++ b/src/ol/map.exports
@@ -1,6 +1,7 @@
@exportClass ol.Map ol.MapOptions
@exportProperty ol.Map.prototype.addControl
@exportProperty ol.Map.prototype.addLayer
+@exportProperty ol.Map.prototype.addOverlay
@exportProperty ol.Map.prototype.addPreRenderFunction
@exportProperty ol.Map.prototype.addPreRenderFunctions
@exportProperty ol.Map.prototype.getControls
@@ -8,9 +9,11 @@
@exportProperty ol.Map.prototype.getFeatures
@exportProperty ol.Map.prototype.getInteractions
@exportProperty ol.Map.prototype.getLayers
+@exportProperty ol.Map.prototype.getOverlays
@exportProperty ol.Map.prototype.getRenderer
@exportProperty ol.Map.prototype.removeControl
@exportProperty ol.Map.prototype.removeLayer
+@exportProperty ol.Map.prototype.removeOverlay
@exportProperty ol.Map.prototype.updateSize
@exportSymbol ol.RendererHint
diff --git a/src/ol/map.js b/src/ol/map.js
index b53816656c..dcddb06c72 100644
--- a/src/ol/map.js
+++ b/src/ol/map.js
@@ -264,6 +264,12 @@ ol.Map = function(options) {
*/
this.interactions_ = optionsInternal.interactions;
+ /**
+ * @type {ol.Collection}
+ * @private
+ */
+ this.overlays_ = optionsInternal.overlays;
+
/**
* @type {ol.renderer.Map}
* @private
@@ -334,6 +340,14 @@ ol.Map = function(options) {
control.setMap(this);
}, this);
+ this.overlays_.forEach(
+ /**
+ * @param {ol.Overlay} overlay Overlay.
+ */
+ function(overlay) {
+ overlay.setMap(this);
+ }, this);
+
};
goog.inherits(ol.Map, ol.Object);
@@ -361,6 +375,18 @@ ol.Map.prototype.addLayer = function(layer) {
};
+/**
+ * Add the given overlay to the map.
+ * @param {ol.Overlay} overlay Overlay.
+ */
+ol.Map.prototype.addOverlay = function(overlay) {
+ var overlays = this.getOverlays();
+ goog.asserts.assert(goog.isDef(overlays));
+ overlays.push(overlay);
+ overlay.setMap(this);
+};
+
+
/**
* Add a prerender function. This can be used for attaching animations to
* be performed before setting the map's center. The {@link ol.animation}
@@ -459,6 +485,14 @@ ol.Map.prototype.getControls = function() {
};
+/**
+ * @return {ol.Collection} Overlays.
+ */
+ol.Map.prototype.getOverlays = function() {
+ return this.overlays_;
+};
+
+
/**
* Get feature information for a pixel on the map.
*
@@ -854,6 +888,23 @@ ol.Map.prototype.removeLayer = function(layer) {
};
+/**
+ * Remove the given overlay from the map.
+ * @param {ol.Overlay} overlay Overlay.
+ * @return {ol.Overlay|undefined} The removed overlay of undefined
+ * if the overlay was not found.
+ */
+ol.Map.prototype.removeOverlay = function(overlay) {
+ var overlays = this.getOverlays();
+ goog.asserts.assert(goog.isDef(overlays));
+ if (goog.isDef(overlays.remove(overlay))) {
+ overlay.setMap(null);
+ return overlay;
+ }
+ return undefined;
+};
+
+
/**
* @param {number} time Time.
* @private
@@ -1042,6 +1093,7 @@ ol.Map.prototype.withFrozenRendering = function(f, opt_obj) {
/**
* @typedef {{controls: ol.Collection,
* interactions: ol.Collection,
+ * overlays: ol.Collection,
* rendererConstructor:
* function(new: ol.renderer.Map, Element, ol.Map),
* values: Object.}}
@@ -1123,9 +1175,22 @@ ol.Map.createOptionsInternal = function(options) {
var interactions = goog.isDef(options.interactions) ?
options.interactions : ol.interaction.defaults();
+ var overlays;
+ if (goog.isDef(options.overlays)) {
+ if (goog.isArray(options.overlays)) {
+ overlays = new ol.Collection(goog.array.clone(options.overlays));
+ } else {
+ goog.asserts.assertInstanceof(options.overlays, ol.Collection);
+ overlays = options.overlays;
+ }
+ } else {
+ overlays = new ol.Collection();
+ }
+
return {
controls: controls,
interactions: interactions,
+ overlays: overlays,
rendererConstructor: rendererConstructor,
values: values
};
diff --git a/src/ol/overlay.js b/src/ol/overlay.js
index c7cfc15e9a..c232f1ed11 100644
--- a/src/ol/overlay.js
+++ b/src/ol/overlay.js
@@ -42,7 +42,6 @@ ol.OverlayPositioning = {
* Example:
*
* var popup = new ol.Overlay({
- * map: map,
* element: document.getElementById('popup')
* });
* popup.setPosition(coordinate);
@@ -110,9 +109,6 @@ ol.Overlay = function(options) {
if (goog.isDef(options.positioning)) {
this.setPositioning(options.positioning);
}
- if (goog.isDef(options.map)) {
- this.setMap(options.map);
- }
};
goog.inherits(ol.Overlay, ol.Object);