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

Popular posts from this blog

javascript - DIV "hiding" when changing dropdown value -

Does Firefox offer AppleScript support to get URL of windows? -

android - How to install packaged app on Firefox for mobile? -