probabble · December 17, 2015 21:09
diff --git a/index.html b/index.html
 <html>
 <body>
 <script type="text/javascript" src="http://polymaps.org/polymaps.min.js?2.5.0"></script>
 <script type="text/javascript">
    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);
 </script>
 </body>
 </html>
	<html>
	<body>
	<script type="text/javascript" src="http://polymaps.org/polymaps.min.js?2.5.0"></script>
	<script type="text/javascript">
	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);
	</script>
	</body>
	</html>