Add x/y offset for icon symbolizers

examples/icon.html

@@ -38,9 +38,10 @@
 
       <div class="row-fluid">
         <div class="span12">
-          <div id="map" class="map"><div id="info"></div></div>
-          <div id="popup"><div>
-        </div>
+          <div id="map" class="map">
+            <div id="popup"><div>
+          </div>
+        </div>        
       </div>
 
       <div class="row-fluid">

examples/icon.js

@@ -36,7 +36,8 @@ var data = {
 var style = new ol.style.Style({
   symbolizers: [
     new ol.style.Icon({
-      url: 'icon.png'
+      url: 'icon.png',
+      yOffset: -32
     })
   ]
 });

src/objectliterals.jsdoc

@@ -608,7 +608,11 @@
  * @property {number|ol.expr.Expression|undefined} opacity Icon opacity
  *     (0-1).
  * @property {number|ol.expr.Expression|undefined} rotation Rotation in
- *     degrees (0-360).
+ *     radians (positive rotation clockwise).
+ * @property {number|ol.expr.Expression|undefined} xOffset Pixel offset from the
+ *     point to the center of the icon (positive values shift image left).
+ * @property {number|ol.expr.Expression|undefined} yOffset Pixel offset from the
+ *     point to the center of the icon (positive values shift image down).
  */
 
 /**

src/ol/renderer/canvas/canvasvectorrenderer.js

@@ -209,6 +209,8 @@ ol.renderer.canvas.VectorRenderer.prototype.renderPointFeatures_ =
       content, alpha, i, ii, feature, id, size, geometry, components, j, jj,
       point, vec;
 
+  var xOffset = 0;
+  var yOffset = 0;
   if (symbolizer instanceof ol.style.ShapeLiteral) {
     content = ol.renderer.canvas.VectorRenderer.renderShape(symbolizer);
     alpha = 1;
@@ -216,6 +218,8 @@ ol.renderer.canvas.VectorRenderer.prototype.renderPointFeatures_ =
     content = ol.renderer.canvas.VectorRenderer.renderIcon(
         symbolizer, this.iconLoadedCallback_);
     alpha = symbolizer.opacity;
+    xOffset = symbolizer.xOffset;
+    yOffset = symbolizer.yOffset;
   } else {
     throw new Error('Unsupported symbolizer: ' + symbolizer);
   }
@@ -253,7 +257,8 @@ ol.renderer.canvas.VectorRenderer.prototype.renderPointFeatures_ =
       point = components[j];
       vec = [point.get(0), point.get(1), 0];
       goog.vec.Mat4.multVec3(this.transform_, vec, vec);
-      context.drawImage(content, vec[0], vec[1], content.width, content.height);
+      context.drawImage(content, vec[0] + xOffset, vec[1] + yOffset,
+          content.width, content.height);
     }
   }
   context.restore();

src/ol/style/iconliteral.js

@@ -4,11 +4,13 @@ goog.require('ol.style.PointLiteral');
 
 
 /**
- * @typedef {{url: (string),
+ * @typedef {{url: string,
  *            width: (number|undefined),
  *            height: (number|undefined),
- *            opacity: (number),
- *            rotation: (number)}}
+ *            opacity: number,
+ *            rotation: number,
+ *            xOffset: number,
+ *            yOffset: number}}
  */
 ol.style.IconLiteralOptions;
 
@@ -36,6 +38,12 @@ ol.style.IconLiteral = function(options) {
   /** @type {number} */
   this.rotation = options.rotation;
 
+  /** @type {number} */
+  this.xOffset = options.xOffset;
+
+  /** @type {number} */
+  this.yOffset = options.yOffset;
+
 };
 goog.inherits(ol.style.IconLiteral, ol.style.PointLiteral);
 
@@ -48,5 +56,7 @@ ol.style.IconLiteral.prototype.equals = function(iconLiteral) {
       this.width == iconLiteral.width &&
       this.height == iconLiteral.height &&
       this.opacity == iconLiteral.opacity &&
-      this.rotation == iconLiteral.rotation;
+      this.rotation == iconLiteral.rotation &&
+      this.xOffset == iconLiteral.xOffset &&
+      this.yOffset == iconLiteral.yOffset;
 };

src/ol/style/iconsymbolizer.js

@@ -63,6 +63,24 @@ ol.style.Icon = function(options) {
       (options.rotation instanceof ol.expr.Expression) ?
           options.rotation : new ol.expr.Literal(options.rotation);
 
+  /**
+   * @type {ol.expr.Expression}
+   * @private
+   */
+  this.xOffset_ = !goog.isDef(options.xOffset) ?
+      new ol.expr.Literal(ol.style.IconDefaults.xOffset) :
+      (options.xOffset instanceof ol.expr.Expression) ?
+          options.xOffset : new ol.expr.Literal(options.xOffset);
+
+  /**
+   * @type {ol.expr.Expression}
+   * @private
+   */
+  this.yOffset_ = !goog.isDef(options.yOffset) ?
+      new ol.expr.Literal(ol.style.IconDefaults.yOffset) :
+      (options.yOffset instanceof ol.expr.Expression) ?
+          options.yOffset : new ol.expr.Literal(options.yOffset);
+
 };
 
 
@@ -106,12 +124,20 @@ ol.style.Icon.prototype.createLiteral = function(featureOrType) {
     var rotation = Number(ol.expr.evaluateFeature(this.rotation_, feature));
     goog.asserts.assert(!isNaN(rotation), 'rotation must be a number');
 
+    var xOffset = Number(ol.expr.evaluateFeature(this.xOffset_, feature));
+    goog.asserts.assert(!isNaN(xOffset), 'xOffset must be a number');
+
+    var yOffset = Number(ol.expr.evaluateFeature(this.yOffset_, feature));
+    goog.asserts.assert(!isNaN(yOffset), 'yOffset must be a number');
+
     literal = new ol.style.IconLiteral({
       url: url,
       width: width,
       height: height,
       opacity: opacity,
-      rotation: rotation
+      rotation: rotation,
+      xOffset: xOffset,
+      yOffset: yOffset
     });
   }
 
@@ -164,6 +190,24 @@ ol.style.Icon.prototype.getWidth = function() {
 };
 
 
+/**
+ * Get the xOffset.
+ * @return {ol.expr.Expression} Icon xOffset.
+ */
+ol.style.Icon.prototype.getXOffset = function() {
+  return this.xOffset_;
+};
+
+
+/**
+ * Get the yOffset.
+ * @return {ol.expr.Expression} Icon yOffset.
+ */
+ol.style.Icon.prototype.getYOffset = function() {
+  return this.yOffset_;
+};
+
+
 /**
  * Set the height.
  * @param {ol.expr.Expression} height Icon height.
@@ -215,10 +259,34 @@ ol.style.Icon.prototype.setWidth = function(width) {
 
 
 /**
- * @typedef {{opacity: (number),
- *            rotation: (number)}}
+ * Set the xOffset.
+ * @param {ol.expr.Expression} xOffset Icon xOffset.
+ */
+ol.style.Icon.prototype.setXOffset = function(xOffset) {
+  goog.asserts.assertInstanceof(xOffset, ol.expr.Expression);
+  this.xOffset_ = xOffset;
+};
+
+
+/**
+ * Set the yOffset.
+ * @param {ol.expr.Expression} yOffset Icon yOffset.
+ */
+ol.style.Icon.prototype.setYOffset = function(yOffset) {
+  goog.asserts.assertInstanceof(yOffset, ol.expr.Expression);
+  this.yOffset_ = yOffset;
+};
+
+
+/**
+ * @typedef {{opacity: number,
+ *            rotation: number,
+ *            xOffset: number,
+ *            yOffset: number}}
  */
 ol.style.IconDefaults = {
   opacity: 1,
-  rotation: 0
+  rotation: 0,
+  xOffset: 0,
+  yOffset: 0
 };

test/spec/ol/style/iconsymbolizer.test.js

@@ -10,7 +10,9 @@ describe('ol.style.Icon', function() {
         width: 20,
         opacity: 1,
         rotation: 0.1,
-        url: 'http://example.com/1.png'
+        url: 'http://example.com/1.png',
+        xOffset: 10,
+        yOffset: 15
       });
       expect(symbolizer).to.be.a(ol.style.Icon);
     });
