Custom Tile Rendering in Leaflet

662 views
Skip to first unread message

Alexander Dunkel

unread,
Oct 16, 2012, 5:41:37 AM10/16/12
to leafl...@googlegroups.com
Hi,
I just joined this group since it helped me through the process of setting up leaflet on my webpage. Here's a problem I couldn't solve:
My custom tiles were originally created using MS Deep Zoom Composer. First, I was using Silverlight to display them:
But it wasn't very compatible, so I tried other ways, like HTML5 Canvas Zoom:
But HTML5 Canvas Zoom seems limited to a certain size of maps, so I went to OpenLayers and finally to Leaflet:


Leaflet works great except of the tile rendering in some places. If you follow the link above, for example, there are vertical and horizontal lines at "supremecourt" which shouldn't be there. HTML5 Canvas Zoom and Silverlight render the same tiles just fine. Maybe there is some overlap or placement problem?
It would be a pain to recreate and upload all tiles again, since it's already about 50.000 single files and 1 GB of space.

Maybe someone has an idea?

Alexander Dunkel

unread,
Oct 16, 2012, 8:51:17 AM10/16/12
to leafl...@googlegroups.com
I think I've found the issue: the Tiles generated by MS Deep Zoom Composer are overlapping 1px. The Tilesize is actually 258px, whereas the used area is 256px.
This is what the XML from Deep Zoom Composer states:
<Image TileSize="256" Overlap="1" Format="jpg" ServerFormat="Default" xmlns="http://schemas.microsoft.com/deepzoom/2009">

Is there any way I could tell Leaflet to crop the tiles 1px or overlay/overlap tiles 1px?

Alexander Dunkel

unread,
Oct 16, 2012, 9:50:49 AM10/16/12
to leafl...@googlegroups.com
I don't know how, but I have found a working solution:
in leaflet-src.js I changed line 2270 from

_getTilePos: function (tilePoint) {
var origin = this._map.getPixelOrigin(),
  tileSize = this.options.tileSize;

return tilePoint.multiplyBy(tileSize).subtract(origin);
},

to 

_getTilePos: function (tilePoint) {
var origin = this._map.getPixelOrigin(),
tileSize = this.options.tileSize - 2;

return tilePoint.multiplyBy(tileSize).subtract(origin);
},

Except of some unloading of tiles on the bottom and right side, it works!

Reply all
Reply to author
Forward
0 new messages