Skip to content

Instantly share code, notes, and snippets.

@Laurian

Laurian/index.html

Last active August 29, 2015 14:01
Show Gist options
  • Save Laurian/5a0d6723187f4183a21f to your computer and use it in GitHub Desktop.
Save Laurian/5a0d6723187f4183a21f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<base href="http://www.jasondavies.com/maps/raster/satellite/">
<meta charset="utf-8">
<title>Drones</title>
<style>
@import url(../../maps.css);
#map {
position: relative;
margin: 0 auto;
overflow: hidden;
}
canvas {
cursor: auto;
}
.tile {
position: absolute;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="../../../d3.min.js"></script>
<script src="../../d3.geo.projection.min.js"></script>
<script src="../../topojson.min.js"></script>
<script src="../../d3.quadtiles.js"></script>
<script src="../d3.geo.raster.js"></script>
<script>
var ratio = 1,
radians = Math.PI / 180,
width = 960 * ratio,
height = 960 * ratio,
p = .5;
var projection = d3.geo.satellite()
.translate([width / 2, .65 * height / 2])
.scale(11500 * ratio)
.distance(1.1)
.rotate([-69.76455688476562, -32.80574473290688, 0])
.center([-2, 5])
.tilt(45)
.clipAngle(Math.acos(1 / 1.1) * 180 / Math.PI - 1e-2)
.clipExtent([[p, p], [width - p, height - p]]);
var layer = d3.select("#map")
.style("width", width / ratio + "px")
.style("height", height / ratio + "px")
.append("div")
.style(prefix + "transform-origin", "0 0 0")
.append("div")
.style(prefix + "transform-origin", "0 0 0")
.call(d3.geo.raster(projection)
.url("//{subdomain}.tiles.mapbox.com/v3/mapbox.natural-earth-2/{z}/{x}/{y}.png"));
//.url("//server.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer/tile/{z}/{y}/{x}"));
//http://server.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer/tile/{z}/{y}/{x}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment