Markerclusterer: anchor offset for cluster icons

Question

I am trying to slightly compensate for the cluster icons created by Google Maps Markerclusterer (V3). Unless you modify the existing code, I cannot find a way to do this. Does anyone have an idea?

The Styles object, in which you can specify the URL of the custom image, accepts the binding property, but this should compensate for the number of generated markers.

Thanks!

Answer 1

You can add transparent space to one side of the icon of your PNG cluster, so the part of the icon you want to center is actually also concentrated in your PNG. This should not increase the weight of your image by more than a few bytes.

Answer 2

The correct way to do this is to configure the anchorIcon property as follows:

 var clusterStyles = [ { height: 64, width: 53, anchorIcon: [20, 140] }, { height: 64, width: 53, anchorIcon: [20, 140] }, { height: 64, width: 53, anchorIcon: [20, 140] } ]; var mcOptions = { styles: clusterStyles }; var markerCluster = new MarkerClusterer(map, markers, mcOptions); 

Answer 3

The accepted answer does not work well enough for me - adding transparent space to the icon image can change the way the click and hover events behave due to an increase in the size of the object.

The anchorIcon property, on the other hand, exists only in Marker Clusterer Plus , and not in another Clusterer Marker . For those who for some reason do not want to switch plugins, you can override ClusterIcon.prototype.getPosFromLatLng_ . The ClusterIcon object is global, so we can do this in our own scripts without entering the source code of the plugin. This will snap the marker to the bottom of the icon:

 ClusterIcon.prototype.getPosFromLatLng_ = function (latlng) { var pos = this.getProjection().fromLatLngToDivPixel(latlng); pos.x -= parseInt(this.width_ / 2); pos.y -= parseInt(this.height_); return pos; }; 

Answer 4

The properties anchor / anchorIcon / anchorText did not work for me ... so I made a kind of workaround:

I use the setCalculator() function to set the cluster text:

https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html

when I set the cluster's text property, I wrap the value with <span> , something like this:

 markerCluster.setCalculator(function (markers) { return { text: '<span class="myClass">' + value+ '</span>', index: index }; }); 

you can now control the cluster label position with ".myClass":

 span.myClass{ position: relative; top: -15px; ..... } 

Answer 5

I changed the marcerclusterer.js code to support the anchorText parameter by changing the following two functions:

 /** * Sets the icon to the the styles. */ 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.anchorText_ = style['anchorText']; //added to support anchorText parameter by Frane Poljak, Locastic this.textSize_ = style['textSize']; this.backgroundPosition_ = style['backgroundPosition']; }; /** * Adding the cluster icon to the dom. * @ignore */ 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); ////added to support anchorText parameter by Frane Poljak, Locastic if (typeof this.anchorText_ === 'object' && typeof this.anchorText_[0] === 'number' && typeof this.anchorText_[1] === 'number') { this.div_.innerHTML = '<span style="position:relative;top:' + String(this.anchorText_[0]) + 'px;left:' + String(this.anchorText_[1]) + 'px;">' + this.sums_.text + '</span>' } else this.div_.innerHTML = this.sums_.text; } var panes = this.getPanes(); panes.overlayMouseTarget.appendChild(this.div_); var that = this; google.maps.event.addDomListener(this.div_, 'click', function() { that.triggerClusterClick(); }); };