.block

## .block
license: gpl-3.0
height: 960

## README.md

      
        

          Raw
        
        
          
            
          
          
            
              README.md
            
          
        
      
    
  
    Using d3-tile to display raster image tiles underneath some TopoJSON vectors. Compare to the zoomable version.

Tiles copyright OpenStreetMap contributors.

forked from mbostock's block: Raster & Vector I

  

  

## d3-tile.js
// https://d3js.org/d3-tile/ Version 0.0.3. Copyright 2016 Mike Bostock.
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-array')) :
  typeof define === 'function' && define.amd ? define(['exports', 'd3-array'], factory) :
  (factory((global.d3 = global.d3 || {}),global.d3));
}(this, function (exports,d3Array) { 'use strict';

  function tile() {
    var x0 = 0,
        y0 = 0,
        x1 = 960,
        y1 = 500,
        tx = (x0 + x1) / 2,
        ty = (y0 + y1) / 2,
        scale = 256,
        zoomDelta = 0,
        wrap = true;

    function tile() {
      var z = Math.max(Math.log(scale) / Math.LN2 - 8, 0),
          z0 = Math.round(z + zoomDelta),
          j = 1 << z0,
          k = Math.pow(2, z - z0 + 8),
          x = tx - scale / 2,
          y = ty - scale / 2,
          tiles = [],
          cols = d3Array.range(
            Math.max(wrap ? -Infinity : 0, Math.floor((x0 - x) / k)),
            Math.min(Math.ceil((x1 - x) / k), wrap ? Infinity : j)
          ),
          rows = d3Array.range(
            Math.max(0, Math.floor((y0 - y) / k)),
            Math.min(Math.ceil((y1 - y) / k), j)
          );

      rows.forEach(function(y) {
        cols.forEach(function(x) {
          var d = [(x % j + j) % j, y, z0];
          d.x = x * 256;
          d.y = y * 256;
          tiles.push(d);
        });
      });

      tiles.translate = [x / k, y / k];
      tiles.scale = k;
      return tiles;
    }

    tile.size = function(_) {
      return arguments.length ? (x0 = y0 = 0, x1 = +_[0], y1 = +_[1], tile) : [x1, y1];
    };

    tile.extent = function(_) {
      return arguments.length ? (x0 = +_[0][0], y0 = +_[0][1], x1 = +_[1][0], y1 = +_[1][1], tile) : [[x0, y0], [x1, y1]];
    };

    tile.scale = function(_) {
      return arguments.length ? (scale = +_, tile) : scale;
    };

    tile.translate = function(_) {
      return arguments.length ? (tx = +_[0], ty = +_[1], tile) : [tx, ty];
    };

    tile.zoomDelta = function(_) {
      return arguments.length ? (zoomDelta = +_, tile) : zoomDelta;
    };

    tile.wrap = function(_) {
      return arguments.length ? (wrap = _, tile) : wrap;
    };

    return tile;
  }

  exports.tile = tile;

  Object.defineProperty(exports, '__esModule', { value: true });

}));

## detroit.json

      
        
            
              
              
            

          Raw
        
        
          
            
          
          
            
              detroit.json
            
          
        
      
    

  
      
  
    
      
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      Viewer requires iframe.
    
  

  

  

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

#streets {
  fill: none;
  stroke: black;
  stroke-width: 1.5px;
  stroke-linejoin: round;
}

</style>
<svg width="960" height="960"></svg>
<script src="//d3js.org/d3.v4.0.0-rc.1.min.js"></script>
<script src="d3-tile.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

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

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

var projection = d3.geoMercator()
    .scale((1 << 18) / tau)
    .translate([width / 2, height / 2])
    .center([-83.15, 42.43]);

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

d3.json("detroit.json", function(error, detroit) {
  if (error) throw error;

  var tiles = d3.tile()
      .size([width, height])
      .scale(projection.scale() * tau)
      .translate(projection([0, 0]))
      ();

  svg.selectAll("image")
      .data(tiles)
    .enter().append("image")
      .attr("xlink:href", function(d) { return "http://" + "abc"[d[1] % 3] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
      .attr("x", function(d) { return (d.x/tiles.scale + tiles.translate[0]) * tiles.scale; })
      .attr("y", function(d) { return (d.y/tiles.scale + tiles.translate[1]) * tiles.scale; })
      .attr("width", tiles.scale)
      .attr("height", tiles.scale);

  svg.append("path")
      .attr("id", "streets")
      .datum(topojson.mesh(detroit, detroit.objects.detroit))
      .attr("d", path);
});

</script>