Optional zIndex for shape symbolizers

src/objectliterals.jsdoc

@@ -721,6 +721,7 @@
  * @property {number|ol.expr.Expression|undefined} size Size in pixels.
  * @property {ol.style.Fill|undefined} fill Fill symbolizer for shape.
  * @property {ol.style.Stroke|undefined} stroke Stroke symbolizer for shape.
+ * @property {number|ol.expr.Expression|undefined} zIndex Stack order.
  */
 
 /**

src/ol/style/shapeliteral.js

@@ -20,7 +20,8 @@ ol.style.ShapeType = {
  *            fillOpacity: (number|undefined),
  *            strokeColor: (string|undefined),
  *            strokeOpacity: (number|undefined),
- *            strokeWidth: (number|undefined)}}
+ *            strokeWidth: (number|undefined),
+ *            zIndex: (number|undefined)}}
  */
 ol.style.ShapeLiteralOptions;
 
@@ -84,6 +85,9 @@ ol.style.ShapeLiteral = 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.ShapeLiteral, ol.style.PointLiteral);
 
@@ -91,12 +95,13 @@ goog.inherits(ol.style.ShapeLiteral, ol.style.PointLiteral);
 /**
  * @inheritDoc
  */
-ol.style.ShapeLiteral.prototype.equals = function(shapeLiteral) {
-  return this.type == shapeLiteral.type &&
-      this.size == shapeLiteral.size &&
-      this.fillColor == shapeLiteral.fillColor &&
-      this.fillOpacity == shapeLiteral.fillOpacity &&
-      this.strokeColor == shapeLiteral.strokeColor &&
-      this.strokeOpacity == shapeLiteral.strokeOpacity &&
-      this.strokeWidth == shapeLiteral.strokeWidth;
+ol.style.ShapeLiteral.prototype.equals = function(other) {
+  return this.type == other.type &&
+      this.size == other.size &&
+      this.fillColor == other.fillColor &&
+      this.fillOpacity == other.fillOpacity &&
+      this.strokeColor == other.strokeColor &&
+      this.strokeOpacity == other.strokeOpacity &&
+      this.strokeWidth == other.strokeWidth &&
+      this.zIndex == other.zIndex;
 };

src/ol/style/shapesymbolizer.js

@@ -53,6 +53,15 @@ ol.style.Shape = function(options) {
   goog.asserts.assert(this.fill_ || this.stroke_,
       'Stroke or fill must be provided');
 
+  /**
+   * @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);
+
 };
 
 
@@ -100,6 +109,12 @@ ol.style.Shape.prototype.createLiteral = function(featureOrType) {
       goog.asserts.assert(!isNaN(strokeWidth), 'strokeWidth 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.ShapeLiteral({
       type: this.type_,
       size: size,
@@ -107,7 +122,8 @@ ol.style.Shape.prototype.createLiteral = function(featureOrType) {
       fillOpacity: fillOpacity,
       strokeColor: strokeColor,
       strokeOpacity: strokeOpacity,
-      strokeWidth: strokeWidth
+      strokeWidth: strokeWidth,
+      zIndex: zIndex
     });
   }
 
@@ -151,6 +167,15 @@ ol.style.Shape.prototype.getType = function() {
 };
 
 
+/**
+ * Get the shape zIndex.
+ * @return {ol.expr.Expression} Shape zIndex.
+ */
+ol.style.Shape.prototype.getZIndex = function() {
+  return this.zIndex_;
+};
+
+
 /**
  * Set the fill.
  * @param {ol.style.Fill} fill Shape fill.
@@ -194,6 +219,16 @@ ol.style.Shape.prototype.setType = function(type) {
 };
 
 
+/**
+ * Set the shape zIndex.
+ * @param {ol.expr.Expression} zIndex Shape zIndex.
+ */
+ol.style.Shape.prototype.setZIndex = function(zIndex) {
+  goog.asserts.assertInstanceof(zIndex, ol.expr.Expression);
+  this.zIndex_ = zIndex;
+};
+
+
 /**
  * @typedef {{type: (ol.style.ShapeType),
  *            size: (number)}}

test/spec/ol/style/shapeliteral.test.js

@@ -77,6 +77,16 @@ describe('ol.style.ShapeLiteral', function() {
         strokeOpacity: 0.8,
         strokeWidth: 4
       });
+      var differentZIndex = new ol.style.ShapeLiteral({
+        type: ol.style.ShapeType.CIRCLE,
+        size: 4,
+        fillColor: '#BADA55',
+        fillOpacity: 0.9,
+        strokeColor: '#013',
+        strokeOpacity: 0.8,
+        strokeWidth: 3,
+        zIndex: -1
+      });
       expect(literal.equals(equalLiteral)).to.be(true);
       expect(literal.equals(differentSize)).to.be(false);
       expect(literal.equals(differentFillColor)).to.be(false);
@@ -84,6 +94,7 @@ describe('ol.style.ShapeLiteral', function() {
       expect(literal.equals(differentStrokeColor)).to.be(false);
       expect(literal.equals(differentStrokeOpacity)).to.be(false);
       expect(literal.equals(differentStrokeWidth)).to.be(false);
+      expect(literal.equals(differentZIndex)).to.be(false);
     });
 
   });

test/spec/ol/style/shapesymbolizer.test.js

@@ -24,6 +24,17 @@ describe('ol.style.Shape', function() {
       expect(symbolizer).to.be.a(ol.style.Shape);
     });
 
+    it('accepts zIndex', function() {
+      var symbolizer = new ol.style.Shape({
+        size: 4,
+        fill: new ol.style.Fill({
+          color: '#ff0000'
+        }),
+        zIndex: -1
+      });
+      expect(symbolizer).to.be.a(ol.style.Shape);
+    });
+
   });
 
   describe('#createLiteral()', function() {
@@ -47,6 +58,7 @@ describe('ol.style.Shape', function() {
       expect(literal).to.be.a(ol.style.ShapeLiteral);
       expect(literal.size).to.be(42);
       expect(literal.fillOpacity).to.be(0.4);
+      expect(literal.zIndex).to.be(undefined);
     });
 
     it('can be called without a feature', function() {
@@ -160,6 +172,19 @@ describe('ol.style.Shape', function() {
       expect(literal.fillOpacity).to.be(0.42);
     });
 
+    it('handles zIndex', function() {
+      var symbolizer = new ol.style.Shape({
+        stroke: new ol.style.Stroke({
+          color: '#ff0000'
+        }),
+        zIndex: -2
+      });
+
+      var literal = symbolizer.createLiteral(ol.geom.GeometryType.POINT);
+      expect(literal).to.be.a(ol.style.ShapeLiteral);
+      expect(literal.zIndex).to.be(-2);
+    });
+
   });
 
   describe('#getFill()', function() {