search

rajpaul / google-maps-utility-library-v3

Automatically exported from code.google.com/p/google-maps-utility-library-v3
0 stars 0 forks source link

MarkerClusterer: ClusterIconStyle - fontFamily and fontWeight not working #324

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
var styles = [{
    fontFamily:"'Open Sans', Arial",
    fontWeight:"400",
    textColor:'#fff',
    url: '/img/design/m1.png',
    height: 52,
    width: 53,
}]
markerCluster = new MarkerClusterer(map, markers, 
{"minimumClusterSize":5,"gridSize":30, "styles":styles});   

What steps will reproduce the problem?
Try to set cluster styles with font family and font weight like above.

Expected result:
The cluster should be styled accordingly.

Actual result:
Font family and font weight styles are ignored. The rest works fine.

Browser / Operating System:
Any

Additional comments:
The problem is with this code in markerclusterer.js:

  style.push('cursor:pointer; top:' + pos.y + 'px; left:' +
      pos.x + 'px; color:' + txtColor + '; position:absolute; font-size:' +
      txtSize + 'px; font-family:Arial,sans-serif; font-weight:bold');
  return style.join('');

The font-family and font-weight default values (as described in 
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererpl
us/docs/reference.html#ClusterIconStyle) are actually hardcoded into the 
returned style. The needed changes are:

ClusterIcon.prototype.useStyle = function() {
  var index = Math.max(0, this.sums_.index - 1);
  index = Math.min(this.styles_.length - 1, index);
  var style = this.styles_[index];
  this.url_ = style['url'];
  this.height_ = style['height'];
  this.width_ = style['width'];
  this.textColor_ = style['textColor'];
  this.anchor_ = style['anchor'];
  this.textSize_ = style['textSize'];
  this.backgroundPosition_ = style['backgroundPosition'];
  this.fontFamily_ = style['fontFamily']; // added
  this.fontWeight_ = style['fontWeight']; // added
};

  var fontFamily = this.fontFamily_ ? this.fontFamily_ : "Arial";
  var fontWeight = this.fontWeight_ ? this.fontWeight_ : "bold";

  style.push('cursor:pointer; top:' + pos.y + 'px; left:' +
      pos.x + 'px; color:' + txtColor + '; position:absolute; font-size:' +
      txtSize + 'px; font-family:'+fontFamily+'; font-weight:'+fontWeight);
  return style.join('');

Original issue reported on code.google.com by cjsinnb...@gmail.com on 5 Sep 2014 at 11:05