googlearchive / js-marker-clusterer

A marker clustering library for the Google Maps JavaScript API v3.
https://googlemaps.github.io/js-marker-clusterer/docs/reference.html
Apache License 2.0
1.28k stars 775 forks source link

font-family and font-weight are static #5

Open FlashJunior opened 9 years ago

FlashJunior commented 9 years ago

font-family and font-weight from Cluster are static. See: Line 1237

I added "fontFamily" and "fontWeight" in my Project (like http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/docs/reference.html#ClusterIconStyle).

My changed code snippets:

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.fontFamily_ = style['fontFamily'];  //added
this.fontWeight_ = style['fontWeight'];  //added
var txtColor = this.textColor_ ? this.textColor_ : 'black';
var txtSize = this.textSize_ ? this.textSize_ : 11;
var fontFamily = this.fontFamily_ ? this.fontFamily_ : 'Arial,sans-serif';  //added
var fontWeight = this.fontWeight_ ? this.fontWeight_ : 'bold';  //added

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);   //changed
FlashJunior commented 9 years ago

An better option would be to pass a whole string for the style.

Example:

{
    style: 'font-family:Verdana, Geneva, sans-serif; font-size:15px;  font-weight:normal; font-style:normal; color:#fff;',
    width: 50,
    height: 50,
    url: '/media/img/yourclustericon.png'
}

instead of

{
    fontFamily: 'Verdana, Geneva, sans-serif',
    textSize: 15,
    textColor: '#ffffff',
    fontStyle: 'normal',
    fontWeight: 'normal',
    width: 50,
    height: 50,
    url: '/media/img/yourclustericon.png'
}
XmlmXmlmX commented 8 years ago

I agree with you

XmlmXmlmX commented 8 years ago

For me also a new option for css classes would be a huge advantage. Only top and left (lines 1235-1236) would be necessary for inline styling. The rest could then be styled Custom.

XmlmXmlmX commented 8 years ago

Ok, I pull two requests for this: usage example: https://github.com/googlemaps/js-marker-clusterer/pull/23 code changes: https://github.com/googlemaps/js-marker-clusterer/pull/24

Tomas-Zeitguys commented 8 years ago

Flash Junior's fix works perfectly