Using d3-tile to display raster image tiles underneath some TopoJSON vectors, and d3-zoom for pan & zoom. This version reprojects the geometry on interaction; compare to updating the transform. See another variation of this example with points, showing the U.S. State Capitals; also see the static version.
Tiles copyright OpenStreetMap contributors.
forked from mbostock's block: Raster & Vector II (wrap update)
| // 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 }); | |
| })); |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| margin: 0; | |
| } | |
| path { | |
| fill: none; | |
| stroke: red; | |
| stroke-linejoin: round; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <svg></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 width = Math.max(960, window.innerWidth), | |
| height = Math.max(500, window.innerHeight); | |
| // Initialize the projection to fit the world in a 1×1 square centered at the origin. | |
| var projection = d3.geoMercator() | |
| .scale(1 / tau) | |
| .translate([0, 0]); | |
| var path = d3.geoPath() | |
| .projection(projection); | |
| var tile = d3.tile() | |
| .size([width, height]); | |
| var zoom = d3.zoom() | |
| .scaleExtent([1 << 11, 1 << 14]) | |
| .on("zoom", zoomed); | |
| var svg = d3.select("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var raster = svg.append("g"); | |
| var vector = svg.append("path"); | |
| d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json", function(error, us) { | |
| if (error) throw error; | |
| vector | |
| .datum(topojson.mesh(us, us.objects.states)); | |
| // Compute the projected initial center. | |
| var center = projection([-98.5, 39.5]); | |
| // Apply a zoom transform equivalent to projection.{scale,translate,center}. | |
| svg | |
| .call(zoom) | |
| .call(zoom.transform, d3.zoomIdentity | |
| .translate(width / 2, height / 2) | |
| .scale(1 << 12) | |
| .translate(-center[0], -center[1])); | |
| }); | |
| function zoomed() { | |
| var transform = d3.event.transform; | |
| var tiles = tile | |
| .scale(transform.k) | |
| .translate([transform.x, transform.y]) | |
| (); | |
| projection | |
| .scale(transform.k / tau) | |
| .translate([transform.x, transform.y]); | |
| vector | |
| .attr("d", path); | |
| 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[1] % 3] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; }) | |
| .attr("x", function(d) { return d.x; }) | |
| .attr("y", function(d) { return d.y; }) | |
| .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> |
