Born out of the odd frustration at working with tile units with d3.tile and geographic units, where I often end up duplicating coordinate systems (example), despite not really needing to actually know what the tile units are.
This is a quick experiment, but I hope to work on it moving forwards.
In my mind this experimental module is easier to work with when combined with geographic data than d3-tile, but I might not be familiar enough with d3-tile to use it effectively.
This block does not use d3.tile, though it was a very useful reference.
This block uses ESRI's World Ocean Basemap Tiles (c) Esri - Source: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri.
Basic Overview
Essentially d3.slippy() holds a d3.geoMercator() projection and based on the projection's property, looks up which tiles should be displayed given a certain pixel extent of the svg.
See github for additional information.
xxxxxxxxxx<meta charset="utf-8"><svg width="960" height="500"></svg><script src="https://d3js.org/d3.v4.min.js"></script><script src="d3-slippy.js"></script> <script src="https://d3js.org/topojson.v1.min.js"></script><script>var svg = d3.select("svg");// Set up a slippy projectionvar slippy = d3.geoSlippy() .tileSet("ESRI_WorldPhysical") .size(svg) .center([0,50]) .scale(1000) .rotate(120) .wrap(true); // Set up a group to hold the tilesvar raster = svg.append("g"); // Set zoom propertiesvar zoom = d3.zoom() .on("zoom",zoomed) .translateExtent(slippy.zoomTranslateExtent()); // Call zoom and set initial zoomsvg .call(zoom) .call(zoom.transform, slippy.zoomIdentity());// Apply zoomfunction zoomed() { // Update projection. slippy.zoomTransform(d3.event.transform) // Update raster tiles: raster.call(slippy.tile);}</script> https://d3js.org/d3.v4.min.js
https://d3js.org/topojson.v1.min.js