Skip to content

Instantly share code, notes, and snippets.

@mager
Created March 24, 2011 16:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mager/885346 to your computer and use it in GitHub Desktop.
Save mager/885346 to your computer and use it in GitHub Desktop.
Polymaps SSL example using Bing Maps
<html>
<head>
<script type="text/javascript" src="https://github.com/mager/polymaps/raw/master/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/mager/polymaps/raw/master/polymaps.js"></script>
<style type="text/css">
@import url("https://github.com/mager/polymaps/raw/master/examples/example.css");
.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">
<script type="text/javascript" src="map.js"></script>
<div id="copy"></div>
<img id="logo"/>
</body>
</html>
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", "https://dev.virtualearth.net"
+ "/REST/V1/Imagery/Metadata/Road"
+ "?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.replace(/^http:/, "https:"), 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]);
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment