Chikyu Earth documentation
Chikyu Earth 地球 — A line-drawn globe for the web
A line-drawn globe of the world's countries that turns at the Earth's own rate, with an optional realistic Earth from space and markers for any place.
Install
npm install @johnmorrisdotca/chikyu-earthStart here
Entry points
| Import it | What it is |
|---|---|
@johnmorrisdotca/The <chikyu-earth> element · 1 exports | |
@johnmorrisdotca/The realistic Earth's pure parts · 18 exports | |
@johnmorrisdotca/The <chikyu-earth-realistic> element · 5 exports | |
@johnmorrisdotca/Markers on the globe · 19 exports | |
@johnmorrisdotca/The Sun, Moon and planets: pure parts · 29 exports | |
@johnmorrisdotca/The <chikyu-space> element · 11 exports | |
@johnmorrisdotca/Satellites: orbital elements in, positions out · 9 exports | |
@johnmorrisdotca/The globe as an SVG string · 23 exports |
Guides
How-to
- In a plain HTML page, from a CDNAdd the globe to any page with one script tag from jsDelivr or unpkg, and the realistic Earth the same way.
- With a bundler: Vite, webpack and ES modulesInstall the package and import the element in a Vite or webpack project, or in any ES module setup.
- In React, Vue, Svelte and AngularUse the globe in React, Vue, Svelte and Angular, with the import that keeps a server render working.
- Embed it with an iframePut the globe in any page with one iframe and no script, and choose what it shows in the address.
- TypeScript, Node and serversUse the package's types, draw the globe as an SVG string on a server, and render pages that include it.
- The realistic Earth and markersShow the Earth from space and mark any place on either globe, with the budgets that keep both light.
- Satellites on the globeShow the ISS, the space stations or thousands of Starlink satellites on the space view from orbital elements your page supplies, with the rules for getting them and the budget that keeps it light.
- Riding along with a satellite or a planetPut the camera on the ISS, a Starlink satellite, the Moon or a planet and look at the Earth from there, with the Earth turning and sliding beneath as it goes, under a budget that keeps it light.
- The real Sun, planets, Pluto and moonsDraw the Sun, the planets, Pluto and their moons in the space view with wakusei-planets, in a realistic or a painted look, with one WebGL context for the page.
Explanation
- How it stays lightWhat the globe draws, when, and the limits it keeps so a page with it never works the processor for nothing.
- ArchitectureHow the flat globe, the Earth from space, the markers and the space view fit together, which parts are pure, and which are optional.