Sequential Tiles

This is the counter-example to Hilbert Tiles.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://polymaps.org/polymaps.min.js"></script>
    <style type="text/css">

@import url("https://polymaps.org/style.css");

</style>
  </head>
  <body>
    <script type="text/javascript">

var po = org.polymaps;

var size = {x: 32, y: 32};

var map = po.map()
    .container(document.body.appendChild(po.svg("svg")))
    .zoomRange([0, 6])
    .zoom(4)
    .center({lat: 0, lon: 0})
    .tileSize(size)
    .add(po.interact());

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

map.add(po.compass()
    .pan("none"));

function rainbow(tile) {
  var rect = tile.element = po.svg("rect"),
      k = 1 << tile.zoom,
      i = tile.column + tile.row * k,
      j = ~~(i * 360 / Math.pow(4, tile.zoom));
  if (tile.column < 0 || tile.column >= k) return;
  rect.setAttribute("width", size.x);
  rect.setAttribute("height", size.y);
  rect.setAttribute("fill", hsl(j, 1, .5));
}

function hsl(h, s, l) {
  var m1,
      m2;

/* Some simple corrections for h, s and l. */
  h = h % 360; if (h < 0) h += 360;
  s = s < 0 ? 0 : s > 1 ? 1 : s;
  l = l < 0 ? 0 : l > 1 ? 1 : l;

/* From FvD 13.37, CSS Color Module Level 3 */
  m2 = l <= .5 ? l * (1 + s) : l + s - l * s;
  m1 = 2 * l - m2;

function v(h) {
    if (h > 360) h -= 360;
    else if (h < 0) h += 360;
    if (h < 60) return m1 + (m2 - m1) * h / 60;
    if (h < 180) return m2;
    if (h < 240) return m1 + (m2 - m1) * (240 - h) / 60;
    return m1;
  }

function vv(h) {
    return Math.round(v(h) * 255);
  }

return "rgb(" + vv(h + 120) + "," + vv(h) + "," + vv(h - 120) + ")";
}

</script>
  </body>
</html>

Modified http://polymaps.org/polymaps.min.js to a secure url

https://polymaps.org/polymaps.min.js