Focusable Maps

These two maps are independently focusable, thanks to the tabindex attribute on a containing div element.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/simplegeo/polymaps/v2.3.0/polymaps.min.js"></script>
    <style type="text/css">

@import url("https://cdn.rawgit.com/simplegeo/polymaps/v2.3.0/examples/example.css");

html, body {
  height: 100%;
  background: #E6E6E6;
}

div {
  float: left;
  width: 50%;
  height: 100%;
}

svg {
  display: block;
}

</style>
  </head>
  <body>
    <div id="left" tabindex="1"></div>
    <div id="right" tabindex="2"></div>
    <script type="text/javascript">

var po = org.polymaps;

var left = po.map()
    .container(document.getElementById("left").appendChild(po.svg("svg")))
    .add(po.interact());

left.add(po.image()
    .url(po.url("https://{S}tile.cloudmade.com"
    + "/1a1b06b230af4efdbb989ea99e9841af" // https://cloudmade.com/register
    + "/998/256/{Z}/{X}/{Y}.png")
    .hosts(["a.", "b.", "c.", ""])));

var right = po.map()
    .container(document.getElementById("right").appendChild(po.svg("svg")))
    .add(po.interact());

right.add(po.image()
    .url(po.url("https://{S}tile.cloudmade.com"
    + "/1a1b06b230af4efdbb989ea99e9841af" // https://cloudmade.com/register
    + "/999/256/{Z}/{X}/{Y}.png")
    .hosts(["a.", "b.", "c.", ""])));

</script>
    <span id="copy">
      &copy; 2010
      <a href="https://www.cloudmade.com/">CloudMade</a>,
      <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,
      <a href="https://creativecommons.org/licenses/by-sa/2.0/">CCBYSA</a>.
    </span>
  </body>
</html>

Updated missing url https://cdn.rawgit.com/simplegeo/polymaps/v2.3.0/polymaps.min.js to https://cdn.jsdelivr.net/gh/simplegeo/polymaps/v2.3.0/polymaps.min.js

https://cdn.rawgit.com/simplegeo/polymaps/v2.3.0/polymaps.min.js