Polymaps - Tile Grid

Tile Grid

Use this lightweight layer implementation to explore the tile grid. Polymaps uses a polygon-fill algorithm to determine exactly which tiles are visible, given arbitrary zooming, panning and affine transforms.

As you pan and zoom with the mouse, watch how tiles outside the viewport (the red border) are removed. Tiles that come into view are dynamically generated and cached using the layer. Use the 'A' and 'D' keys to rotate the map!

The tile overlay is implemented using an anonymous subclass of po.layer, which delegates tile creation to the grid method. You can copy-and-paste this lightweight layer implementation into your own example for debugging!

The resize method isn’t strictly needed for this example, but we wanted to show how Polymaps recomputes the visible tiles as the map changes size.

Source Code

var po = org.polymaps;

var div = document.getElementById("map"),
    svg = div.appendChild(po.svg("svg")),
    g = svg.appendChild(po.svg("g"));

var map = po.map()
    .container(g)
    .tileSize({x: 128, y: 128})
    .angle(.3)
    .add(po.interact())
    .on("resize", resize);

resize();

map.add(po.layer(grid));

var rect = g.appendChild(po.svg("rect"));
rect.setAttribute("width", "50%");
rect.setAttribute("height", "50%");

function resize() {
  if (resize.ignore) return;
  var x = div.clientWidth / 2,
      y = div.clientHeight / 2;
  g.setAttribute("transform", "translate(" + (x / 2) + "," + (y / 2) + ")");
  resize.ignore = true;
  map.size({x: x, y: y});
  resize.ignore = false;
}

function grid(tile) {
  var g = tile.element = po.svg("g");

  var rect = g.appendChild(po.svg("rect")),
      size = map.tileSize();
  rect.setAttribute("width", size.x);
  rect.setAttribute("height", size.y);

  var text = g.appendChild(po.svg("text"));
  text.setAttribute("x", 6);
  text.setAttribute("y", 6);
  text.setAttribute("dy", ".71em");
  text.appendChild(document.createTextNode(tile.key));
}

var spin = 0;
setInterval(function() {
  if (spin) map.angle(map.angle() + spin);
}, 30);

function key(e) {
  switch (e.keyCode) {
    case 65: spin = e.type == "keydown" ? -.004 : 0; break;
    case 68: spin = e.type == "keydown" ? .004 : 0; break;
  }
}

window.addEventListener("keydown", key, true);
window.addEventListener("keyup", key, true);
window.addEventListener("resize", resize, false);