Build with a clearer
data contract.

Start with the working sample.

The bundled satellite-demo-data.json file contains synthetic orbit examples, imagery metadata and a coordinate example. It is a static fixture you can open directly, inspect in the sample explorer or request from this site when it is served over HTTP.

// Run from a page served alongside the JSON file.
const response = await fetch('satellite-demo-data.json');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const dataset = await response.json();

console.log(dataset.demonstrationOnly); // true
console.table(dataset.orbits.map(({ name, altitudeKm }) => ({
  name,
  altitudeKm
})));

The fixture does not behave like an authenticated remote service. It has no paging, network quota, provider agreement or current ephemeris. Its purpose is to make the shape of a data contract visible. A local file opened with file:// may restrict fetch requests; the included explorer uses a bundled script object and still works without fetching JSON.

Give every number a contract.

Coordinate conversion has a specific scope.

The coordinate converter accepts WGS84 latitude, longitude and ellipsoidal height. It returns degrees/minutes/seconds, an Earth-centered Earth-fixed position in meters and a GeoJSON Point. The GeoJSON position uses longitude before latitude, following the GeoJSON specification.

{
  "type": "Point",
  "coordinates": [-122.4194, 37.7749, 0]
}

This is a formatting and reference-model demonstration, not a universal datum transformation service. A projected map coordinate, a mean-sea-level height and a different terrestrial datum require additional context. Read the geospatial guide before combining unfamiliar datasets.

From an orbital model to a screen.

The local explorer calculates a circular orbit from a selected altitude, inclination and elapsed time. It uses a fixed gravitational parameter, a spherical Earth radius and uniform Earth rotation. These assumptions make the relationships easy to inspect. They do not reproduce a real satellite’s complete state or predict observing passes.

A real tracking pipeline needs an appropriate source and propagation method. CelesTrak’s GP format documentation is one starting point for understanding available element formats. Our satellite tracker guide explains the distinction between source elements, propagated positions and a display.

CSS, SVG and Three.js each have a role.

The included decorative globes use CSS and SVG. The orbit explorer draws its educational 3D view with the browser’s 2D canvas. A Three.js implementation is a separate rendering choice; the Three.js globe guide explains how scene objects, camera settings and coordinate transformations work together.

For example, Three.js SphereGeometry supplies sphere geometry, which can be combined with a material to create a mesh. A sphere alone does not decide where a satellite belongs. Keep your application’s coordinate conversion independent of the graphics layer, then test known positions and the model’s units before refining the camera or materials.

Make failures understandable.

Production interfaces should distinguish a loading request, an empty result, a stale cached position and an unavailable provider. Avoid leaving the last attractive globe on screen without explaining that its data stopped updating. A useful status gives the user a next step, such as changing a filter, checking an input or retrying later.

For mobile work, continue with the iOS architecture guide and Android architecture guide. They focus on permissions, lifecycle and user intent. For a quick visual experiment, open globe studio.