Created
March 24, 2011 16:20
-
-
Save mager/885346 to your computer and use it in GitHub Desktop.
Polymaps SSL example using Bing Maps
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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