@@ -21,7 +23,9 @@ describe('ol.style.Icon', function() {
         width: ol.expr.parse('20'),
         opacity: ol.expr.parse('1'),
         rotation: ol.expr.parse('0.1'),
-        url: ol.expr.parse('"http://example.com/1.png"')
+        url: ol.expr.parse('"http://example.com/1.png"'),
+        xOffset: ol.expr.parse('xOffset'),
+        yOffset: ol.expr.parse('yOffset')
       });
       expect(symbolizer).to.be.a(ol.style.Icon);
     });
@@ -36,7 +40,9 @@ describe('ol.style.Icon', function() {
         width: ol.expr.parse('widthAttr'),
         opacity: ol.expr.parse('opacityAttr'),
         rotation: ol.expr.parse('rotationAttr'),
-        url: ol.expr.parse('urlAttr')
+        url: ol.expr.parse('urlAttr'),
+        xOffset: ol.expr.parse('xOffset'),
+        yOffset: ol.expr.parse('yOffset')
       });
 
       var feature = new ol.Feature({
@@ -45,6 +51,8 @@ describe('ol.style.Icon', function() {
         opacityAttr: 0.5,
         rotationAttr: 123,
         urlAttr: 'http://example.com/1.png',
+        xOffset: 20,
+        yOffset: 30,
         geometry: new ol.geom.Point([1, 2])
       });
 
@@ -54,6 +62,8 @@ describe('ol.style.Icon', function() {
       expect(literal.width).to.be(.42);
       expect(literal.opacity).to.be(0.5);
       expect(literal.rotation).to.be(123);
+      expect(literal.xOffset).to.be(20);
+      expect(literal.yOffset).to.be(30);
       expect(literal.url).to.be('http://example.com/1.png');
     });
 
@@ -63,6 +73,8 @@ describe('ol.style.Icon', function() {
         width: ol.expr.parse('20'),
         opacity: ol.expr.parse('1'),
         rotation: ol.expr.parse('0.1'),
+        xOffset: ol.expr.parse('10'),
+        yOffset: ol.expr.parse('20'),
         url: ol.expr.parse('"http://example.com/1.png"')
       });
 
@@ -72,6 +84,8 @@ describe('ol.style.Icon', function() {
       expect(literal.width).to.be(20);
       expect(literal.opacity).to.be(1);
       expect(literal.rotation).to.be(0.1);
+      expect(literal.xOffset).to.be(10);
+      expect(literal.yOffset).to.be(20);
       expect(literal.url).to.be('http://example.com/1.png');
     });
 
@@ -151,6 +165,64 @@ describe('ol.style.Icon', function() {
       expect(literal.height).to.be(42);
     });
 
+    it('applies default xOffset if none', function() {
+      var symbolizer = new ol.style.Icon({
+        height: 10,
+        width: 20,
+        url: 'http://example.com/1.png'
+      });
+
+      var literal = symbolizer.createLiteral(ol.geom.GeometryType.POINT);
+      expect(literal).to.be.a(ol.style.IconLiteral);
+      expect(literal.xOffset).to.be(0);
+    });
+
+    it('casts xOffset to number', function() {
+      var symbolizer = new ol.style.Icon({
+        xOffset: ol.expr.parse('xOffset'),
+        width: 10,
+        url: 'http://example.com/1.png'
+      });
+
+      var feature = new ol.Feature({
+        xOffset: '42',
+        geometry: new ol.geom.Point([1, 2])
+      });
+
+      var literal = symbolizer.createLiteral(feature);
+      expect(literal).to.be.a(ol.style.IconLiteral);
+      expect(literal.xOffset).to.be(42);
+    });
+
+    it('applies default yOffset if none', function() {
+      var symbolizer = new ol.style.Icon({
+        height: 10,
+        width: 20,
+        url: 'http://example.com/1.png'
+      });
+
+      var literal = symbolizer.createLiteral(ol.geom.GeometryType.POINT);
+      expect(literal).to.be.a(ol.style.IconLiteral);
+      expect(literal.yOffset).to.be(0);
+    });
+
+    it('casts yOffset to number', function() {
+      var symbolizer = new ol.style.Icon({
+        yOffset: ol.expr.parse('yOffset'),
+        width: 10,
+        url: 'http://example.com/1.png'
+      });
+
+      var feature = new ol.Feature({
+        yOffset: '42',
+        geometry: new ol.geom.Point([1, 2])
+      });
+
+      var literal = symbolizer.createLiteral(feature);
+      expect(literal).to.be.a(ol.style.IconLiteral);
+      expect(literal.yOffset).to.be(42);
+    });
+
   });
 
   describe('#getHeight()', function() {