Optional zIndex for icon symbolizers

src/objectliterals.jsdoc

@@ -692,6 +692,7 @@
  *     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).
+ * @property {number|ol.expr.Expression|undefined} zIndex Stack order.
  */
 
 /**

src/ol/style/iconliteral.js

@@ -10,7 +10,8 @@ goog.require('ol.style.PointLiteral');
  *            opacity: number,
  *            rotation: number,
  *            xOffset: number,
- *            yOffset: number}}
+ *            yOffset: number,
+ *            zIndex: (number|undefined)}}
  */
 ol.style.IconLiteralOptions;
 
@@ -44,6 +45,9 @@ ol.style.IconLiteral = function(options) {
   /** @type {number} */
   this.yOffset = options.yOffset;
 
+  /** @type {number|undefined} */
+  this.zIndex = options.zIndex;
+
 };
 goog.inherits(ol.style.IconLiteral, ol.style.PointLiteral);
 
@@ -51,12 +55,13 @@ goog.inherits(ol.style.IconLiteral, ol.style.PointLiteral);
 /**
  * @inheritDoc
  */
-ol.style.IconLiteral.prototype.equals = function(iconLiteral) {
+ol.style.IconLiteral.prototype.equals = function(other) {
-  return this.url == iconLiteral.url &&
+  return this.url == other.url &&
-      this.width == iconLiteral.width &&
+      this.width == other.width &&
-      this.height == iconLiteral.height &&
+      this.height == other.height &&
-      this.opacity == iconLiteral.opacity &&
+      this.opacity == other.opacity &&
-      this.rotation == iconLiteral.rotation &&
+      this.rotation == other.rotation &&
-      this.xOffset == iconLiteral.xOffset &&
+      this.xOffset == other.xOffset &&
-      this.yOffset == iconLiteral.yOffset;
+      this.yOffset == other.yOffset &&
+      this.zIndex == other.zIndex;
 };

src/ol/style/iconsymbolizer.js

@@ -81,6 +81,15 @@ ol.style.Icon = function(options) {
       (options.yOffset instanceof ol.expr.Expression) ?
           options.yOffset : new ol.expr.Literal(options.yOffset);
 
+  /**
+   * @type {ol.expr.Expression}
+   * @private
+   */
+  this.zIndex_ = !goog.isDefAndNotNull(options.zIndex) ?
+      null :
+      (options.zIndex instanceof ol.expr.Expression) ?
+          options.zIndex : new ol.expr.Literal(options.zIndex);
+
 };
 
 
@@ -130,6 +139,12 @@ ol.style.Icon.prototype.createLiteral = function(featureOrType) {
     var yOffset = Number(ol.expr.evaluateFeature(this.yOffset_, feature));
     goog.asserts.assert(!isNaN(yOffset), 'yOffset must be a number');
 
+    var zIndex;
+    if (!goog.isNull(this.zIndex_)) {
+      zIndex = Number(ol.expr.evaluateFeature(this.zIndex_, feature));
+      goog.asserts.assert(!isNaN(zIndex), 'zIndex must be a number');
+    }
+
     literal = new ol.style.IconLiteral({
       url: url,
       width: width,
@@ -137,7 +152,8 @@ ol.style.Icon.prototype.createLiteral = function(featureOrType) {
       opacity: opacity,
       rotation: rotation,
       xOffset: xOffset,
-      yOffset: yOffset
+      yOffset: yOffset,
+      zIndex: zIndex
     });
   }
 
@@ -208,6 +224,15 @@ ol.style.Icon.prototype.getYOffset = function() {
 };
 
 
+/**
+ * Get the zIndex.
+ * @return {ol.expr.Expression} Icon zIndex.
+ */
+ol.style.Icon.prototype.getZIndex = function() {
+  return this.zIndex_;
+};
+
+
 /**
  * Set the height.
  * @param {ol.expr.Expression} height Icon height.
@@ -278,6 +303,16 @@ ol.style.Icon.prototype.setYOffset = function(yOffset) {
 };
 
 
+/**
+ * Set the zIndex.
+ * @param {ol.expr.Expression} zIndex Icon zIndex.
+ */
+ol.style.Icon.prototype.setZIndex = function(zIndex) {
+  goog.asserts.assertInstanceof(zIndex, ol.expr.Expression);
+  this.zIndex_ = zIndex;
+};
+
+
 /**
  * @typedef {{opacity: number,
  *            rotation: number,

test/spec/ol/style/iconliteral.test.js

@@ -54,12 +54,21 @@ describe('ol.style.IconLiteral', function() {
         rotation: 0.1,
         url: 'http://example.com/2.png'
       });
+      var differentZIndex = new ol.style.IconLiteral({
+        height: 10,
+        width: 20,
+        opacity: 1,
+        rotation: 0.1,
+        url: 'http://example.com/1.png',
+        zIndex: 20
+      });
       expect(literal.equals(equalLiteral)).to.be(true);
       expect(literal.equals(differentLiteral1)).to.be(false);
       expect(literal.equals(differentLiteral2)).to.be(false);
       expect(literal.equals(differentLiteral3)).to.be(false);
       expect(literal.equals(differentLiteral4)).to.be(false);
       expect(literal.equals(differentLiteral5)).to.be(false);
+      expect(literal.equals(differentZIndex)).to.be(false);
     });
 
   });

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

@@ -30,6 +30,18 @@ describe('ol.style.Icon', function() {
       expect(symbolizer).to.be.a(ol.style.Icon);
     });
 
+    it('accepts zIndex', function() {
+      var symbolizer = new ol.style.Icon({
+        height: ol.expr.parse('10'),
+        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"'),
+        zIndex: 3
+      });
+      expect(symbolizer).to.be.a(ol.style.Icon);
+    });
+
   });
 
   describe('#createLiteral()', function() {
@@ -65,6 +77,7 @@ describe('ol.style.Icon', function() {
       expect(literal.xOffset).to.be(20);
       expect(literal.yOffset).to.be(30);
       expect(literal.url).to.be('http://example.com/1.png');
+      expect(literal.zIndex).to.be(undefined);
     });
 
     it('can be called without a feature', function() {
@@ -223,6 +236,20 @@ describe('ol.style.Icon', function() {
       expect(literal.yOffset).to.be(42);
     });
 
+    it('handles zIndex', function() {
+      var symbolizer = new ol.style.Icon({
+        height: ol.expr.parse('10'),
+        width: ol.expr.parse('20'),
+        url: ol.expr.parse('"http://example.com/1.png"'),
+        zIndex: 4
+      });
+
+      var literal = symbolizer.createLiteral(ol.geom.GeometryType.POINT);
+      expect(literal).to.be.a(ol.style.IconLiteral);
+      expect(literal.xOffset).to.be(0);
+      expect(literal.zIndex).to.be(4);
+    });
+
   });
 
   describe('#getHeight()', function() {