Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Embed URL


Subversion checkout URL

You can clone with
Download ZIP
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
Something went wrong with that request. Please try again.