Overview Examples Documentation Download


Satellite

Want to show what Earth looks like from space? The Bing Maps imagery metadata API provides beautiful aerial (satellite) image tiles at a wide range of zoom levels, with optional labels. The “Road” tileset is a more traditional alternative to Pale Dawn. Also? ZOMG PLANE!

This map is constructed using a single image layer. The tiles are in spherical mercator coordinates, and the map has standard interaction controls. This example implements a custom URL template because Bing requires coordinate “quadkeys” (a bit-wise encoding) rather than the traditional {Z}/{X}/{Y}. Register a Bing Maps account for your own API key.

Source Code

var po = org.polymaps;

var div = document.getElementById("map");

var map = po.map()
    .container(div.appendChild(po.svg("svg")))
    .add(po.interact())
    .add(po.hash());

/*
 * Load the "AerialWithLabels" metadata. "Aerial" and "Road" also work. For more
 * information about the Imagery Metadata service, see
 * http://msdn.microsoft.com/en-us/library/ff701716.aspx
 * You should register for your own key at https://www.bingmapsportal.com/.
 */
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "http://dev.virtualearth.net"
    + "/REST/V1/Imagery/Metadata/AerialWithLabels"
    + "?key=AmT-ZC3HPevQq5IBJ7v8qiDUxrojNaqbW1zBsKF0oMNEs53p7Nk5RlAuAmwSG7bg"
    + "&jsonp=callback");
document.body.appendChild(script);

function callback(data) {

  /* Display each resource as an image layer. */
  var resourceSets = data.resourceSets;
  for (var i = 0; i < resourceSets.length; i++) {
    var resources = data.resourceSets[i].resources;
    for (var j = 0; j < resources.length; j++) {
      var resource = resources[j];
      map.add(po.image()
          .url(template(resource.imageUrl, resource.imageUrlSubdomains)))
          .tileSize({x: resource.imageWidth, y: resource.imageHeight});
    }
  }

  /* Display brand logo. */
  document.getElementById("logo").src = data.brandLogoUri;

  /* Display copyright notice. */
  document.getElementById("copy").appendChild(document.createTextNode(data.copyright));

  /* Display compass control. */
  map.add(po.compass()
      .pan("none"));

}

/** Returns a Bing URL template given a string and a list of subdomains. */
function template(url, subdomains) {
  var n = subdomains.length,
      salt = ~~(Math.random() * n); // per-session salt

  /** Returns the given coordinate formatted as a 'quadkey'. */
  function quad(column, row, zoom) {
    var key = "";
    for (var i = 1; i <= zoom; i++) {
      key += (((row >> zoom - i) & 1) << 1) | ((column >> zoom - i) & 1);
    }
    return key;
  }

  return function(c) {
    var quadKey = quad(c.column, c.row, c.zoom),
        server = Math.abs(salt + c.column + c.row + c.zoom) % n;
    return url
        .replace("{quadkey}", quadKey)
        .replace("{subdomain}", subdomains[server]);
  };
}
Polymaps is a project from SimpleGeo and Stamen.