ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Making ol.Overlay accept offset values if positioning right or bottom

Browse Source 
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.
This commit is contained in:
simonseyock
2014-08-25 16:55:33 +02:00
parent b5a6ffc144
commit 52e06a8ff7
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ol/overlay.js
+8 -8
View File
@@ -405,13 +405,15 @@ ol.Overlay.prototype.updatePixelPosition_ = function() {
var positioning = this.getPositioning(); var positioning = this.getPositioning();
goog.asserts.assert(goog.isDef(positioning)); goog.asserts.assert(goog.isDef(positioning));
var offsetX = offset[0];
var offsetY = offset[1];
if (positioning == ol.OverlayPositioning.BOTTOM_RIGHT || if (positioning == ol.OverlayPositioning.BOTTOM_RIGHT ||
positioning == ol.OverlayPositioning.CENTER_RIGHT || positioning == ol.OverlayPositioning.CENTER_RIGHT ||
positioning == ol.OverlayPositioning.TOP_RIGHT) { positioning == ol.OverlayPositioning.TOP_RIGHT) {
if (this.rendered_.left_ !== '') { if (this.rendered_.left_ !== '') {
this.rendered_.left_ = style.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) { if (this.rendered_.right_ != right) {
this.rendered_.right_ = style.right = right; this.rendered_.right_ = style.right = right;
} }
@@ -419,13 +421,12 @@ ol.Overlay.prototype.updatePixelPosition_ = function() {
if (this.rendered_.right_ !== '') { if (this.rendered_.right_ !== '') {
this.rendered_.right_ = style.right = ''; this.rendered_.right_ = style.right = '';
} }
var offsetX = -offset[0];
if (positioning == ol.OverlayPositioning.BOTTOM_CENTER || if (positioning == ol.OverlayPositioning.BOTTOM_CENTER ||
positioning == ol.OverlayPositioning.CENTER_CENTER || positioning == ol.OverlayPositioning.CENTER_CENTER ||
positioning == ol.OverlayPositioning.TOP_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) { if (this.rendered_.left_ != left) {
this.rendered_.left_ = style.left = left; this.rendered_.left_ = style.left = left;
} }
@@ -436,7 +437,7 @@ ol.Overlay.prototype.updatePixelPosition_ = function() {
if (this.rendered_.top_ !== '') { if (this.rendered_.top_ !== '') {
this.rendered_.top_ = style.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) { if (this.rendered_.bottom_ != bottom) {
this.rendered_.bottom_ = style.bottom = bottom; this.rendered_.bottom_ = style.bottom = bottom;
} }
@@ -444,13 +445,12 @@ ol.Overlay.prototype.updatePixelPosition_ = function() {
if (this.rendered_.bottom_ !== '') { if (this.rendered_.bottom_ !== '') {
this.rendered_.bottom_ = style.bottom = ''; this.rendered_.bottom_ = style.bottom = '';
} }
var offsetY = -offset[1];
if (positioning == ol.OverlayPositioning.CENTER_LEFT || if (positioning == ol.OverlayPositioning.CENTER_LEFT ||
positioning == ol.OverlayPositioning.CENTER_CENTER || positioning == ol.OverlayPositioning.CENTER_CENTER ||
positioning == ol.OverlayPositioning.CENTER_RIGHT) { 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) { if (this.rendered_.top_ != top) {
this.rendered_.top_ = style.top = top; this.rendered_.top_ = style.top = top;
} }