Published
Edited
Jan 28, 2019
1 star
function getTilesEnclosingCircle(circle) {
const padding = 20;
// Calculate boundary rectangle of the circle in lat/lon coordinates
const northWest = offsetLatLon(circle, { x: -circle.radius, y: circle.radius });
const southEast = offsetLatLon(circle, { x: circle.radius, y: -circle.radius });
// Go through all zoom levels from smallest to biggest tile size
for (let z = 22; z >= 0; z -= 1) {
const northWestTile = latlon2tile(northWest, z);
const southEastTile = latlon2tile(southEast, z);
// Find if the vertical or horizontal offsets of north/west and south/east tile are
// right next to each other on one axis
if (northWestTile.x === southEastTile.x - 1 || northWestTile.y === southEastTile.y - 1) {
// We have the right zoom level.
// If the circle doesn't fit in 4 tiles, extend them to 6
const extendX = northWestTile.x === southEastTile.x - 2;
const extendY = northWestTile.y === southEastTile.y - 2;
return [
offsetTile(northWestTile, { x: 0, y: 0 }),
offsetTile(northWestTile, { x: 1, y: 0 }),
extendX && offsetTile(northWestTile, { x: 2, y: 0 }),
offsetTile(northWestTile, { x: 0, y: 1 }),
offsetTile(northWestTile, { x: 1, y: 1 }),
extendX && offsetTile(northWestTile, { x: 2, y: 1 }),
extendY && offsetTile(northWestTile, { x: 0, y: 2 }),
extendY && offsetTile(northWestTile, { x: 1, y: 2 }),
].filter(Boolean);
}
}
return null;
}
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.
