Merge pull request #1101 from bbinet/overlay_center_positioning

ol.overlay center positioning

examples/geolocation.js

@@ -1,6 +1,7 @@
 goog.require('ol.Geolocation');
 goog.require('ol.Map');
 goog.require('ol.Overlay');
+goog.require('ol.OverlayPositioning');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.dom.Input');
@@ -37,7 +38,8 @@ geolocation.on('change', function() {
 });
 
 var marker = new ol.Overlay({
-  element: /** @type {Element} */ ($('<i/>').addClass('icon-flag').get(0))
+  element: /** @type {Element} */ ($('<i/>').addClass('icon-flag').get(0)),
+  positioning: ol.OverlayPositioning.BOTTOM_LEFT
 });
 map.addOverlay(marker);
 // bind the marker position to the device location.

examples/icon.js

@@ -1,5 +1,6 @@
 goog.require('ol.Map');
 goog.require('ol.Overlay');
+goog.require('ol.OverlayPositioning');
 goog.require('ol.RendererHint');
 goog.require('ol.View2D');
 goog.require('ol.layer.Tile');
@@ -63,7 +64,8 @@ var map = new ol.Map({
 var element = document.getElementById('popup');
 
 var popup = new ol.Overlay({
-  element: element
+  element: element,
+  positioning: ol.OverlayPositioning.BOTTOM_CENTER
 });
 map.addOverlay(popup);
 

examples/overlay.html

@@ -9,6 +9,14 @@
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
     <style type="text/css">
+      #marker {
+        width: 20px;
+        height: 20px;
+        border: 1px solid #088;
+        border-radius: 10px;
+        background-color: #0FF;
+        opacity: 0.5;
+      }
       #vienna {
         text-decoration: none;
         color: white;
@@ -60,6 +68,7 @@
     <div style="display: none;">
       <!-- Clickable label for Vienna -->
       <a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
+      <div id="marker" title="Marker"></div>
       <!-- Popup -->
       <div id="popup" title="Welcome to ol3"></div>
     </div>

examples/overlay.js

@@ -1,5 +1,6 @@
 goog.require('ol.Map');
 goog.require('ol.Overlay');
+goog.require('ol.OverlayPositioning');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.coordinate');
@@ -22,10 +23,19 @@ var map = new ol.Map({
   })
 });
 
+var pos = ol.proj.transform([16.3725, 48.208889], 'EPSG:4326', 'EPSG:3857');
+
+// Vienna marker
+var marker = new ol.Overlay({
+  position: pos,
+  positioning: ol.OverlayPositioning.CENTER_CENTER,
+  element: document.getElementById('marker')
+});
+map.addOverlay(marker);
+
 // Vienna label
 var vienna = new ol.Overlay({
-  position: ol.proj.transform(
+  position: pos,
-      [16.3725, 48.208889], 'EPSG:4326', 'EPSG:3857'),
   element: document.getElementById('vienna')
 });
 map.addOverlay(vienna);

src/ol/overlay.exports

@@ -2,6 +2,11 @@
 
 @exportSymbol ol.OverlayPositioning
 @exportProperty ol.OverlayPositioning.BOTTOM_LEFT
+@exportProperty ol.OverlayPositioning.BOTTOM_CENTER
 @exportProperty ol.OverlayPositioning.BOTTOM_RIGHT
+@exportProperty ol.OverlayPositioning.CENTER_LEFT
+@exportProperty ol.OverlayPositioning.CENTER_CENTER
+@exportProperty ol.OverlayPositioning.CENTER_RIGHT
 @exportProperty ol.OverlayPositioning.TOP_LEFT
+@exportProperty ol.OverlayPositioning.TOP_CENTER
 @exportProperty ol.OverlayPositioning.TOP_RIGHT

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 ||
+  if (positioning == ol.OverlayPositioning.BOTTOM_LEFT ||
-      positioning == ol.OverlayPositioning.TOP_RIGHT) {
+      positioning == ol.OverlayPositioning.BOTTOM_CENTER ||
-    if (this.rendered_.bottom_ !== '') {
+      positioning == ol.OverlayPositioning.BOTTOM_RIGHT) {
-      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 (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) {