diff --git a/src/ol/overlay.js b/src/ol/overlay.js index 4ae6806930..01095fead5 100644 --- a/src/ol/overlay.js +++ b/src/ol/overlay.js @@ -29,8 +29,13 @@ ol.OverlayProperty = { */ ol.OverlayPositioning = { BOTTOM_LEFT: 'bottom-left', + BOTTOM_CENTER: 'bottom-center', BOTTOM_RIGHT: 'bottom-right', + CENTER_LEFT: 'center-left', + CENTER_CENTER: 'center-center', + CENTER_RIGHT: 'center-right', TOP_LEFT: 'top-left', + TOP_CENTER: 'top-center', TOP_RIGHT: 'top-right' }; @@ -295,6 +300,7 @@ ol.Overlay.prototype.updatePixelPosition_ = function() { var style = this.element_.style; var positioning = this.getPositioning(); if (positioning == ol.OverlayPositioning.BOTTOM_RIGHT || + positioning == ol.OverlayPositioning.CENTER_RIGHT || positioning == ol.OverlayPositioning.TOP_RIGHT) { if (this.rendered_.left_ !== '') { this.rendered_.left_ = style.left = ''; @@ -307,21 +313,20 @@ ol.Overlay.prototype.updatePixelPosition_ = function() { if (this.rendered_.right_ !== '') { this.rendered_.right_ = style.right = ''; } - var left = Math.round(pixel[0]) + 'px'; + var offsetX = 0; + if (positioning == ol.OverlayPositioning.BOTTOM_CENTER || + positioning == ol.OverlayPositioning.CENTER_CENTER || + positioning == ol.OverlayPositioning.TOP_CENTER) { + offsetX = goog.style.getSize(this.element_).width / 2; + } + var left = Math.round(pixel[0] - offsetX) + 'px'; if (this.rendered_.left_ != left) { this.rendered_.left_ = style.left = left; } } - if (positioning == ol.OverlayPositioning.TOP_LEFT || - positioning == ol.OverlayPositioning.TOP_RIGHT) { - if (this.rendered_.bottom_ !== '') { - this.rendered_.bottom_ = style.bottom = ''; - } - var top = Math.round(pixel[1]) + 'px'; - if (this.rendered_.top_ != top) { - this.rendered_.top_ = style.top = top; - } - } else { + if (positioning == ol.OverlayPositioning.BOTTOM_LEFT || + positioning == ol.OverlayPositioning.BOTTOM_CENTER || + positioning == ol.OverlayPositioning.BOTTOM_RIGHT) { if (this.rendered_.top_ !== '') { this.rendered_.top_ = style.top = ''; } @@ -329,6 +334,20 @@ ol.Overlay.prototype.updatePixelPosition_ = function() { if (this.rendered_.bottom_ != bottom) { this.rendered_.bottom_ = style.bottom = bottom; } + } else { + if (this.rendered_.bottom_ !== '') { + this.rendered_.bottom_ = style.bottom = ''; + } + var offsetY = 0; + if (positioning == ol.OverlayPositioning.CENTER_LEFT || + positioning == ol.OverlayPositioning.CENTER_CENTER || + positioning == ol.OverlayPositioning.CENTER_RIGHT) { + offsetY = goog.style.getSize(this.element_).height / 2; + } + var top = Math.round(pixel[1] - offsetY) + 'px'; + if (this.rendered_.top_ != top) { + this.rendered_.top_ = style.top = top; + } } if (!this.rendered_.visible) {