calvinmetcalf/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    60k Quadtree

60,000 point quadtree illustrated in leaflet. The usefulness of this is extremely debatable.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=1024, user-scalable=no">
    <style>
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0;}
      #map{ height: 100% }
    </style>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
<title>Quadtree madness</title>
<div id="map"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://raw.github.com/mbostock/d3/5348d911938a0d1fdf43d7c86befbd908e431204/lib/colorbrewer/colorbrewer.js"></script>
<script src="https://raw.github.com/d3/d3-plugins/master/hexbin/hexbin.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<script>
var m = L.map("map").setView([42.3164, -71.7],9);

//make the map


L.tileLayer("http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg",{minZoom:4,maxZoom:12,attribution:'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}
	).addTo(m);

//add a tileset

var randomLat = d3.random.normal(m.getCenter().lat, .2),
	randomLng = d3.random.normal(m.getCenter().lng, .4),
	points=d3.range(60000).map(function() { return {x:randomLat(), y:randomLng()}; });

//generate 60k random points
var quadtree = d3.geom.quadtree(points);
quadtree.visit(function(quad, lat1, lng1, lat2, lng2){
		L.rectangle([[lat1,lng1],[lat2,lng2]],{fillOpacity:0,weight:1,color:"#000",clickable:false}).addTo(m);
});


</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=1024, user-scalable=no">
	<style>
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0;}
	#map{ height: 100% }
	</style>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
	<title>Quadtree madness</title>
	<div id="map"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="https://raw.github.com/mbostock/d3/5348d911938a0d1fdf43d7c86befbd908e431204/lib/colorbrewer/colorbrewer.js"></script>
	<script src="https://raw.github.com/d3/d3-plugins/master/hexbin/hexbin.js"></script>
	<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
	<script>
	var m = L.map("map").setView([42.3164, -71.7],9);

	//make the map


	L.tileLayer("http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg",{minZoom:4,maxZoom:12,attribution:'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}
	).addTo(m);

	//add a tileset

	var randomLat = d3.random.normal(m.getCenter().lat, .2),
	randomLng = d3.random.normal(m.getCenter().lng, .4),
	points=d3.range(60000).map(function() { return {x:randomLat(), y:randomLng()}; });

	//generate 60k random points
	var quadtree = d3.geom.quadtree(points);
	quadtree.visit(function(quad, lat1, lng1, lat2, lng2){
	L.rectangle([[lat1,lng1],[lat2,lng2]],{fillOpacity:0,weight:1,color:"#000",clickable:false}).addTo(m);
	});


	</script>