From efeb00e4a5b8e3233a117628e8038bd24a79ed4d Mon Sep 17 00:00:00 2001
From: Tim Schaub <tim.schaub@gmail.com>
Date: Mon, 26 Aug 2013 19:20:16 -0600
Subject: [PATCH] Add x/y offset for icon symbolizers

---
 examples/icon.html                            |   7 +-
 examples/icon.js                              |   3 +-
 examples/icon.png                             | Bin 3903 -> 3782 bytes
 src/objectliterals.jsdoc                      |   6 +-
 .../renderer/canvas/canvasvectorrenderer.js   |   7 +-
 src/ol/style/iconliteral.js                   |  18 +++-
 src/ol/style/iconsymbolizer.js                |  76 ++++++++++++++++-
 test/spec/ol/style/iconsymbolizer.test.js     |  78 +++++++++++++++++-
 8 files changed, 178 insertions(+), 17 deletions(-)

diff --git a/examples/icon.html b/examples/icon.html
index 0fabb2a712..27bead7b5e 100644
--- a/examples/icon.html
+++ b/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">
diff --git a/examples/icon.js b/examples/icon.js
index 3bb57bdf16..55e6a32f98 100644
--- a/examples/icon.js
+++ b/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
     })
   ]
 });
diff --git a/examples/icon.png b/examples/icon.png
index c17aecd91c013e65ec01e407da375135a3440d82..8f511d436c4f57aba64cacce29e84a0b97702dab 100644
GIT binary patch
delta 3759
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
ZFaU^nVV%e$JG=k@002ovPDHLkV1nX9H;VuO

delta 3881
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
UWzLoUx5PwR>iW;Vs@Y-x4<Siu;s5{u

diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc
index cc90365820..973fd47471 100644
--- a/src/objectliterals.jsdoc
+++ b/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).
  */
 
 /**
diff --git a/src/ol/renderer/canvas/canvasvectorrenderer.js b/src/ol/renderer/canvas/canvasvectorrenderer.js
index 813fce0d84..33e055f486 100644
--- a/src/ol/renderer/canvas/canvasvectorrenderer.js
+++ b/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();
diff --git a/src/ol/style/iconliteral.js b/src/ol/style/iconliteral.js
index 833f9fa86e..63a55e6e8f 100644
--- a/src/ol/style/iconliteral.js
+++ b/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;
 };
diff --git a/src/ol/style/iconsymbolizer.js b/src/ol/style/iconsymbolizer.js
index 781c6eb73d..2443ea6d3b 100644
--- a/src/ol/style/iconsymbolizer.js
+++ b/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
 };
diff --git a/test/spec/ol/style/iconsymbolizer.test.js b/test/spec/ol/style/iconsymbolizer.test.js
index 10cc573af4..a7cee1486a 100644
--- a/test/spec/ol/style/iconsymbolizer.test.js
+++ b/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() {