Published
Edited
Oct 25, 2020
Importers
Insert cell
Insert cell
Insert cell
// Calculate lat/lon of pixel (pX, pY) on tile tileZ/tileX/tileY
function pixelOnTileToLatLon(pX, pY, tileZ, tileX, tileY) {
const L = 85.05112878;
const x = 256 * tileX + pX;
const y = 256 * tileY + pY;

const lon = 180 * (x / (1 << (tileZ + 7)) - 1);
const lat = (180/Math.PI) * Math.asin(Math.tanh(
- Math.PI / (1 << (tileZ + 7)) * y + Math.atanh(Math.sin(L * Math.PI/180))
));
return {lat: lat, lon: lon};
}
Insert cell
Insert cell
resolution = (latitude, zoom) => 156543.04 * Math.cos(latitude) / (1 << zoom)
Insert cell
Insert cell
function pixelSize(tileZ, tileX, tileY) {
// North west / South east / Center
const pNW =pixelOnTileToLatLon(0, 0, tileZ, tileX, tileY);
const pSE = pixelOnTileToLatLon(255, 255, tileZ, tileX, tileY);
const pCenter = pixelOnTileToLatLon(128, 128, tileZ, tileX, tileY);
const deg2rad = deg => deg / 180 * Math.PI;
return {
min: resolution(deg2rad(pNW.lat), tileZ),
max: resolution(deg2rad(pSE.lat), tileZ),
center: resolution(deg2rad(pCenter.lat), tileZ)
};
}
Insert cell
Insert cell
// Sample tile
tile = ({z: 13, x: 7262, y: 3232})
Insert cell
// Sample result
pixelSize(tile.z, tile.x, tile.y)
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