Image Overlay
Sometimes you just want to throw an image on a map. This example shows how to position an image using two locations for the top-right and bottom-left corner. The map takes care of panning and zooming! While this example requires that the image be axis-aligned, it can be easily extended to use an affine transform for more flexible projection.
The map background is an image layer from CloudMade. Register a developer account with CloudMade for your own API key.
The image overlay is implemented using an anonymous subclass of po.layer, which delegates tile creation to the overlay method.
Source Code
var po = org.polymaps;
var map = po.map()
.container(document.getElementById("map").appendChild(po.svg("svg")))
.zoomRange([12, 15])
.add(po.interact());
map.add(po.image()
.url(po.url("http://{S}tile.cloudmade.com"
+ "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register
+ "/998/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({lon: -122.518, lat: 37.816}),
br = proj.locationPoint({lon: -122.375, lat: 37.755}),
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("http://www.w3.org/1999/xlink", "href", "sf1906.png");
}