From 069cd3d94ea31fc69cce1fe6d0f04d84fbe653f5 Mon Sep 17 00:00:00 2001 From: Kevin Candlert Date: Fri, 25 Nov 2016 12:54:56 +0100 Subject: [PATCH 1/4] adding support for a custom css class to the cluster marker. If a custom css is supplied it will ignore the default style and the 'styles' parameter. --- src/markerclusterer.js | 33 ++++++++++++++++++++++++++++----- 1 file changed, 28 insertions(+), 5 deletions(-) diff --git a/src/markerclusterer.js b/src/markerclusterer.js index 554fcec..233c59e 100755 --- a/src/markerclusterer.js +++ b/src/markerclusterer.js @@ -51,6 +51,8 @@ * 'minimumClusterSize': (number) The minimum number of markers to be in a * cluster before the markers are hidden and a count * is shown. + * 'cssClass': (string) Css class to add to each cluster maker. This will + * also remove default style and ignore 'styles' parameter. * 'styles': (object) An object that has style properties: * 'url': (string) The image url. * 'height': (number) The image height. @@ -118,6 +120,12 @@ function MarkerClusterer(map, opt_markers, opt_options) { this.styles_ = options['styles'] || []; + /** + * @type {string} + * @private + */ + this.cssClass_ = options['cssClass']; + /** * @type {string} * @private @@ -181,6 +189,9 @@ function MarkerClusterer(map, opt_markers, opt_options) { if (opt_markers && opt_markers.length) { this.addMarkers(opt_markers, false); } + + if (this.styles_.length && this.cssClass_) + console.warn("A custom style and cssClass is applied. The custom style will be discarded."); } @@ -810,7 +821,7 @@ function Cluster(markerClusterer) { this.markers_ = []; this.bounds_ = null; this.clusterIcon_ = new ClusterIcon(this, markerClusterer.getStyles(), - markerClusterer.getGridSize()); + markerClusterer.getGridSize(), markerClusterer.cssClass_); } /** @@ -1021,13 +1032,15 @@ Cluster.prototype.updateIcon = function() { * 'textSize': (number) The text size. * 'backgroundPosition: (string) The background postition x, y. * @param {number=} opt_padding Optional padding to apply to the cluster icon. + * @param {string} cssClass (string) Css class to add to each cluster maker. This will also remove default style and ignore 'styles' parameter. * @constructor * @extends google.maps.OverlayView * @ignore */ -function ClusterIcon(cluster, styles, opt_padding) { +function ClusterIcon(cluster, styles, opt_padding, cssClass) { cluster.getMarkerClusterer().extend(ClusterIcon, google.maps.OverlayView); + this.cssClass_ = cssClass; this.styles_ = styles; this.padding_ = opt_padding || 0; this.cluster_ = cluster; @@ -1067,7 +1080,8 @@ ClusterIcon.prototype.onAdd = function() { this.div_ = document.createElement('DIV'); if (this.visible_) { var pos = this.getPosFromLatLng_(this.center_); - this.div_.style.cssText = this.createCss(pos); + this.div_.style.cssText = this.createCss(pos, !!this.cssClass_); + this.div_.className += this.cssClass_; this.div_.innerHTML = this.sums_.text; } @@ -1142,7 +1156,7 @@ ClusterIcon.prototype.hide = function() { ClusterIcon.prototype.show = function() { if (this.div_) { var pos = this.getPosFromLatLng_(this.center_); - this.div_.style.cssText = this.createCss(pos); + this.div_.style.cssText = this.createCss(pos, !!this.cssClass_); this.div_.style.display = ''; } this.visible_ = true; @@ -1221,9 +1235,18 @@ ClusterIcon.prototype.setCenter = function(center) { * Create the css text based on the position of the icon. * * @param {google.maps.Point} pos The position. + * @param {bool} hasCssClass If a cssClass is supplied, discard inline styling * @return {string} The css style text. */ -ClusterIcon.prototype.createCss = function(pos) { +ClusterIcon.prototype.createCss = function(pos, hasCssClass) { + if(hasCssClass) { + return + + 'top:' + pos.y + 'px;' + + 'left:' + pos.x + 'px;' + + 'cursor:pointer;' + + 'position:absolute;'; + } + var style = []; style.push('background-image:url(' + this.url_ + ');'); var backgroundPosition = this.backgroundPosition_ ? this.backgroundPosition_ : '0 0'; From 00e9efb8498d414d6178801f8007afda4f5a572b Mon Sep 17 00:00:00 2001 From: Kevin Candlert Date: Fri, 25 Nov 2016 12:54:56 +0100 Subject: [PATCH 2/4] adding support for a custom css class to the cluster marker. If a custom css is supplied it will ignore the default style and the 'styles' parameter. --- CONTRIBUTORS | 1 + src/markerclusterer.js | 33 ++++++++++++++++++++++++++++----- 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/CONTRIBUTORS b/CONTRIBUTORS index aa5a6d9..06f90f3 100644 --- a/CONTRIBUTORS +++ b/CONTRIBUTORS @@ -14,3 +14,4 @@ Brendan Kenny Moisés Arcos Peter Grassberger Chris Fritz +Kevin Candlert diff --git a/src/markerclusterer.js b/src/markerclusterer.js index 554fcec..233c59e 100755 --- a/src/markerclusterer.js +++ b/src/markerclusterer.js @@ -51,6 +51,8 @@ * 'minimumClusterSize': (number) The minimum number of markers to be in a * cluster before the markers are hidden and a count * is shown. + * 'cssClass': (string) Css class to add to each cluster maker. This will + * also remove default style and ignore 'styles' parameter. * 'styles': (object) An object that has style properties: * 'url': (string) The image url. * 'height': (number) The image height. @@ -118,6 +120,12 @@ function MarkerClusterer(map, opt_markers, opt_options) { this.styles_ = options['styles'] || []; + /** + * @type {string} + * @private + */ + this.cssClass_ = options['cssClass']; + /** * @type {string} * @private @@ -181,6 +189,9 @@ function MarkerClusterer(map, opt_markers, opt_options) { if (opt_markers && opt_markers.length) { this.addMarkers(opt_markers, false); } + + if (this.styles_.length && this.cssClass_) + console.warn("A custom style and cssClass is applied. The custom style will be discarded."); } @@ -810,7 +821,7 @@ function Cluster(markerClusterer) { this.markers_ = []; this.bounds_ = null; this.clusterIcon_ = new ClusterIcon(this, markerClusterer.getStyles(), - markerClusterer.getGridSize()); + markerClusterer.getGridSize(), markerClusterer.cssClass_); } /** @@ -1021,13 +1032,15 @@ Cluster.prototype.updateIcon = function() { * 'textSize': (number) The text size. * 'backgroundPosition: (string) The background postition x, y. * @param {number=} opt_padding Optional padding to apply to the cluster icon. + * @param {string} cssClass (string) Css class to add to each cluster maker. This will also remove default style and ignore 'styles' parameter. * @constructor * @extends google.maps.OverlayView * @ignore */ -function ClusterIcon(cluster, styles, opt_padding) { +function ClusterIcon(cluster, styles, opt_padding, cssClass) { cluster.getMarkerClusterer().extend(ClusterIcon, google.maps.OverlayView); + this.cssClass_ = cssClass; this.styles_ = styles; this.padding_ = opt_padding || 0; this.cluster_ = cluster; @@ -1067,7 +1080,8 @@ ClusterIcon.prototype.onAdd = function() { this.div_ = document.createElement('DIV'); if (this.visible_) { var pos = this.getPosFromLatLng_(this.center_); - this.div_.style.cssText = this.createCss(pos); + this.div_.style.cssText = this.createCss(pos, !!this.cssClass_); + this.div_.className += this.cssClass_; this.div_.innerHTML = this.sums_.text; } @@ -1142,7 +1156,7 @@ ClusterIcon.prototype.hide = function() { ClusterIcon.prototype.show = function() { if (this.div_) { var pos = this.getPosFromLatLng_(this.center_); - this.div_.style.cssText = this.createCss(pos); + this.div_.style.cssText = this.createCss(pos, !!this.cssClass_); this.div_.style.display = ''; } this.visible_ = true; @@ -1221,9 +1235,18 @@ ClusterIcon.prototype.setCenter = function(center) { * Create the css text based on the position of the icon. * * @param {google.maps.Point} pos The position. + * @param {bool} hasCssClass If a cssClass is supplied, discard inline styling * @return {string} The css style text. */ -ClusterIcon.prototype.createCss = function(pos) { +ClusterIcon.prototype.createCss = function(pos, hasCssClass) { + if(hasCssClass) { + return + + 'top:' + pos.y + 'px;' + + 'left:' + pos.x + 'px;' + + 'cursor:pointer;' + + 'position:absolute;'; + } + var style = []; style.push('background-image:url(' + this.url_ + ');'); var backgroundPosition = this.backgroundPosition_ ? this.backgroundPosition_ : '0 0'; From 534a248a95787fa7aabd7bfa19ab979aab66a46d Mon Sep 17 00:00:00 2001 From: Kevin Candlert Date: Fri, 25 Nov 2016 14:39:44 +0100 Subject: [PATCH 3/4] moving the warning for cssClass vs custom style --- src/markerclusterer.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/markerclusterer.js b/src/markerclusterer.js index 233c59e..5fbbef4 100755 --- a/src/markerclusterer.js +++ b/src/markerclusterer.js @@ -126,6 +126,9 @@ function MarkerClusterer(map, opt_markers, opt_options) { */ this.cssClass_ = options['cssClass']; + if (this.styles_.length && this.cssClass_) + console.warn("A custom style and cssClass is applied. The custom style will be discarded."); + /** * @type {string} * @private @@ -189,9 +192,6 @@ function MarkerClusterer(map, opt_markers, opt_options) { if (opt_markers && opt_markers.length) { this.addMarkers(opt_markers, false); } - - if (this.styles_.length && this.cssClass_) - console.warn("A custom style and cssClass is applied. The custom style will be discarded."); } From b3937ea9351855b37813ae22c82166e202ebb978 Mon Sep 17 00:00:00 2001 From: Kevin Candlert Date: Fri, 25 Nov 2016 15:05:01 +0100 Subject: [PATCH 4/4] making a more solid if-statements to check if there's any property in the 'styles' parameter --- src/markerclusterer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/markerclusterer.js b/src/markerclusterer.js index 5fbbef4..fb0b046 100755 --- a/src/markerclusterer.js +++ b/src/markerclusterer.js @@ -126,7 +126,7 @@ function MarkerClusterer(map, opt_markers, opt_options) { */ this.cssClass_ = options['cssClass']; - if (this.styles_.length && this.cssClass_) + if (Object.keys(this.styles_).length > 0 && this.cssClass_) console.warn("A custom style and cssClass is applied. The custom style will be discarded."); /**