Add an offset property to ol.Overlay

Replaces "offsetX" and "offsetY" by an ol.Object "offset" property.

externs/olx.js

@@ -203,12 +203,11 @@ olx.MapOptions.prototype.view;
 /**
  * Object literal with config options for the overlay.
  * @typedef {{element: (Element|undefined),
+ *     offset: (Array.<number>|undefined),
  *     position: (ol.Coordinate|undefined),
  *     positioning: (ol.OverlayPositioning|string|undefined),
  *     stopEvent: (boolean|undefined),
- *     insertFirst: (boolean|undefined),
+ *     insertFirst: (boolean|undefined)}}
- *     offsetX: (number|undefined),
- *     offsetY: (number|undefined)}}
  * @todo api
  */
 olx.OverlayOptions;
@@ -221,6 +220,16 @@ olx.OverlayOptions;
 olx.OverlayOptions.prototype.element;
 
 
+/**
+ * Offsets in pixels used when positioning the overlay. The fist element in the
+ * array is the horizontal offset. A positive value shifts the overlay right.
+ * The second element in the array is the vertical offset. A positive value
+ * shifts the overlay down. Default is `[0, 0]`.
+ * @type {Array.<number>|undefined}
+ */
+olx.OverlayOptions.prototype.offset;
+
+
 /**
  * The overlay position in map projection.
  * @type {ol.Coordinate|undefined}
@@ -254,22 +263,6 @@ olx.OverlayOptions.prototype.stopEvent;
 olx.OverlayOptions.prototype.insertFirst;
 
 
-/**
- * Horizontal offset in pixels. A positive will shift the overlay right. Default
- * is `0`.
- * @type {number|undefined}
- */
-olx.OverlayOptions.prototype.offsetX;
-
-
-/**
- * Vertical offset in pixels. A positive will shift the overlay down. Default is
- * `0`.
- * @type {number|undefined}
- */
-olx.OverlayOptions.prototype.offsetY;
-
-
 /**
  * Object literal with config options for the Proj4js projection.
  * @typedef {{code: string,

src/ol/overlay.js

@@ -19,6 +19,7 @@ goog.require('ol.Object');
 ol.OverlayProperty = {
   ELEMENT: 'element',
   MAP: 'map',
+  OFFSET: 'offset',
   POSITION: 'position',
   POSITIONING: 'positioning'
 };
@@ -82,18 +83,6 @@ ol.Overlay = function(options) {
    */
   this.stopEvent_ = goog.isDef(options.stopEvent) ? options.stopEvent : true;
 
-  /**
-   * @private
-   * @type {number}
-   */
-  this.offsetX_ = goog.isDef(options.offsetX) ? options.offsetX : 0;
-
-  /**
-   * @private
-   * @type {number}
-   */
-  this.offsetY_ = goog.isDef(options.offsetY) ? options.offsetY : 0;
-
   /**
    * @private
    * @type {Element}
@@ -131,6 +120,10 @@ ol.Overlay = function(options) {
       this, ol.Object.getChangeEventType(ol.OverlayProperty.MAP),
       this.handleMapChanged, false, this);
 
+  goog.events.listen(
+      this, ol.Object.getChangeEventType(ol.OverlayProperty.OFFSET),
+      this.handleOffsetChanged, false, this);
+
   goog.events.listen(
       this, ol.Object.getChangeEventType(ol.OverlayProperty.POSITION),
       this.handlePositionChanged, false, this);
@@ -143,6 +136,9 @@ ol.Overlay = function(options) {
   if (goog.isDef(options.element)) {
     this.setElement(options.element);
   }
+  if (goog.isDef(options.offset)) {
+    this.setOffset(options.offset);
+  }
   if (goog.isDef(options.position)) {
     this.setPosition(options.position);
   }
@@ -155,6 +151,14 @@ ol.Overlay = function(options) {
 goog.inherits(ol.Overlay, ol.Object);
 
 
+/**
+ * Default offsets.
+ * @type {Array.<number>}
+ * @private
+ */
+ol.Overlay.offset_ = [0, 0];
+
+
 /**
  * Get the DOM element of this overlay.
  * @return {Element|undefined} The Element containing the overlay.
@@ -187,6 +191,22 @@ goog.exportProperty(
     ol.Overlay.prototype.getMap);
 
 
+/**
+ * Get the offset of this overlay.
+ * @return {Array.<number>|undefined} The offset.
+ * @todo observable
+ * @todo api
+ */
+ol.Overlay.prototype.getOffset = function() {
+  return /** @type {Array.<number>|undefined} */ (
+      this.get(ol.OverlayProperty.OFFSET));
+};
+goog.exportProperty(
+    ol.Overlay.prototype,
+    'getOffset',
+    ol.Overlay.prototype.getOffset);
+
+
 /**
  * Get the current position of this overlay.
  * @return {ol.Coordinate|undefined} The spatial point that the overlay is
@@ -267,6 +287,14 @@ ol.Overlay.prototype.handleMapPostrender = function() {
 };
 
 
+/**
+ * @protected
+ */
+ol.Overlay.prototype.handleOffsetChanged = function() {
+  this.updatePixelPosition_();
+};
+
+
 /**
  * @protected
  */
@@ -313,6 +341,21 @@ goog.exportProperty(
     ol.Overlay.prototype.setMap);
 
 
+/**
+ * Set the offset for this overlay.
+ * @param {Array.<number>|undefined} offset Offset.
+ * @todo observable
+ * @todo api
+ */
+ol.Overlay.prototype.setOffset = function(offset) {
+  this.set(ol.OverlayProperty.OFFSET, offset);
+};
+goog.exportProperty(
+    ol.Overlay.prototype,
+    'setOffset',
+    ol.Overlay.prototype.setOffset);
+
+
 /**
  * Set the position for this overlay.
  * @param {ol.Coordinate|undefined} position The spatial point that the overlay
@@ -365,6 +408,10 @@ ol.Overlay.prototype.updatePixelPosition_ = function() {
   var mapSize = map.getSize();
   goog.asserts.assert(goog.isDef(mapSize));
   var style = this.element_.style;
+  var offset = this.getOffset();
+  if (!goog.isDef(offset)) {
+    offset = ol.Overlay.offset_;
+  }
   var positioning = this.getPositioning();
   if (positioning == ol.OverlayPositioning.BOTTOM_RIGHT ||
       positioning == ol.OverlayPositioning.CENTER_RIGHT ||
@@ -380,7 +427,7 @@ ol.Overlay.prototype.updatePixelPosition_ = function() {
     if (this.rendered_.right_ !== '') {
       this.rendered_.right_ = style.right = '';
     }
-    var offsetX = -this.offsetX_;
+    var offsetX = -offset[0];
     if (positioning == ol.OverlayPositioning.BOTTOM_CENTER ||
         positioning == ol.OverlayPositioning.CENTER_CENTER ||
         positioning == ol.OverlayPositioning.TOP_CENTER) {
@@ -405,7 +452,7 @@ ol.Overlay.prototype.updatePixelPosition_ = function() {
     if (this.rendered_.bottom_ !== '') {
       this.rendered_.bottom_ = style.bottom = '';
     }
-    var offsetY = -this.offsetY_;
+    var offsetY = -offset[1];
     if (positioning == ol.OverlayPositioning.CENTER_LEFT ||
         positioning == ol.OverlayPositioning.CENTER_CENTER ||
         positioning == ol.OverlayPositioning.CENTER_RIGHT) {