Skip to content

Instantly share code, notes, and snippets.

@anandthakker
Forked from mbostock/.block
Last active January 22, 2016 04:08
Show Gist options
  • Save anandthakker/d47eeb73386fe47520bd to your computer and use it in GitHub Desktop.
Save anandthakker/d47eeb73386fe47520bd to your computer and use it in GitHub Desktop.
Clipped Map Tiles
d3.geo.tile = function() {
var size = [960, 500],
scale = 256,
translate = [size[0] / 2, size[1] / 2],
zoomDelta = 0;
function tile() {
var z = Math.max(Math.log(scale) / Math.LN2 - 8, 0),
z0 = Math.round(z + zoomDelta),
k = Math.pow(2, z - z0 + 8),
origin = [(translate[0] - scale / 2) / k, (translate[1] - scale / 2) / k],
tiles = [],
cols = d3.range(Math.max(0, Math.floor(-origin[0])), Math.max(0, Math.ceil(size[0] / k - origin[0]))),
rows = d3.range(Math.max(0, Math.floor(-origin[1])), Math.max(0, Math.ceil(size[1] / k - origin[1])));
rows.forEach(function(y) {
cols.forEach(function(x) {
tiles.push([x, y, z0]);
});
});
tiles.translate = origin;
tiles.scale = k;
return tiles;
}
tile.size = function(_) {
if (!arguments.length) return size;
size = _;
return tile;
};
tile.scale = function(_) {
if (!arguments.length) return scale;
scale = _;
return tile;
};
tile.translate = function(_) {
if (!arguments.length) return translate;
translate = _;
return tile;
};
tile.zoomDelta = function(_) {
if (!arguments.length) return zoomDelta;
zoomDelta = +_;
return tile;
};
return tile;
};
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.stroke {
fill: none;
stroke: #000;
stroke-width: .5;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="d3.geo.tile.min.js"></script>
<script>
var width = 960,
height = 500;
var projection = d3.geo.mercator()
.center([-96, 38.3])
var path = d3.geo.path()
.projection(projection);
var tile = d3.geo.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
.zoomDelta((window.devicePixelRatio || 1) - .5);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("/mbostock/raw/4090846/us.json", function(error, topology) {
if (error) throw error;
var tiles = tile();
var defs = svg.append("defs");
defs.append("path")
.attr("id", "land")
.datum(topojson.feature(topology, topology.objects.land))
.attr("d", path);
defs.append("clipPath")
.attr("id", "clip")
.append("use")
.attr("xlink:href", "#land");
svg.append("g")
.attr("clip-path", "url(#clip)")
.selectAll("image")
.data(tiles)
.enter().append("image")
.attr("xlink:href", function(d) { return "http://" + ["a", "b", "c", "d"][Math.random() * 4 | 0] + ".tiles.mapbox.com/v3/mapbox.natural-earth-2/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
.attr("width", Math.round(tiles.scale))
.attr("height", Math.round(tiles.scale))
.attr("x", function(d) { return Math.round((d[0] + tiles.translate[0]) * tiles.scale); })
.attr("y", function(d) { return Math.round((d[1] + tiles.translate[1]) * tiles.scale); });
svg.append("use")
.attr("xlink:href", "#land")
.attr("class", "stroke");
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment