Reference · Framing, geometry and quiz tools
localCanvasFromBoxfunction
The local canvas that shows the ground a window on a world or country map shows, so a page can hand over from the
map to the city at the moment it has zoomed past what the map knows, with nothing jumping: at its own 1× the local map
covers the same ground as the window did. null where mapBoxMetres is.
Import it
import { localCanvasFromBox } from "@johnmorrisdotca/chizu";Definition
function localCanvasFromBox(map: Pick<ChizuMap, "projection">, box: MapBox): Required<ChizuLocalCanvas> | nullParameters
| Name | Type | Description |
|---|---|---|
map | Pick<ChizuMap, "projection"> | A world or country map. |
box | MapBox | A window on that map. |
Returns
Required<ChizuLocalCanvas> | null
A local canvas covering the window, or null when the map cannot be read back or the window is near a pole.
Examples
import WORLD from "@johnmorrisdotca/chizu/world";
import { localCanvasFromBox, projectPoint } from "@johnmorrisdotca/chizu";
const [x, y] = projectPoint(WORLD, 139.7671, 35.6812)!;
const canvas = localCanvasFromBox(WORLD, { x: x - 1, y: y - 1, width: 2, height: 2 })!;
console.log(canvas.centre.map((value) => value.toFixed(2)).join(", "), Math.round(canvas.widthMetres / 10_000) * 10, "km");
// 139.77, 35.68 70 km139.77, 35.68 70 kmWhat it prints (run when this page was built)