diff --git a/examples/graticule.js b/examples/graticule.js index 929725a37b..c2b05248f9 100644 --- a/examples/graticule.js +++ b/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); diff --git a/externs/olx.js b/externs/olx.js index 22fc193b09..867d4680fb 100644 --- a/externs/olx.js +++ b/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. diff --git a/src/ol/graticule.js b/src/ol/graticule.js index 97a23a5b9c..3b4fe7d54b 100644 --- a/src/ol/graticule.js +++ b/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.} diff --git a/test/spec/ol/graticule.test.js b/test/spec/ol/graticule.test.js index a308d181f7..6f9b698fbe 100644 --- a/test/spec/ol/graticule.test.js +++ b/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');