polymaps image overlay

<html>
<head>
  <style>
  html, body {
    height: 100%;
  }

body {
    margin: 0;
    background: #E5E0D9;
  }

svg {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }

#copy {
    position: absolute;
    left: 0;
    bottom: 4px;
    padding-left: 5px;
    font: 9px sans-serif;
    color: #fff;
    cursor: default;
  }

#copy a {
    color: #fff;
  }

.compass .back {
    fill: #eee;
    fill-opacity: .8;
  }

.compass .fore {
    stroke: #999;
    stroke-width: 1.5px;
  }

.compass rect.back.fore {
    fill: #999;
    fill-opacity: .3;
    stroke: #eee;
    stroke-width: 1px;
    shape-rendering: crispEdges;
  }

.compass .direction {
    fill: none;
  }

.compass .chevron {
    fill: none;
    stroke: #999;
    stroke-width: 5px;
  }

.compass .zoom .chevron {
    stroke-width: 4px;
  }

.compass .active .chevron, .compass .chevron.active {
    stroke: #fff;
  }

.compass.active .active .direction {
    fill: #999;
  }
  .compass .chevron, .compass .fore {
    stroke: #666;
  }

#map {
    background: #132328;
  }

#logo {
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }

#copy {
    width: 33%;
    color: #ccc;
    pointer-events: none;
  }
  </style>
</head>
<body id="map">

var po = org.polymaps;

var map = po.map()
    .container(document.getElementById("map").appendChild(po.svg("svg")))
    .center({lat: 35.468809, lon: -97.518361})
    .zoom(16)
    .add(po.interact());

map.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.", ""])));

map.add(po.layer(overlay)
    .tile(false));

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

/** A lightweight layer implementation for an image overlay. */
function overlay(tile, proj) {
  proj = proj(tile);
  var tl = proj.locationPoint({lat: 35.4770, lon: -97.5255}),
      br = proj.locationPoint({lat: 35.4615, lon: -97.5083}),
      image = tile.element = po.svg("image");
  image.setAttribute("preserveAspectRatio", "none");
  image.setAttribute("x", tl.x);
  image.setAttribute("y", tl.y);
  image.setAttribute("width", br.x - tl.x);
  image.setAttribute("height", br.y - tl.y);
  image.setAttributeNS("https://www.w3.org/1999/xlink", "href", "https://darrenjaworski.com/images/p180.png");
}

</script>

https://cdnjs.cloudflare.com/ajax/libs/polymaps/2.5.1/polymaps.min.js