Add color option to ol.style.Icon

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);
-    iconImageCache.set(src, crossOrigin, iconImage);
+        image, src, size, crossOrigin, imageState, color);
+    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) {
-  var key = ol.style.IconImageCache.getKey(src, crossOrigin);
+ol.style.IconImageCache.prototype.get = function(src, crossOrigin, color) {
+  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) {
-  var key = ol.style.IconImageCache.getKey(src, crossOrigin);
+ol.style.IconImageCache.prototype.set = function(src, crossOrigin, color,
+                                                 iconImage) {
+  var key = ol.style.IconImageCache.getKey(src, crossOrigin, color);
   this.cache_[key] = iconImage;
   ++this.cacheSize_;
 };