geotheory · December 26, 2015 05:29
diff --git a/index.html b/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>
diff --git a/reference_points.geojson b/reference_points.geojson
	<!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>