Polymaps has the ability to easily pull in raster tiles from various sources to make Slippy maps. I have code that lets me use tiles made by Google, Cloudmade, Bing, GDAL’s tile script, even Minecraft. I have no idea how it works, though. The underlying thing I don’t understand is Polymaps’ internal coordinate representation. Here’s an example, for a map tile centered on San Francisco.
- Polymaps coordinate:
column: 327, row: 791, zoom: 11
key: “11/327/791”
x: -186.5, y: -273.5 - Google terrain: (327,791), zoom 11
http://mt0.google.com/vt/lyrs=t@126,r@145&hl=en&x=327&y=791&z=11 - TMS, the Tile Map Service: (327,1256), zoom 11
http://example.com/tiles/11/1256/327.jpg - QuadTree (Bing?): 02301020333
http://ecn.t3.tiles.virtualearth.net/tiles/r02301020333?g=637&mkt=en-us&lbl=l1&stl=h&shading=hill&n=z
This tells me Polymaps is natively using Google’s coordinate system. TMS is similar but numbered differently, here’s my cargo cult code to work with it. Mike tells me 1 << c.zoom is the number of tiles at the given zoom level, which explains why it’s used as a modulus everywhere.
// Set X to c.column, but wrapped around in the range [0, numTiles) var x = c.column % (1 << c.zoom); if (x < 0) { x = x + (1 << c.zoom) } // Set Y to numTiles - c.row, to account for TMS doing lat backwards var y = (1 << c.zoom) - c.row - 1; var url = "http://example.com/tiles/" + c.zoom + "/" + y + "/" + x + ".jpg";
More info: interactive coordinate exploration tool, Google docs, OSM / TMS docs.