Skip to content

Instantly share code, notes, and snippets.

@tmcw

tmcw/index.html

Created Oct 24, 2012
Embed
What would you like to do?
d3 tiles
<!DOCTYPE html>
<style>
path {
fill: #E5F5F9;
opacity:0.4;
stroke: #2CA25F;
stroke-width: 0.5;
}
#axes {
stroke: #BDBDBD;
stroke-width: 0.5;
}
</style>
<body>
<script src="http://d3js.org/d3.v2.js"></script>
<script>
var width = 960,
height = 500,
projection = d3.geo.mercator().scale(1024).translate([512, 256]),
path = d3.geo.path().projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.call(d3.behavior.zoom()
.translate(projection.translate())
.scale(projection.scale())
.on("zoom", redraw));
var axes = svg.append("g").attr("id", "axes"),
xAxis = axes.append("line").attr("y2", height),
yAxis = axes.append("line").attr("x2", width);
var tileg = svg.append('g').attr('id', 'tiles');
function tileUrl(d) {
return 'http://a.tiles.mapbox.com/v3/tmcw.map-hehqnmda/' + d.join('/') + '.png';
}
function redraw() {
if (d3.event) {
projection
.translate(d3.event.translate)
.scale(d3.event.scale);
}
var t = projection.translate(),
s = projection.scale(),
z = Math.max(Math.log(s) / Math.log(2) - 8, 0);
rz = Math.floor(z),
ts = 256 * Math.pow(2, z - rz);
// This is the 0, 0 px of the projection
var tile_origin = [s / 2 - t[0], s / 2 - t[1]];
var tiles = [];
var cols = d3.range(Math.max(0, Math.floor((tile_origin[0] - width) / ts)),
Math.max(0, Math.ceil((tile_origin[0] + width) / ts)));
var rows = d3.range(Math.max(0, Math.floor((tile_origin[1] - height) / ts)),
Math.max(0, Math.ceil((tile_origin[1] + height) / ts)));
cols.forEach(function(x) {
rows.forEach(function(y) {
tiles.push([Math.floor(z), x, y]);
});
});
var tiles = tileg.selectAll('image.tile')
.data(tiles, function(d) { return d.join(',') });
tiles.exit()
.transition()
.duration(250)
.style("opacity", 0.0)
.remove();
tiles.enter().append('image')
.attr('class', 'tile')
.attr('xlink:href', tileUrl);
tiles.attr({ width: ts, height: ts })
.attr('transform', function(d) {
return 'translate(' + [(d[1] * ts) - tile_origin[0], (d[2] * ts) - tile_origin[1]] + ')';
})
xAxis.attr("x1", t[0]).attr("x2", t[0]);
yAxis.attr("y1", t[1]).attr("y2", t[1]);
}
redraw();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment