Add anchorOrigin option in ol.style.Icon

src/objectliterals.jsdoc

@@ -947,6 +947,7 @@
  * @typedef {Object} olx.style.IconOptions
  * @property {Array.<number>|undefined} anchor Anchor. Default value is `[0.5, 0.5]`
  *     (icon center).
+ * @property {ol.style.IconAnchorOrigin|undefined} anchorOrigin Origin of the anchor: `bottom-left`, `bottom-right`, `top-left` or `top-right`. Default is `top-left`.
  * @property {ol.style.IconAnchorUnits|undefined} anchorXUnits Units in which the anchor x value is specified.
  *     A value of `'fraction'` indicates the x value is a fraction of the icon.
  *     A value of `'pixels'` indicates the x value in pixels. Default is

src/ol/format/kmlformat.js

@@ -29,6 +29,7 @@ goog.require('ol.geom.Polygon');
 goog.require('ol.proj');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Icon');
+goog.require('ol.style.IconAnchorOrigin');
 goog.require('ol.style.IconAnchorUnits');
 goog.require('ol.style.Image');
 goog.require('ol.style.Stroke');
@@ -473,7 +474,7 @@ ol.format.KML.IconStyleParser_ = function(node, objectStack) {
     anchorXUnits = ol.format.KML.DEFAULT_IMAGE_STYLE_ANCHOR_X_UNITS_;
     anchorYUnits = ol.format.KML.DEFAULT_IMAGE_STYLE_ANCHOR_Y_UNITS_;
   } else if (/^http:\/\/maps\.(?:google|gstatic)\.com\//.test(src)) {
-    anchor = [0.5, 1];
+    anchor = [0.5, 0];
     anchorXUnits = ol.style.IconAnchorUnits.FRACTION;
     anchorYUnits = ol.style.IconAnchorUnits.FRACTION;
   }
@@ -494,6 +495,7 @@ ol.format.KML.IconStyleParser_ = function(node, objectStack) {
 
   var imageStyle = new ol.style.Icon({
     anchor: anchor,
+    anchorOrigin: ol.style.IconAnchorOrigin.BOTTOM_LEFT,
     anchorXUnits: anchorXUnits,
     anchorYUnits: anchorYUnits,
     crossOrigin: 'anonymous', // FIXME should this be configurable?

src/ol/style/iconstyle.js

@@ -1,6 +1,7 @@
 // FIXME decide default value for snapToPixel
 
 goog.provide('ol.style.Icon');
+goog.provide('ol.style.IconAnchorOrigin');
 goog.provide('ol.style.IconAnchorUnits');
 goog.provide('ol.style.IconImageCache');
 
@@ -15,6 +16,17 @@ goog.require('ol.style.Image');
 goog.require('ol.style.ImageState');
 
 
+/**
+ * @enum {string}
+ */
+ol.style.IconAnchorOrigin = {
+  BOTTOM_LEFT: 'bottom-left',
+  BOTTOM_RIGHT: 'bottom-right',
+  TOP_LEFT: 'top-left',
+  TOP_RIGHT: 'top-right'
+};
+
+
 /**
  * @enum {string}
  */
@@ -40,6 +52,13 @@ ol.style.Icon = function(opt_options) {
    */
   this.anchor_ = goog.isDef(options.anchor) ? options.anchor : [0.5, 0.5];
 
+  /**
+   * @private
+   * @type {ol.style.IconAnchorOrigin}
+   */
+  this.anchorOrigin_ = goog.isDef(options.anchorOrigin) ?
+      options.anchorOrigin : ol.style.IconAnchorOrigin.TOP_LEFT;
+
   /**
    * @private
    * @type {ol.style.IconAnchorUnits}
@@ -98,13 +117,13 @@ goog.inherits(ol.style.Icon, ol.style.Image);
  */
 ol.style.Icon.prototype.getAnchor = function() {
   var anchor = this.anchor_;
+  var size = this.getSize();
   if (this.anchorXUnits_ == ol.style.IconAnchorUnits.FRACTION ||
       this.anchorYUnits_ == ol.style.IconAnchorUnits.FRACTION) {
-    var size = this.getSize();
     if (goog.isNull(size)) {
       return null;
     }
-    anchor = [this.anchor_[0], this.anchor_[1]];
+    anchor = this.anchor_.slice();
     if (this.anchorXUnits_ == ol.style.IconAnchorUnits.FRACTION) {
       anchor[0] *= size[0];
     }
@@ -112,6 +131,23 @@ ol.style.Icon.prototype.getAnchor = function() {
       anchor[1] *= size[1];
     }
   }
+
+  if (this.anchorOrigin_ != ol.style.IconAnchorOrigin.TOP_LEFT) {
+    if (goog.isNull(size)) {
+      return null;
+    }
+    if (anchor === this.anchor_) {
+      anchor = this.anchor_.slice();
+    }
+    if (this.anchorOrigin_ == ol.style.IconAnchorOrigin.TOP_RIGHT ||
+        this.anchorOrigin_ == ol.style.IconAnchorOrigin.BOTTOM_RIGHT) {
+      anchor[0] = -anchor[0] + size[0];
+    }
+    if (this.anchorOrigin_ == ol.style.IconAnchorOrigin.BOTTOM_LEFT ||
+        this.anchorOrigin_ == ol.style.IconAnchorOrigin.BOTTOM_RIGHT) {
+      anchor[1] += size[1];
+    }
+  }
   return anchor;
 };