A custom hillshade tile set of the moon. Data is from a 118m hillshade, reprojected, resampled, and converted to tile form with tilemill. Tiles are placed with d3-slippy.
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> // svg var svg = d3.select("svg"); // Set up a slippy projection var slippy = d3.geoSlippy() .size(svg) .tileSet("ESRI_WorldPhysical") .xyz(false) .tileSet(function(d) { return "https://www.andrewreid.ca/moon/hillshade/" + d.z + "/" + d.x + "/" + d.y + ".png"; }) // Set zoom up var zoom = d3.zoom() .on("zoom",zoomed) .translateExtent(slippy.zoomTranslateConstrain()) .scaleExtent([1,24]); // A layer to hold the tiles: var tiles = svg.append("g"); // Call zoom and set initial zoom svg .call(zoom) .call(zoom.transform, slippy.zoomIdentity()); // Apply zoom function zoomed() { // Update projection. slippy.zoomTransform(d3.event.transform) // Update raster tiles: tiles.call(slippy.tile); }</script> https://d3js.org/d3.v4.min.js