Import map tiles into Polymaps from a web directory

Question

I'm trying to import map tiles into polymaps using the following directory path:

http://pelagios.dme.ait.ac.at/tilesets/imperium/{z}/{x}/{y}/.png

but I'm getting a 404 error. Here's my code:

   var po = org.polymaps;

   var map = po.map().container(document.body.appendChild(po.svg("svg")));

   map.add(po.image()
      .url(po.url
          ("http://pelagios.dme.ait.ac.at/tilesets/imperium/{z}/{x}/{y}/.png")));

The png files definitely exist, as they're visible at http://pelagios.dme.ait.ac.at/tilesets/imperium/. What's more, I've seen this same syntax used in various polymaps examples.

Any advice as to how to import these tiles?

Answer 1

First of all, you need to turn the variables into upper case and remove that last slash character in the URL. The proper URL is:

http://pelagios.dme.ait.ac.at/tilesets/imperium/{Z}/{X}/{Y}.png

I copied your code into an empty HTML file and at least with default container size, the map zoom level is set to 12. Your map tiles server only seems to contain map tiles for zoom levels 3 to 11.

Apart from this, you should set the map center to something meaningful, so that you are looking at a location on the map for which map tiles are found.

The following modified code seems to work and show some map tiles from the Mediterranean area:

var po = org.polymaps;

var map = po.map()
 .container(document.body.appendChild(po.svg("svg")))
 .zoomRange([3, 11])
 .zoom(5)
 .size({x: 800, y: 600})
 .center({lat: 40, lon: 10})
 .add(po.image().url(po.url("http://pelagios.dme.ait.ac.at/tilesets/imperium/{Z}/{X}/{Y}.png")));