The avatar for @jjhembd
Jeshurun Hembd
I want to help more people experience the excitement of exploring Earth's subsurface
Published
Edited
Oct 14, 2019
Importers
12 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
tileURL = (z, x, y) => endpoint.replace(/{z}/, z).replace(/{y}/, y).replace(/{x}/, x);
Insert cell
Insert cell
Insert cell
function buildFactory(getURL) {
// Input getURL is a function that returns a tile URL for the given x, y, z indices

// Create a DOM element that will emit events when tiles finish loading
const tattle = DOM.element("div");

function create(z, x, y, loadCallBack) {
var tileHref = getURL(z, x, y);
const img = loadImage(tileHref, checkData);
const tale = new Event("tileLoaded");

const tile = {
z,
x,
y,
img,
cancel,
canceled: false,
rendered: false
};

function checkData(err) {
if (err) return console.log(err);
tile.rendered = true;
tattle.dispatchEvent(tale);
}

function cancel() {
img.src = "";
tile.canceled = true;
}

return tile;
}
return { create, element: tattle };
}
Insert cell
factory = buildFactory(tileURL)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
cache = tileRack.initCache(tileSize, factory);
Insert cell
Insert cell
Insert cell
mapParams = Object({
getTile: cache.retrieve,
width: tileSize * Math.ceil(width / tileSize),
height: tileSize * Math.ceil(height / tileSize),
maxZoom: 20,
tileSize: 256,
center: [0.5, 0.375],
zoom: 2
})
Insert cell
Insert cell
map = tileFrame.init(mapParams)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
factory.element.addEventListener("tileLoaded", map.drawTiles, false)
Insert cell
Insert cell
Insert cell
Insert cell
tileFrame = import("tile-frame@1.0.0")
Insert cell
tileFrame_old = import("tile-frame@0.0.1")
Insert cell
tileRack = import("tile-rack@0.0.2");
Insert cell
Insert cell

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.
Learn more