Optional zIndex for fill symbolizers

src/objectliterals.jsdoc

@@ -699,6 +699,7 @@
  * @property {string|ol.expr.Expression|undefined} color Fill color as hex color
  *     code.
  * @property {number|ol.expr.Expression|undefined} opacity Opacity (0-1).
+ * @property {number|ol.expr.Expression|undefined} zIndex Stack order.
  */
 
 /**

src/ol/style/fillsymbolizer.js

@@ -38,6 +38,15 @@ ol.style.Fill = function(opt_options) {
       (options.opacity instanceof ol.expr.Expression) ?
           options.opacity : new ol.expr.Literal(options.opacity);
 
+  /**
+   * @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);
+
 };
 goog.inherits(ol.style.Fill, ol.style.Symbolizer);
 
@@ -67,9 +76,16 @@ ol.style.Fill.prototype.createLiteral = function(featureOrType) {
     var opacity = Number(ol.expr.evaluateFeature(this.opacity_, feature));
     goog.asserts.assert(!isNaN(opacity), 'opacity 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.PolygonLiteral({
       fillColor: color,
-      fillOpacity: opacity
+      fillOpacity: opacity,
+      zIndex: zIndex
     });
   }
 
@@ -95,6 +111,15 @@ ol.style.Fill.prototype.getOpacity = function() {
 };
 
 
+/**
+ * Get the fill zIndex.
+ * @return {ol.expr.Expression} Fill zIndex.
+ */
+ol.style.Fill.prototype.getZIndex = function() {
+  return this.zIndex_;
+};
+
+
 /**
  * Set the fill color.
  * @param {ol.expr.Expression} color Fill color.
@@ -116,8 +141,18 @@ ol.style.Fill.prototype.setOpacity = function(opacity) {
 
 
 /**
- * @typedef {{color: (string),
+ * Set the fill zIndex.
- *            opacity: (number)}}
+ * @param {ol.expr.Expression} zIndex Fill zIndex.
+ */
+ol.style.Fill.prototype.setZIndex = function(zIndex) {
+  goog.asserts.assertInstanceof(zIndex, ol.expr.Expression);
+  this.zIndex_ = zIndex;
+};
+
+
+/**
+ * @typedef {{fillColor: (string),
+ *            fillOpacity: (number)}}
  */
 ol.style.FillDefaults = {
   color: '#ffffff',

src/ol/style/polygonliteral.js

@@ -9,7 +9,8 @@ goog.require('ol.style.Literal');
  *            fillOpacity: (number|undefined),
  *            strokeColor: (string|undefined),
  *            strokeOpacity: (number|undefined),
- *            strokeWidth: (number|undefined)}}
+ *            strokeWidth: (number|undefined),
+ *            zIndex: (number|undefined)}}
  */
 ol.style.PolygonLiteralOptions;
 
@@ -66,6 +67,9 @@ ol.style.PolygonLiteral = function(options) {
       'Either fillColor and fillOpacity or ' +
       'strokeColor and strokeOpacity and strokeWidth must be set');
 
+  /** @type {number|undefined} */
+  this.zIndex = options.zIndex;
+
 };
 goog.inherits(ol.style.PolygonLiteral, ol.style.Literal);
 
@@ -73,10 +77,11 @@ goog.inherits(ol.style.PolygonLiteral, ol.style.Literal);
 /**
  * @inheritDoc
  */
-ol.style.PolygonLiteral.prototype.equals = function(polygonLiteral) {
+ol.style.PolygonLiteral.prototype.equals = function(other) {
-  return this.fillColor == polygonLiteral.fillColor &&
+  return this.fillColor == other.fillColor &&
-      this.fillOpacity == polygonLiteral.fillOpacity &&
+      this.fillOpacity == other.fillOpacity &&
-      this.strokeColor == polygonLiteral.strokeColor &&
+      this.strokeColor == other.strokeColor &&
-      this.strokeOpacity == polygonLiteral.strokeOpacity &&
+      this.strokeOpacity == other.strokeOpacity &&
-      this.strokeWidth == polygonLiteral.strokeWidth;
+      this.strokeWidth == other.strokeWidth &&
+      this.zIndex == other.zIndex;
 };

test/spec/ol/style/fillsymbolizer.test.js

@@ -19,6 +19,15 @@ describe('ol.style.Fill', function() {
       expect(symbolizer).to.be.a(ol.style.Fill);
     });
 
+    it('accepts zIndex', function() {
+      var symbolizer = new ol.style.Fill({
+        opacity: ol.expr.parse('value / 100'),
+        color: ol.expr.parse('fillAttr'),
+        zIndex: 3
+      });
+      expect(symbolizer).to.be.a(ol.style.Fill);
+    });
+
   });
 
   describe('#createLiteral()', function() {
@@ -40,6 +49,7 @@ describe('ol.style.Fill', function() {
       expect(literal).to.be.a(ol.style.PolygonLiteral);
       expect(literal.fillOpacity).to.be(42 / 100);
       expect(literal.fillColor).to.be('#ff0000');
+      expect(literal.zIndex).to.be(undefined);
     });
 
     it('applies default opacity', function() {
@@ -81,6 +91,19 @@ describe('ol.style.Fill', function() {
       expect(literal.fillOpacity).to.be(0.55);
     });
 
+    it('handles zIndex', function() {
+      var symbolizer = new ol.style.Fill({
+        opacity: 0.8,
+        zIndex: 2
+      });
+
+      var literal = symbolizer.createLiteral(ol.geom.GeometryType.POLYGON);
+      expect(literal).to.be.a(ol.style.PolygonLiteral);
+      expect(literal.fillColor).to.be('#ffffff');
+      expect(literal.fillOpacity).to.be(0.8);
+      expect(literal.zIndex).to.be(2);
+    });
+
   });
 
   describe('#getColor()', function() {

test/spec/ol/style/polygonliteral.test.js

@@ -54,12 +54,21 @@ describe('ol.style.PolygonLiteral', function() {
         fillColor: '#BADA55',
         fillOpacity: 0.31
       });
+      var differentZIndex = new ol.style.PolygonLiteral({
+        strokeWidth: 3,
+        strokeColor: '#013',
+        strokeOpacity: 0.4,
+        fillColor: '#BADA55',
+        fillOpacity: 0.3,
+        zIndex: 2
+      });
       expect(literal.equals(equalLiteral)).to.be(true);
       expect(literal.equals(differentStrokeWidth)).to.be(false);
       expect(literal.equals(differentStrokeColor)).to.be(false);
       expect(literal.equals(differentStrokeOpacity)).to.be(false);
       expect(literal.equals(differentFillColor)).to.be(false);
       expect(literal.equals(differentFillOpacity)).to.be(false);
+      expect(literal.equals(differentZIndex)).to.be(false);
     });
 
   });