Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active February 8, 2016 23:22
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 mbostock/645758 to your computer and use it in GitHub Desktop.
Save mbostock/645758 to your computer and use it in GitHub Desktop.
Download ZIP
Image Markers
Raw
.block
license: gpl-3.0
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdn.rawgit.com/simplegeo/polymaps/v2.3.0/polymaps.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/simplegeo/polymaps/v2.3.0/lib/crimespotting/crimespotting.js"></script>
<style type="text/css">
@import url("https://cdn.rawgit.com/simplegeo/polymaps/v2.3.0/examples/example.css");
html, body {
height: 100%;
background: #E6E6E6;
}
svg {
display: block;
}
</style>
</head>
<body>
<script type="text/javascript">
var po = org.polymaps;
var map = po.map()
.container(document.body.appendChild(po.svg("svg")))
.center({lat: 37.787, lon: -122.228})
.zoomRange([10, 16])
.add(po.interact());
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()
.url(crimespotting("http://oakland.crimespotting.org"
+ "/crime-data"
+ "?count=100"
+ "&format=json"
+ "&bbox={B}"
+ "&dstart=2010-04-01"
+ "&dend=2010-04-01"))
.on("load", load)
.clip(false)
.scale("fixed")
.zoom(12));
/* Post-process the GeoJSON points and replace them with markers! */
function load(e) {
for (var i = 0; i < e.features.length; i++) {
var f = e.features[i],
c = f.element,
g = f.element = po.svg("image");
g.setAttributeNS(po.ns.xlink, "href", "http://twitter.com/phoenix/favicon.ico");
g.setAttribute("width", 16);
g.setAttribute("height", 16);
g.setAttribute("x", -8);
g.setAttribute("y", -8);
g.setAttribute("transform", c.getAttribute("transform"));
c.parentNode.replaceChild(g, c);
}
}
</script>
<span id="copy">
&copy; 2010
<a href="http://www.cloudmade.com/">CloudMade</a>,
<a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors,
<a href="http://creativecommons.org/licenses/by-sa/2.0/">CCBYSA</a>.
</span>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment