Overview Examples Documentation Download
© 2010 CloudMade, OpenStreetMap contributors, CCBYSA.

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");
}
Polymaps is a project from SimpleGeo and Stamen.