Packages@accelint/converters
zxyToBbox
Convert map tile coordinates to geographic bounding box
Converts a slippy map tile (z, x, y) to a geographic bounding box (west, south, east, north).
Usage
import { zxyToBbox } from '@accelint/converters/zxy-to-bbox';
const bbox = zxyToBbox([8, 71, 96]);
// [west, south, east, north]Reference
function zxyToBbox(tile: ZxyTuple): BoundingBoxTuple
type ZxyTuple = [z: number, x: number, y: number]
type BoundingBoxTuple = [
west: number, // left longitude
south: number, // bottom latitude
east: number, // right longitude
north: number // top latitude
]Parameters
| Parameter | Type | Description |
|---|---|---|
tile | ZxyTuple | A tuple containing [z, x, y] tile coordinates following the slippy map tilenames convention. |
Returns
Returns a BoundingBoxTuple [west, south, east, north] representing the geographic bounds of the tile in decimal degrees.
Examples
Example: Basic tile conversion
import { zxyToBbox } from '@accelint/converters/zxy-to-bbox';
// Zoom level 8, tile (71, 96)
const bbox = zxyToBbox([8, 71, 96]);
console.log(bbox);
// [west, south, east, north] in decimal degreesExample: Web map tile integration
import { zxyToBbox } from '@accelint/converters/zxy-to-bbox';
// Get bounds for a tile at zoom 12
const zoom = 12;
const tileX = 1234;
const tileY = 5678;
const [west, south, east, north] = zxyToBbox([zoom, tileX, tileY]);
console.log(`Tile bounds:`);
console.log(` West: ${west}°`);
console.log(` South: ${south}°`);
console.log(` East: ${east}°`);
console.log(` North: ${north}°`);Example: Tile viewport calculation
import { zxyToBbox } from '@accelint/converters/zxy-to-bbox';
interface TileViewport {
zoom: number;
tileX: number;
tileY: number;
bounds: {
west: number;
south: number;
east: number;
north: number;
};
}
function getTileViewport(
zoom: number,
tileX: number,
tileY: number
): TileViewport {
const [west, south, east, north] = zxyToBbox([zoom, tileX, tileY]);
return {
zoom,
tileX,
tileY,
bounds: { west, south, east, north }
};
}
const viewport = getTileViewport(10, 512, 768);
console.log(viewport);Example: Batch tile processing
import { zxyToBbox } from '@accelint/converters/zxy-to-bbox';
// Get bounds for multiple tiles
const tiles = [
[8, 71, 96],
[8, 72, 96],
[8, 71, 97],
[8, 72, 97]
] as const;
const bounds = tiles.map(tile => ({
tile,
bbox: zxyToBbox(tile)
}));
console.log(bounds);Example: Checking if point is in tile
import { zxyToBbox } from '@accelint/converters/zxy-to-bbox';
function isPointInTile(
lon: number,
lat: number,
tile: readonly [number, number, number]
): boolean {
const [west, south, east, north] = zxyToBbox(tile);
return lon >= west && lon <= east && lat >= south && lat <= north;
}
const tile = [10, 512, 768] as const;
console.log(isPointInTile(-122.4194, 37.7749, tile));
// true if San Francisco is in this tileGood to know: This function follows the OpenStreetMap slippy map tilenames convention. Tile coordinates use a top-left origin, while geographic coordinates use bottom-left (south-west). The function handles the coordinate system conversion automatically.