Can't get markerClustererPlus to work with sprites

202 views
Skip to first unread message

Daniel

unread,
Nov 30, 2011, 6:04:16 AM11/30/11
to google-map...@googlegroups.com
Hi!

It seem like markerClustererPlus ignores the backgroundPosition-option and scales the whole sprite to 40x40.

Example style:
{
   anchorIcon: [0,40],
   url: '/template/ver2-0/images/dir/sprite.png',
   height: 40,
   width: 40,
   backgroundPosition: "-5 -184"
}

Any idea?

Regards

Rossko

unread,
Nov 30, 2011, 3:12:02 PM11/30/11
to Google Maps JavaScript API v3
> Any idea?

No. Demo?

Pil

unread,
Dec 1, 2011, 3:45:50 AM12/1/11
to Google Maps JavaScript API v3
You'd have to look *inside* the documentation (if they exist) closely
if markerClustererPlus supports sprites. I have no idea if that's the
case.

When it does support sprites you may follow the docs, when it doesn't
you may implement it yourself by changing the code.

FYI. There is an alternative to sprites - just as good as sprites.
It's called a Data URI

http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/

Pil

unread,
Dec 1, 2011, 3:58:31 AM12/1/11
to Google Maps JavaScript API v3

On Nov 30, 12:04 pm, Daniel <daniel.hall...@svd.se> wrote:

>    backgroundPosition: "-5 -184"


BTW. This seems to be invalid css anyway.
Try to start here

http://www.w3schools.com/cssref/pr_background-position.asp

Daniel Halldin

unread,
Dec 1, 2011, 4:05:44 AM12/1/11
to google-map...@googlegroups.com
I've tried backgroundPosition: "-5px -184px" too, no luck there.

The documentation says:
"backgroundPosition string The position of the cluster icon image within the image defined by url. The format is "xpos ypos" (the same format as for the CSS background-position property). You must set this property appropriately when the image defined by url represents a sprite containing multiple images. The default value is "0 0"."

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.


Pil

unread,
Dec 1, 2011, 5:54:58 AM12/1/11
to Google Maps JavaScript API v3
As Rossko pointed out: "Demo?"

If you provide a link to the patient and maybe an extra link to the
sprite image the chance to get help is much higher.

Daniel Halldin

unread,
Dec 1, 2011, 5:59:18 AM12/1/11
to google-map...@googlegroups.com
I would if I could, but It's not deployed yet. I guess i'll have to stick to separate images for now.

aclark

unread,
Dec 20, 2011, 3:05:17 PM12/20/11
to Google Maps JavaScript API v3
I have the same problem; I think the bug is here:

ClusterIcon.prototype.createCss = function (pos) {
var style = [];
if (!this.cluster_.printable_) {
style.push('background-image:url(' + this.url_ + ');');
>> style.push('background-size:' + this.width_ + 'px ' + this.height_ + 'px;'); //For iPhone retina display
style.push('background-position:' + this.backgroundPosition_ +
';');
}

The code styles the background size equal to the icon size, so if
you're using a sprite the result is the entire sprite image shrunk
down to the icon size. I'm not targeting iPhone and I'm using a local
copy of markerclusterer so I just commented out the line, and the
sprite appears correctly.

- Adam

Reply all
Reply to author
Forward
0 new messages