Skip to content

Instantly share code, notes, and snippets.

@jonrohan
Created June 20, 2011 22:37
Show Gist options
  • Save jonrohan/1036775 to your computer and use it in GitHub Desktop.
Save jonrohan/1036775 to your computer and use it in GitHub Desktop.
This is the description of my gist.
<!DOCTYPE HTML>
<html>
<body>
<div id="map"></div>
<script src="http://polymaps.org/polymaps.min.js?2.5.0"></script>
<script>
var po = org.polymaps;
var map = po.map()
.container(document.getElementById("map").appendChild(po.svg("svg")))
.add(po.interact())
.add(po.hash())
.zoom(18);
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.geoJson().on("load", load).features([{geometry: {coordinates: [-122.405827, 37.772381], type: "Point"}}]))
map.add(po.compass()
.pan("none"));
map.center({lat:37.772381,lon:-122.405827})
function load(e) {
var r = 20 * Math.pow(2, e.tile.zoom - 12);
for (var i = 0; i < e.features.length; i++) {
var f = e.features[i],
c = f.element;
g = f.element = po.svg("g");
point = g.appendChild(po.svg("circle"));
point.setAttribute("cx", 0);
point.setAttribute("cy", 0);
point.setAttribute("r", 5);
g.setAttribute("transform", c.getAttribute("transform"));
g.setAttribute("style","cursor:pointer;");
g.setAttribute("id", f.data.id);
c.parentNode.replaceChild(g, c);
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment