Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Calibration-check points using Leaflet and D3

View index.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>
View index.html
Octocat spinner 128
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
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.