curran/.block

## .block
license: MIT
height: 500
scrolling: no
border: yes

## README.md

      
    Raw
  

              README.md
            
          
    Very basic world map using d3-tile demonstrating the tile.wrap method.
Tiles courtesy of OpenStreetMap
forked from linusmarco's block: d3-tile wrapping

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

body {
    margin: 0;
}

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

</style>

<form>
    <input type="checkbox" name="wrap" id="wrap">
    <label for="wrap">Wrap tiles</label>
</form>

<svg></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/d3-array@1.0"></script>
<script src="https://unpkg.com/d3-tile@0.0"></script>
<script>

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;

loadTiles(this.checked);

d3.select("input#wrap")
    .on("change", function() { loadTiles(this.checked); });

function loadTiles(wrap) {
    var tiles = d3.tile()
        .wrap(wrap)
        .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 "http://" + "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>

## thumbnail.png

      
    Raw
  

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

	body {
	margin: 0;
	}

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

	</style>

	<form>
	<input type="checkbox" name="wrap" id="wrap">
	<label for="wrap">Wrap tiles</label>
	</form>

	<svg></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://unpkg.com/d3-array@1.0"></script>
	<script src="https://unpkg.com/d3-tile@0.0"></script>
	<script>

	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;

	loadTiles(this.checked);

	d3.select("input#wrap")
	.on("change", function() { loadTiles(this.checked); });

	function loadTiles(wrap) {
	var tiles = d3.tile()
	.wrap(wrap)
	.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 "http://" + "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>