public
Last active

Calibration-check points using Leaflet and D3

  • Download Gist
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
<!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
Octocat spinner 128
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.