Add color option to ol.style.Icon

examples/icon.js

@@ -2,6 +2,7 @@ goog.require('ol.Feature');
 goog.require('ol.Map');
 goog.require('ol.Overlay');
 goog.require('ol.View');
+goog.require('ol.color');
 goog.require('ol.geom.Point');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
@@ -23,6 +24,7 @@ var iconStyle = new ol.style.Style({
     anchor: [0.5, 46],
     anchorXUnits: 'fraction',
     anchorYUnits: 'pixels',
+    color: ol.color.asArray('#8959A8'),
     opacity: 0.75,
     src: 'data/icon.png'
   }))

externs/olx.js

@@ -6040,6 +6040,7 @@ olx.style.FillOptions.prototype.color;
  *     anchorOrigin: (ol.style.IconOrigin|undefined),
  *     anchorXUnits: (ol.style.IconAnchorUnits|undefined),
  *     anchorYUnits: (ol.style.IconAnchorUnits|undefined),
+ *     color: (ol.Color|undefined),
  *     crossOrigin: (null|string|undefined),
  *     img: (Image|HTMLCanvasElement|undefined),
  *     offset: (Array.<number>|undefined),
@@ -6094,6 +6095,14 @@ olx.style.IconOptions.prototype.anchorXUnits;
 olx.style.IconOptions.prototype.anchorYUnits;
 
 
+/**
+ * Color to tint the icon. If not specified, the icon will be left as is.
+ * @type {ol.Color|undefined}
+ * @api
+ */
+olx.style.IconOptions.prototype.color;
+
+
 /**
  * The `crossOrigin` attribute for loaded images.  Note that you must provide a
  * `crossOrigin` value if you are using the WebGL renderer or if you want to

src/ol/style/iconstyle.js

@@ -7,6 +7,7 @@ goog.require('goog.asserts');
 goog.require('goog.events');
 goog.require('goog.events.EventTarget');
 goog.require('goog.events.EventType');
+goog.require('ol.color');
 goog.require('ol.dom');
 goog.require('ol.style.Image');
 goog.require('ol.style.ImageState');
@@ -125,12 +126,17 @@ ol.style.Icon = function(opt_options) {
   var imageState = options.src !== undefined ?
       ol.style.ImageState.IDLE : ol.style.ImageState.LOADED;
 
+  /**
+   * @type {ol.Color}
+   */
+  var color = options.color !== undefined ? options.color : null;
+
   /**
    * @private
    * @type {ol.style.IconImage_}
    */
   this.iconImage_ = ol.style.IconImage_.get(
-      image, src, imgSize, crossOrigin, imageState);
+      image, src, imgSize, crossOrigin, imageState, color);
 
   /**
    * @private
@@ -373,10 +379,12 @@ ol.style.Icon.prototype.unlistenImageChange = function(listener, thisArg) {
  * @param {ol.Size} size Size.
  * @param {?string} crossOrigin Cross origin.
  * @param {ol.style.ImageState} imageState Image state.
+ * @param {ol.Color} color Color.
  * @extends {goog.events.EventTarget}
  * @private
  */
