D3v4 World with OSP Wrapping Tiles

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
    margin: 0;
}

form {
    margin: 20px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>

var pi = Math.PI,
    tau = 2 * pi;

var width = 960,
    height = 300;

var projection = d3.geoMercator()
    .scale(1 / tau)
    .translate([0, 0]);

var path = d3.geoPath().projection(projection);

var svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height);

var raster = svg.append("g");

var scale = height;

var tiles = d3.tile()
        .wrap(true)
        .size([width, height])
        .scale(scale)
        .translate([scale / 2, scale / 2])
        ();

var image = raster
        .attr("transform", stringify(tiles.scale, tiles.translate))
        .selectAll("image")
        .data(tiles, function(d) { return d; });

image.exit().remove();

image.enter().append("image")
        .attr("xlink:href", function(d) { return "https://" + "abc"[d.y % 3] + ".tile.openstreetmap.org/" + d.z + "/" + d.x + "/" + d.y + ".png"; })
        .attr("x", function(d) { return d.tx; })
        .attr("y", function(d) { return d.ty; })
        .attr("width", 256)
        .attr("height", 256);

function stringify(scale, translate) {
    var k = scale / 256, r = scale % 1 ? Number : Math.round;
    return "translate(" + r(translate[0] * scale) + "," + r(translate[1] * scale) + ") scale(" + k + ")";
}

</script>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v2.min.js

https://unpkg.com/d3-array@1.0

https://unpkg.com/d3-tile@0.0