javascript - Google Maps API + Wax.g + IE = Tiny Tiles -
i'm using wax.g display custom tiles on google map. works fine in every browser i've tested, except ie. in other browsers, tiles rendered correctly, in ie, tiles rendering smaller version of true selves. issue best explained in following screenshots:
what should like: http://cl.ly/image/2e0u2b0c0f0w
what in ie: http://cl.ly/image/2f3b353q0g0c
this issue doesn't happen time, , if pan or zoom, correctly sized tiles, , don't. not sure if wax issue or issue how google maps api renders custom overlaymaptypes
. has else experienced issue? insight appreciated...
(cross-posted mapbox github issue - no answers there yet)
so problem images inheriting style height , width of auto, , wax.g's gettile
method method creates image
using new image(256, 256)
, writes height , width attributes of img
(img
attributes, not inline style). inline styles took priority on attributes, img
being sized using auto
. fixed ensuring img had height , width of 256 using inline styling.
wax.g code:
// tile element coordinate, zoom level, , ownerdocument. wax.g.connector.prototype.gettile = function(coord, zoom, ownerdocument) { var key = zoom + '/' + coord.x + '/' + coord.y; if (!this.cache[key]) { var img = this.cache[key] = new image(256, 256); this.cache[key].src = this.gettileurl(coord, zoom); this.cache[key].setattribute('gtilekey', key); this.cache[key].onerror = function() { img.style.display = 'none'; }; } return this.cache[key]; };
my modified code:
// tile element coordinate, zoom level, , ownerdocument. wax.g.connector.prototype.gettile = function(coord, zoom, ownerdocument) { var key = zoom + '/' + coord.x + '/' + coord.y; if (!this.cache[key]) { var img = this.cache[key] = new image(256, 256); img.style.height = '256px'; // added line img.style.width = '256px'; // added line this.cache[key].src = this.gettileurl(coord, zoom); this.cache[key].setattribute('gtilekey', key); this.cache[key].onerror = function() { img.style.display = 'none'; }; } return this.cache[key]; };
Comments
Post a Comment