Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Calibration-check points using Leaflet and D3
<!DOCTYPE html>
<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="" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="" />
border:2px solid;
height: 99.5%;
html, body { height: 100%; width: 100%; margin: 0; }
<link rel="stylesheet" href="" />
<script src=""></script>
<script src="" charset="utf-8"></script>
<!--<script src="" charset="utf-8"></script>-->
<script src=""></script>
<p id="mapA" height: 100%></p>
// Function to check JSON is valid
geogjnfile = 'reference_points.geojson';
function validateJSON()
url: '',
type: 'POST',
data: geogjnfile,
dataType: 'json',
success: processSuccess,
error: processError
function processSuccess() {console.log("JSON OK");}
function processError() {console.log("JSON Invalid");}
var markersOnMap = [];
var cloudmadeUrl = 'http://{s}{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 ='mapA', {
center: new L.LatLng(20, 0),
zoom: 2,
layers: [minimal]
var svg ="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")
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
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment