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.
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]); }; }