ol3-google-maps/src/olgm/gm/mapicon.js

OpenLayers 3 Google Maps integration library

goog.provide('olgm.gm.MapIcon');

goog.require('ol');
goog.require('olgm.gm.MapElement');


/**
 * Creates a new map icon
 * @constructor
 * @extends {olgm.gm.MapElement}
 * @param {ol.style.Icon} imageStyle ol3 style properties
 * @param {Object.<string, *>=} opt_options Optional properties to set.
 * @api
 */
olgm.gm.MapIcon = function(imageStyle, opt_options) {

  olgm.gm.MapElement.call(this);

  /**
   * This object contains the ol3 style properties for the icon. We keep
   * it as an object because its properties can change, for example the size
   * is only defined after the image is done loading.
   * @type {ol.style.Icon}
   * @private
   */
  this.imageStyle_ = imageStyle;

  this.setValues(opt_options);
};
ol.inherits(olgm.gm.MapIcon, olgm.gm.MapElement);


/**
 * Listen to property changes and react accordingly
 * @param {string} prop property
 * @api
 * @override
 */
olgm.gm.MapIcon.prototype.changed = function(prop) {
  switch (prop) {
    case 'maxZoom':
    case 'minZoom':
    case 'offsetX':
    case 'offsetY':
    case 'position':
      this.draw();
      break;
    default:
      break;
  }
};


/**
 * Draws the icon to the canvas 2d context.
 * @private
 */
olgm.gm.MapIcon.prototype.drawCanvas_ = function() {
  var canvas = this.canvas_;
  if (!canvas) {
    return;
  }

  var image = this.imageStyle_.getImage(1);
  if (!image) {
    return;
  }

  var style = canvas.style;

  style.zIndex = /** @type {number} */ (this.get('zIndex'));

  var ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  var anchor = this.imageStyle_.getAnchor() || [0, 0];
  var scale = this.imageStyle_.getScale() || 1;
  var rotation = this.imageStyle_.getRotation() || 0;
  var opacity = this.imageStyle_.getOpacity() || 1;

  var offsetX = anchor[0] * scale;
  var offsetY = anchor[1] * scale;

  var x = canvas.width / 2 - offsetX;
  var y = canvas.height / 2 - offsetY;

  ctx.translate(x + offsetX, y + offsetY);
  ctx.rotate(rotation);
  ctx.translate(-x - offsetX, -y - offsetY);
  ctx.globalAlpha = opacity;

  ctx.drawImage(image, x, y,
      image.width * scale, image.height * scale);
};


/**
 * Manage feature being added to the map
 * @api
 * @override
 */
olgm.gm.MapIcon.prototype.onAdd = function() {
  var canvas = this.canvas_ = document.createElement('canvas');
  var style = canvas.style;
  style.position = 'absolute';

  this.drawCanvas_();

  var panes = this.getPanes();
  if (panes) {
    panes.markerLayer.appendChild(canvas);
  }
};