mbostock/.block

## .block
license: gpl-3.0

## 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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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">
	© 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>