Merge pull request #953 from elemoine/overlay

Make ol.Overlay consistent with ol.control.Control

examples/geolocation.js

@@ -37,9 +37,9 @@ geolocation.on('change', function() {
 });
 
 var marker = new ol.Overlay({
-  map: map,
   element: /** @type {Element} */ ($('<i/>').addClass('icon-flag').get(0))
 });
+map.addOverlay(marker);
 // bind the marker position to the device location.
 marker.bindTo('position', geolocation);
 

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) {

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

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

src/objectliterals.jsdoc

@@ -54,6 +54,8 @@
  *     Controls initially added to the map.
  * @property {ol.Collection|undefined} interactions Interactions.
  * @property {Array.<ol.layer.LayerBase>|ol.Collection|undefined} layers Layers.
+ * @property {ol.Collection|Array.<ol.Overlay>|undefined} overlays
+ *     Overlays initially added to the map.
  * @property {ol.RendererHint|undefined} renderer Renderer.
  * @property {Array.<ol.RendererHint>|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.

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

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.<string, *>}}
@@ -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
   };

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