Reference · The realistic Earth's pure parts
layoutCitiesfunction
Lays the names out for one draw: the cities in sight, the most important first, each named beside its dot (right, then left, above, below) where no earlier name is in the way; a city with no room is left out.
Import it
import { layoutCities } from "@johnmorrisdotca/chikyu-earth/realistic";Definition
function layoutCities(cities: readonly NamedCity[], frame: CityFrame, lang: "en" | "ja", options: CityLayoutOptions): CityName[]Parameters
| Name | Type | Description |
|---|---|---|
cities | readonly NamedCity[] | The cities of the tiers shown, the highest rank first (see |
frame | CityFrame | Where the Earth is on the screen. |
lang | "en" | "ja" | The page's language, |
options | CityLayoutOptions | The most names, the text size and the dot's radius. |
Returns
CityName[]
The names to show, the most important first.
Examples
import { layoutCities } from "@johnmorrisdotca/chikyu-earth/realistic";
const frame = { width: 300, height: 300, radius: 120, project: (lon: number, lat: number, out: { x: number; y: number }) => { out.x = 150 + (lon - 133) * 6; out.y = 150 - (lat - 36) * 6; return 1; } };
const tokyo = { id: "Q1490", name: { en: "Tokyo", ja: "東京都" }, lat: 35.7, lon: 139.7, population: 37_000_000, capital: "national" as const };
const seoul = { id: "Q8684", name: { en: "Seoul" }, lat: 37.6, lon: 127, population: 10_000_000, capital: "national" as const };
console.log(layoutCities([tokyo, seoul], frame, "en", { max: 10, size: 12, dot: 3 }).map((one) => one.text));[ 'Tokyo', 'Seoul' ]What it prints (run when this page was built)