I want to help more people experience the excitement of exploring Earth's subsurface
factory = buildFactory((z, x, y) => tileSource.url(x, y, z))
mutable cacheTileSize = tileSource.realTileSize();
resolutionString = {
let mqString = `(resolution: ${devicePixelRatio}dppx)`;
matchMedia(mqString).addEventListener("change", () => {
mutable cacheTileSize = tileSource.realTileSize();
});
return mqString;
}
cache = tileRack.initCache(cacheTileSize, factory)
tile = d3
.tile()
.tileSize(tileSource.cssTileSize())
.size([width, height])
.clampX(false) // Allow panning across longitude 180 degrees
tileset = tile(transform)
mutable transform = d3.zoomIdentity
.translate(width / 2, height / 2) // Center at the middle of the Canvas
.scale(2 ** 21) // Start at zoom level 13, plus 2 ** 8 tile size
.translate(...projection(lonLatSF).map((c) => -c)) // Center on San Francisco
projection = d3
.geoMercator()
.scale(1 / (2 * Math.PI))
.translate([0, 0])
lonLatSF = [-122.4183, 37.775]
transform.apply(projection(lonLatSF))
zoom = d3
.zoom()
.scaleExtent([1 << 8, 1 << 26])
.extent([[0, 0], [width, height]])
.on("zoom", () => {
mutable transform = d3.event.transform;
})
d3
.select(mapContext.canvas)
.call(zoom)
.call(zoom.transform, mutable transform)
upate = {
drawTiles(mapContext, tileset);
}
factory.element.addEventListener(
"tileLoaded",
() => drawTiles(mapContext, tileset),
false
)
function drawTiles(ctx, tiles) {
ctx.clearRect(0, 0, width, height);
let scale = tiles.scale;
// Edit translation: make sure the first tile starts at an integer pixel coordinate
const tx = Math.round(tiles.translate[0] * scale) / scale;
const ty = Math.round(tiles.translate[1] * scale) / scale;
// If we are on an integer zoom level, all tiles will now be pixel-aligned
for (const [x, y, z] of tiles) {
const [xw, yw, zw] = d3.tileWrap([x, y, z]);
let tileBox = cache.retrieve([zw, xw, yw]);
if (!tileBox) continue;
drawTileBox(ctx, tileBox, x + tx, y + ty, scale);
}
}
function drawTileBox(ctx, box, x, y, scale) {
ctx.drawImage(
box.tile.img,
box.sx,
box.sy,
box.sw,
box.sw,
x * scale,
y * scale,
scale,
scale
);
}
function rescalePixels(cssTileSize) {
return devicePixelRatio > 1 ? 2 * cssTileSize : cssTileSize;
}
tileRack = import("tile-rack@0.0.2")
d3 = require("d3@5", "d3-geo@1", "d3-tile@1")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
