Make stroke style of the graticule configurable

examples/graticule.js

@@ -4,6 +4,7 @@ goog.require('ol.View');
 goog.require('ol.layer.Tile');
 goog.require('ol.proj');
 goog.require('ol.source.OSM');
+goog.require('ol.style.Stroke');
 
 
 var map = new ol.Map({
@@ -21,5 +22,12 @@ var map = new ol.Map({
 });
 
 // Create the graticule component
-var graticule = new ol.Graticule();
+var graticule = new ol.Graticule({
+  // the style to use for the lines, optional.
+  strokeStyle: new ol.style.Stroke({
+    color: 'rgba(255,120,0,0.9)',
+    width: 2,
+    lineDash: [0.5, 4]
+  })
+});
 graticule.setMap(map);

externs/olx.js

@@ -109,6 +109,7 @@ olx.LogoOptions;
 /**
  * @typedef {{map: (ol.Map|undefined),
  *     maxLines: (number|undefined),
+ *     strokeStyle: (ol.style.Stroke|undefined),
  *     targetSize: (number|undefined)}}
  */
 olx.GraticuleOptions;
@@ -133,6 +134,15 @@ olx.GraticuleOptions.prototype.map;
 olx.GraticuleOptions.prototype.maxLines;
 
 
+/**
+ * The stroke style to use for drawing the graticule. If not provided, the
+ * lines will be drawn with `rgba(0,0,0,0.2)`, a not fully opaque black.
+ *
+ * @type {ol.style.Stroke|undefined}
+ */
+olx.GraticuleOptions.prototype.strokeStyle;
+
+
 /**
  * The target size of the graticule cells, in pixels. Default
  * value is 100 pixels.

src/ol/graticule.js

@@ -83,13 +83,11 @@ ol.Graticule = function(opt_options) {
   this.parallels_ = [];
 
   /**
-   * TODO can be configurable
    * @type {ol.style.Stroke}
    * @private
    */
-  this.strokeStyle_ = new ol.style.Stroke({
-    color: 'rgba(0,0,0,0.2)'
-  });
+  this.strokeStyle_ = goog.isDef(options.strokeStyle) ?
+      options.strokeStyle : ol.Graticule.DEFAULT_STROKE_STYLE_;
 
   /**
    * @type {ol.TransformFunction|undefined}
@@ -113,6 +111,16 @@ ol.Graticule = function(opt_options) {
 };
 
 
+/**
+ * @type {ol.style.Stroke}
+ * @private
+ * @const
+ */
+ol.Graticule.DEFAULT_STROKE_STYLE_ = new ol.style.Stroke({
+  color: 'rgba(0,0,0,0.2)'
+});
+
+
 /**
  * TODO can be configurable
  * @type {Array.<number>}

test/spec/ol/graticule.test.js

@@ -21,6 +21,28 @@ describe('ol.Graticule', function() {
       expect(graticule.getMeridians().length).to.be(13);
       expect(graticule.getParallels().length).to.be(3);
     });
+
+    it('has a default stroke style', function() {
+      var actualStyle = graticule.strokeStyle_;
+
+      expect(actualStyle).not.to.be(undefined);
+      expect(actualStyle instanceof ol.style.Stroke).to.be(true);
+    });
+
+    it('can be configured with a stroke style', function() {
+      var customStrokeStyle = new ol.style.Stroke({
+        color: 'rebeccapurple'
+      });
+      var styledGraticule = new ol.Graticule({
+        map: new ol.Map({}),
+        strokeStyle: customStrokeStyle
+      });
+      var actualStyle = styledGraticule.strokeStyle_;
+
+      expect(actualStyle).not.to.be(undefined);
+      expect(actualStyle).to.be(customStrokeStyle);
+    });
+
   });
 
 });
@@ -28,3 +50,4 @@ describe('ol.Graticule', function() {
 goog.require('ol.Graticule');
 goog.require('ol.Map');
 goog.require('ol.proj');
+goog.require('ol.style.Stroke');