I want to help more people experience the excitement of exploring Earth's subsurface
function getTileMetric(tiles) {
// Store coordinates of the corners of the map
let [x1, y1, zoom] = d3.tileWrap(tiles[0]);
let [x2, y2] = d3.tileWrap(tiles[tiles.length - 1]);
// If straddling the antimeridian, force positive width
let nTiles = 2 ** zoom;
if (x2 < x1) x2 += nTiles;
return function(tile) {
let dz = zoom - tile.z;
// Convert tile x, y to the equivalent values at the MAP zoom level
let zoomFac = 2 ** dz;
let tb = Object({
x1: tile.x * zoomFac,
x2: (tile.x + 1) * zoomFac,
y1: tile.y * zoomFac,
y2: (tile.y + 1) * zoomFac
});
// Compute horizontal distances. Be careful with the antimeridian
let dx = Math.min(
// Test for non-intersection with tile in raw position
Math.max(x1 - tb.x2, tb.x1 - x2),
// Re-test with tile shifted across antimeridian
Math.max(x1 - (tb.x2 + nTiles), tb.x1 + nTiles - x2)
);
let dy = Math.max(y1 - tb.y2, tb.y1 - y2);
return Object({ dx, dy, dz });
};
}
hdist = getTileMetric(tileset)
function metric(tile) {
let dist = hdist(tile);
return Math.max(dist.dx, dist.dy) - 1.0 + 1.0 / 2 ** dist.dz;
}
numCachedTiles = cache.trim(metric, 2)
cache = tileRack.initRasterCache(cacheTileSize, (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;
}
tiler = d3
.tile()
.tileSize(tileSource.cssTileSize())
.size([width, height])
.clampX(false) // Allow panning across longitude 180 degrees
tileset = tiler(transform)
projection = d3
.geoMercator()
.center([-122.4183, 37.7750])
.scale(Math.pow(2, 21) / (2 * Math.PI))
.translate([width / 2, height / 2])
mutable transform = d3.zoomIdentity
.translate(projection([0, 0])[0], projection([0, 0])[1])
.scale(projection.scale() * 2 * Math.PI)
zoom = d3
.zoom()
.scaleExtent([1 << 10, 1 << 26])
.extent([[0, 0], [width, height]])
.translateExtent([[-Infinity, -0.5], [Infinity, 0.5]])
.on("zoom", () => {
mutable transform = d3.event.transform;
})
d3
.select(mapContext.canvas)
.call(zoom)
.call(zoom.transform, mutable transform)
animate = {
while (true) yield drawTiles(mapContext);
}
//upate = {
// drawTiles(mapContext, tileset);
//}
//factory.element.addEventListener(
// "tileLoaded",
// () => drawTiles(mapContext, tileset),
// false
//)
import { drawTileBox } from "@jjhembd/zoomable-map-with-tile-cache"
function rescalePixels(cssTileSize) {
return devicePixelRatio > 1 ? 2 * cssTileSize : cssTileSize;
}
tileRack = import("tile-rack@0.2.0")
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.
