From 52e06a8ff73b9eaef38c38bb491e7403afd8b870 Mon Sep 17 00:00:00 2001
From: simonseyock <simonseyock@gmail.com>
Date: Mon, 25 Aug 2014 16:55:33 +0200
Subject: [PATCH] Making ol.Overlay accept offset values if positioning right
 or bottom

When ol.Overlay has set positioning is set to right or bottom, no offset is applied. I added the missing calculations.
I made 2 fiddles showing the bahaviour before and after.
The divs in hte fiddles are named after their positioning (anchor point)! Not the actual position!
Before: http://jsfiddle.net/simon_seyock/ob7ggtx6/
As you can see, on div named "bottom-right" no offset at all is applied. On "bottom-center" it is only applied horizontally and on "center-right" only vertically.
After: http://jsfiddle.net/simon_seyock/sL2f3nL9/2/
All offsets are applied correctly, you could draw a straight line through the anchor points of every div.
---
 src/ol/overlay.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/ol/overlay.js b/src/ol/overlay.js
index 573d57045d..038dc0b02b 100644
--- a/src/ol/overlay.js
+++ b/src/ol/overlay.js
@@ -405,13 +405,15 @@ ol.Overlay.prototype.updatePixelPosition_ = function() {
   var positioning = this.getPositioning();
   goog.asserts.assert(goog.isDef(positioning));
 
+  var offsetX = offset[0];
+  var offsetY = offset[1];
   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 = '';
     }
-    var right = Math.round(mapSize[0] - pixel[0]) + 'px';
+    var right = Math.round(mapSize[0] - pixel[0] - offsetX) + 'px';
     if (this.rendered_.right_ != right) {
       this.rendered_.right_ = style.right = right;
     }
@@ -419,13 +421,12 @@ ol.Overlay.prototype.updatePixelPosition_ = function() {
     if (this.rendered_.right_ !== '') {
       this.rendered_.right_ = style.right = '';
     }
-    var offsetX = -offset[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;
+      offsetX -= goog.style.getSize(this.element_).width / 2;
     }
-    var left = Math.round(pixel[0] - offsetX) + 'px';
+    var left = Math.round(pixel[0] + offsetX) + 'px';
     if (this.rendered_.left_ != left) {
       this.rendered_.left_ = style.left = left;
     }
@@ -436,7 +437,7 @@ ol.Overlay.prototype.updatePixelPosition_ = function() {
     if (this.rendered_.top_ !== '') {
       this.rendered_.top_ = style.top = '';
     }
-    var bottom = Math.round(mapSize[1] - pixel[1]) + 'px';
+    var bottom = Math.round(mapSize[1] - pixel[1] - offsetY) + 'px';
     if (this.rendered_.bottom_ != bottom) {
       this.rendered_.bottom_ = style.bottom = bottom;
     }
@@ -444,13 +445,12 @@ ol.Overlay.prototype.updatePixelPosition_ = function() {
     if (this.rendered_.bottom_ !== '') {
       this.rendered_.bottom_ = style.bottom = '';
     }
-    var offsetY = -offset[1];
     if (positioning == ol.OverlayPositioning.CENTER_LEFT ||
         positioning == ol.OverlayPositioning.CENTER_CENTER ||
         positioning == ol.OverlayPositioning.CENTER_RIGHT) {
-      offsetY += goog.style.getSize(this.element_).height / 2;
+      offsetY -= goog.style.getSize(this.element_).height / 2;
     }
-    var top = Math.round(pixel[1] - offsetY) + 'px';
+    var top = Math.round(pixel[1] + offsetY) + 'px';
     if (this.rendered_.top_ != top) {
       this.rendered_.top_ = style.top = top;
     }