-ol.style.IconImage_ = function(image, src, size, crossOrigin, imageState) {
+ol.style.IconImage_ = function(image, src, size, crossOrigin, imageState,
+                               color) {
 
   goog.base(this);
 
@@ -396,6 +404,20 @@ ol.style.IconImage_ = function(image, src, size, crossOrigin, imageState) {
     this.image_.crossOrigin = crossOrigin;
   }
 
+  /**
+   * @private
+   * @type {HTMLCanvasElement}
+   */
+  this.canvas_ = color ?
+      /** @type {HTMLCanvasElement} */ (document.createElement('CANVAS')) :
+      null;
+
+  /**
+   * @private
+   * @type {ol.Color}
+   */
+  this.color_ = color;
+
   /**
    * @private
    * @type {Array.<goog.events.Key>}
@@ -439,15 +461,17 @@ goog.inherits(ol.style.IconImage_, goog.events.EventTarget);
  * @param {ol.Size} size Size.
  * @param {?string} crossOrigin Cross origin.
  * @param {ol.style.ImageState} imageState Image state.
+ * @param {ol.Color} color Color.
  * @return {ol.style.IconImage_} Icon image.
  */
-ol.style.IconImage_.get = function(image, src, size, crossOrigin, imageState) {
+ol.style.IconImage_.get = function(image, src, size, crossOrigin, imageState,
+                                   color) {
   var iconImageCache = ol.style.IconImageCache.getInstance();
-  var iconImage = iconImageCache.get(src, crossOrigin);
+  var iconImage = iconImageCache.get(src, crossOrigin, color);
   if (!iconImage) {
     iconImage = new ol.style.IconImage_(
-        image, src, size, crossOrigin, imageState);
+        image, src, size, crossOrigin, imageState, color);
-    iconImageCache.set(src, crossOrigin, iconImage);
+    iconImageCache.set(src, crossOrigin, color, iconImage);
   }
   return iconImage;
 };
@@ -492,6 +516,7 @@ ol.style.IconImage_.prototype.handleImageLoad_ = function() {
   this.imageState_ = ol.style.ImageState.LOADED;
   this.size_ = [this.image_.width, this.image_.height];
   this.unlistenImage_();
+  this.replaceColor_();
   this.determineTainting_();
   this.dispatchChangeEvent_();
 };
@@ -502,7 +527,7 @@ ol.style.IconImage_.prototype.handleImageLoad_ = function() {
  * @return {Image|HTMLCanvasElement} Image or Canvas element.
  */
 ol.style.IconImage_.prototype.getImage = function(pixelRatio) {
-  return this.image_;
+  return this.canvas_ ? this.canvas_ : this.image_;
 };
 
 
@@ -575,6 +600,38 @@ ol.style.IconImage_.prototype.load = function() {
 };
 
 
+/**
+ * @private
+ */
+ol.style.IconImage_.prototype.replaceColor_ = function() {
+  if (this.color_ === null) {
+    return;
+  }
+
+  goog.asserts.assert(this.canvas_ !== null,
+      'this.canvas_ must not be null');
+
+  this.canvas_.width = this.image_.width;
+  this.canvas_.height = this.image_.height;
+
+  var ctx = this.canvas_.getContext('2d');
+  ctx.drawImage(this.image_, 0, 0);
+
+  var imgData = ctx.getImageData(0, 0, this.image_.width, this.image_.height);
+  var data = imgData.data;
+  var r = this.color_[0] / 255.0;
+  var g = this.color_[1] / 255.0;
+  var b = this.color_[2] / 255.0;
+
+  for (var i = 0, ii = data.length; i < ii; i += 4) {
+    data[i] *= r;
+    data[i + 1] *= g;
+    data[i + 2] *= b;
+  }
+  ctx.putImageData(imgData, 0, 0);
+};
+
+
 /**
  * Discards event handlers which listen for load completion or errors.
  *
@@ -619,12 +676,14 @@ goog.addSingletonGetter(ol.style.IconImageCache);
 /**
  * @param {string} src Src.
  * @param {?string} crossOrigin Cross origin.
+ * @param {ol.Color} color Color.
  * @return {string} Cache key.
  */
-ol.style.IconImageCache.getKey = function(src, crossOrigin) {
+ol.style.IconImageCache.getKey = function(src, crossOrigin, color) {
   goog.asserts.assert(crossOrigin !== undefined,
       'argument crossOrigin must be defined');
-  return crossOrigin + ':' + src;
+  var colorString = color ? ol.color.asString(color) : 'null';
+  return crossOrigin + ':' + src + ':' + colorString;
 };
 
 
@@ -658,10 +717,11 @@ ol.style.IconImageCache.prototype.expire = function() {
 /**
  * @param {string} src Src.
  * @param {?string} crossOrigin Cross origin.
+ * @param {ol.Color} color Color.
  * @return {ol.style.IconImage_} Icon image.
  */
-ol.style.IconImageCache.prototype.get = function(src, crossOrigin) {
+ol.style.IconImageCache.prototype.get = function(src, crossOrigin, color) {
-  var key = ol.style.IconImageCache.getKey(src, crossOrigin);
+  var key = ol.style.IconImageCache.getKey(src, crossOrigin, color);
   return key in this.cache_ ? this.cache_[key] : null;
 };
 
@@ -669,10 +729,12 @@ ol.style.IconImageCache.prototype.get = function(src, crossOrigin) {
 /**
  * @param {string} src Src.
  * @param {?string} crossOrigin Cross origin.
+ * @param {ol.Color} color Color.
  * @param {ol.style.IconImage_} iconImage Icon image.
  */
-ol.style.IconImageCache.prototype.set = function(src, crossOrigin, iconImage) {
+ol.style.IconImageCache.prototype.set = function(src, crossOrigin, color,
-  var key = ol.style.IconImageCache.getKey(src, crossOrigin);
+                                                 iconImage) {
+  var key = ol.style.IconImageCache.getKey(src, crossOrigin, color);
   this.cache_[key] = iconImage;
   ++this.cacheSize_;
 };

test/spec/ol/style/iconstyle.test.js

@@ -133,7 +133,7 @@ describe('ol.style.Icon', function() {
       var cache = ol.style.IconImageCache.getInstance();
       var src = 'test.png';
       var iconImage = new ol.style.IconImage_(null, 'test.png', imgSize);
-      cache.set(src, null, iconImage);
+      cache.set(src, null, null, iconImage);
 
       var iconStyle = new ol.style.Icon({
         src: 'test.png'
@@ -176,7 +176,7 @@ describe('ol.style.IconImageCache', function() {
       for (i = 0; i < 4; ++i) {
         src = i + '';
         iconImage = new ol.style.IconImage_(src, null);
-        cache.set(src, null, iconImage);
+        cache.set(src, null, null, iconImage);
       }
 
       expect(cache.cacheSize_).to.eql(4);
@@ -186,7 +186,7 @@ describe('ol.style.IconImageCache', function() {
 
       src = '4';
       iconImage = new ol.style.IconImage_(src, null);
-      cache.set(src, null, iconImage);
+      cache.set(src, null, null, iconImage);
       expect(cache.cacheSize_).to.eql(5);
 
       cache.expire(); // remove '0' and '4'
@@ -196,21 +196,21 @@ describe('ol.style.IconImageCache', function() {
       iconImage = new ol.style.IconImage_(src, null);
       goog.events.listen(iconImage, goog.events.EventType.CHANGE,
           ol.nullFunction, false);
-      cache.set(src, null, iconImage);
+      cache.set(src, null, null, iconImage);
       expect(cache.cacheSize_).to.eql(4);
 
       src = '4';
       iconImage = new ol.style.IconImage_(src, null);
       goog.events.listen(iconImage, goog.events.EventType.CHANGE,
           ol.nullFunction, false);
-      cache.set(src, null, iconImage);
+      cache.set(src, null, null, iconImage);
       expect(cache.cacheSize_).to.eql(5);
 
       // check that '0' and '4' are not removed from the cache
       cache.expire();
-      key = ol.style.IconImageCache.getKey('0', null);
+      key = ol.style.IconImageCache.getKey('0', null, null);
       expect(key in cache.cache_).to.be.ok();
-      key = ol.style.IconImageCache.getKey('4', null);
+      key = ol.style.IconImageCache.getKey('4', null, null);
       expect(key in cache.cache_).to.be.ok();
 
     });