geotheory/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<title>Calibration-check points using Leaflet and D3</title>

<!-- Points are London O2 Arena, Washington Monument, Cape Town Stadium and the Sydney Opera House -->

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->

<style>

#mapA
{
border:2px solid;
border-radius:0;
 height: 99.5%;
}
html, body { height: 100%; width: 100%; margin: 0; }
</style>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<!--<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>


</head>
	<body>
		<p id="mapA" height: 100%></p>

		<script>

// Function to check JSON is valid
geogjnfile = 'reference_points.geojson';
function validateJSON()
{
$.ajax({
    url: 'http://geojsonlint.com/validate',
    type: 'POST',
    data: geogjnfile,
    dataType: 'json',
    success: processSuccess,
    error: processError
});
}
function processSuccess() {console.log("JSON OK");}
function processError()   {console.log("JSON Invalid");}
validateJSON();


	var markersOnMap = [];

	var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png',
    cloudmadeAttribution = ' 2013 CloudMade';

var minimal   = L.tileLayer(cloudmadeUrl, {styleId: 22677, attribution: cloudmadeAttribution}),
    midnight  = L.tileLayer(cloudmadeUrl, {styleId: 999,   attribution: cloudmadeAttribution});

var map = L.map('mapA', {
    center: new L.LatLng(20, 0),
    zoom: 2,
    layers: [minimal]
});

	var svg = d3.select(map.getPanes().overlayPane).append("svg"),
	    g = svg.append("g").attr("class", "leaflet-zoom-hide");

	d3.json("reference_points.geojson", function(collection) {

		function project(x) {
		  var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
		  return [point.x, point.y];
		}

		var path = d3.geo.path().projection(project);

		var feature = g.selectAll("path")
		  .data(collection.features)
		  .enter().append("path");

		feature.attr("d", path);

		var bounds = d3.geo.bounds(collection),
		    bottomLeft = project(bounds[0]),
		    topRight = project(bounds[1]);

		svg .attr("width", topRight[0] - bottomLeft[0])
		    .attr("height", bottomLeft[1] - topRight[1])
		    .style("margin-left", bottomLeft[0] + "px")
		    .style("margin-top", topRight[1] + "px");

		g   .attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");

	});


var baseMaps = {
    "Minimal": minimal,
    "Night View": midnight
};

		</script>

	</body>
</html>

## reference_points.geojson
{
"type": "FeatureCollection",

"features": [
{ "type": "Feature", "id": 1, "properties": { "id": 1, "place": "London O2 Arena" }, "geometry": { "type": "Point", "coordinates": [ 0.003287853048417, 51.502985512794268 ] } }
,
{ "type": "Feature", "id": 2, "properties": { "id": 2, "place": "Washington Monument" }, "geometry": { "type": "Point", "coordinates": [ -77.035237489892879, 38.889462238186304 ] } }
,
{ "type": "Feature", "id": 3, "properties": { "id": 3, "place": "Cape Town Stadium" }, "geometry": { "type": "Point", "coordinates": [ 18.411189080519751, -33.903658329414156 ] } }
,
{ "type": "Feature", "id": 4, "properties": { "id": 4, "place": "Sydney Opera House" }, "geometry": { "type": "Point", "coordinates": [ 151.21495788612214, -33.856925235368749 ] } }

]
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Calibration-check points using Leaflet and D3</title>

	<!-- Points are London O2 Arena, Washington Monument, Cape Town Stadium and the Sydney Opera House -->

	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
	<![endif]-->

	<style>

	#mapA
	{
	border:2px solid;
	border-radius:0;
	height: 99.5%;
	}
	html, body { height: 100%; width: 100%; margin: 0; }
	</style>

	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
	<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
	<!--<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
	<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>



	</head>
	<body>
	<p id="mapA" height: 100%></p>

	<script>

	// Function to check JSON is valid
	geogjnfile = 'reference_points.geojson';
	function validateJSON()
	{
	$.ajax({
	url: 'http://geojsonlint.com/validate',
	type: 'POST',
	data: geogjnfile,
	dataType: 'json',
	success: processSuccess,
	error: processError
	});
	}
	function processSuccess() {console.log("JSON OK");}
	function processError() {console.log("JSON Invalid");}
	validateJSON();


	var markersOnMap = [];

	var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png',
	cloudmadeAttribution = ' 2013 CloudMade';

	var minimal = L.tileLayer(cloudmadeUrl, {styleId: 22677, attribution: cloudmadeAttribution}),
	midnight = L.tileLayer(cloudmadeUrl, {styleId: 999, attribution: cloudmadeAttribution});

	var map = L.map('mapA', {
	center: new L.LatLng(20, 0),
	zoom: 2,
	layers: [minimal]
	});

	var svg = d3.select(map.getPanes().overlayPane).append("svg"),
	g = svg.append("g").attr("class", "leaflet-zoom-hide");

	d3.json("reference_points.geojson", function(collection) {

	function project(x) {
	var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
	return [point.x, point.y];
	}

	var path = d3.geo.path().projection(project);

	var feature = g.selectAll("path")
	.data(collection.features)
	.enter().append("path");

	feature.attr("d", path);

	var bounds = d3.geo.bounds(collection),
	bottomLeft = project(bounds[0]),
	topRight = project(bounds[1]);

	svg .attr("width", topRight[0] - bottomLeft[0])
	.attr("height", bottomLeft[1] - topRight[1])
	.style("margin-left", bottomLeft[0] + "px")
	.style("margin-top", topRight[1] + "px");

	g .attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");

	});


	var baseMaps = {
	"Minimal": minimal,
	"Night View": midnight
	};

	</script>

	</body>
	</html>
	{
	"type": "FeatureCollection",

	"features": [
	{ "type": "Feature", "id": 1, "properties": { "id": 1, "place": "London O2 Arena" }, "geometry": { "type": "Point", "coordinates": [ 0.003287853048417, 51.502985512794268 ] } }
	,
	{ "type": "Feature", "id": 2, "properties": { "id": 2, "place": "Washington Monument" }, "geometry": { "type": "Point", "coordinates": [ -77.035237489892879, 38.889462238186304 ] } }
	,
	{ "type": "Feature", "id": 3, "properties": { "id": 3, "place": "Cape Town Stadium" }, "geometry": { "type": "Point", "coordinates": [ 18.411189080519751, -33.903658329414156 ] } }
	,
	{ "type": "Feature", "id": 4, "properties": { "id": 4, "place": "Sydney Opera House" }, "geometry": { "type": "Point", "coordinates": [ 151.21495788612214, -33.856925235368749 ] } }

	]
	}