Chikyu Earth 地球
A line-drawn globe that turns at the Earth's own rate, and opens centred on where you are.
Country outlines in the same thin-line style as Hako Devices and Uchusen Rockets: an orthographic disc, the countries drawn on it, and the rim. One SVG, no canvas.
One minute
npm install @johnmorrisdotca/chikyu-earth
<script type="module">
import "@johnmorrisdotca/kazoku-ui/view-controls/define";
import "@johnmorrisdotca/chikyu-earth/element";
</script>
<div id="globe" tabindex="0">
<chikyu-earth size="420"></chikyu-earth>
</div>
<kazoku-view-controls id="controls" for="globe" address tilt-max="90" speed="0.004178" autoplay></kazoku-view-controls>
<script type="module">
const earth = document.querySelector("chikyu-earth");
document.getElementById("controls").addEventListener("kazoku-viewchange", (event) => {
earth.setView(event.detail, event.detail.final);
});
</script>
The globe appears, centred on the reader (the browser asks for their location; until they answer, and if they
decline, it starts on the Greenwich meridian). The shared control bar turns, tips, zooms and pans it. Auto-turn
moves at the Earth's own rate: 0.004178 degrees a second, one sidereal day — 23 h 56 min 4.0905 s — per revolution.
Centre it yourself instead:
<chikyu-earth center="139.7,35.7" style="thick" graticule></chikyu-earth>
Draw one as a string
globe() returns the SVG markup, so a server, a build step or a test can draw the same globe with no DOM:
import { globe } from "@johnmorrisdotca/chikyu-earth";
const svg = globe({ size: 320, rotation: [-139.7, -35.7], style: "line" });
The rotation is the pair d3-geo's rotate takes: [-longitude, -latitude] centres that place. The helpers in
rotate.ts do the time maths — SIDEREAL_DAY_MS, spinAt(ms), centreRotation(point) and
rotationAt(centre, now, start).
The element
| Attribute | What it does | Default |
|---|---|---|
size | Width and height of the square SVG, in pixels. | 320 |
center | "longitude,latitude" to centre on. Wins over geolocation. | the reader's location, else 0,0 |
style | line or thick. | line |
graticule | Draw a light graticule under the countries. | off |
setView(view, final = true) applies a shared controller's { yaw, tilt, zoom, panX, panY }. Every call updates
the state; pass final: false for the cheap relative transform during a gesture and final: true for the full
projection redraw. projectionView(centre, size, view) is the same mapping as a pure function: yaw is added to the
home longitude, tilt is subtracted from its latitude, zoom multiplies the scale, and pan offsets the translation.
Front is therefore the home centre; Fit is 1x with no pan.
The data
Every country the globe draws is in the package, baked in at build time — nothing is fetched at runtime.
The outlines are Natural Earth's (public domain), and each carries its English and Japanese name and ISO
alpha-2 code from kuni. COUNTRIES is the GeoJSON, and countryList() is just the names and codes:
import { countryList } from "@johnmorrisdotca/chikyu-earth";
countryList().find((c) => c.alpha2 === "JP"); // { name: "Japan", ja: "日本", alpha2: "JP" }
To refresh the outlines after a Natural Earth or kuni update, run pnpm countries and commit
src/data/countries.ts.
The rest
CONTRIBUTING.md · docs/ · NOTICE.md · CHANGELOG.md · MIT licence. Projection by d3-geo; shared view controls by kazoku-ui.