mappo demos

The map is true right now, and it needs no data to be

The sun's position is fifteen lines of astronomy from Date.now() — no API, no key, nothing to go stale. Everything else is mappo: the night is a polygon plotted through projectNormalized(), and the city markers are your own DOM, positioned by data-lat/data-lon, told only whether the sun is up where they stand.

// where the sun is overhead, from the clock alone
const { dec, lon } = subsolarPoint(new Date());

// night is the cap of angular radius 90 + h about the antisolar point — ask
// it which latitudes it covers at each meridian, then close the polygon
const [ lo, hi ] = capSpan(lon, -dec, sunLon + 180, Math.cos((90 + h) * RAD));

// and each label only needs to know whether its own sky is dark
label.classList.toggle("is-night", solarElevation(lat, lon, dec, sunLon) < 0);

Projections →

The same Earth as the straight-lined equirectangular map and as Equal Earth, where areas are true and the corners are not part of the world. A Pacific-centred map with the seam moved and the coastlines re-cut. The lunar south pole in polar stereographic with the Artemis regions labelled, the Arctic as one ocean, Mars from above its north pole. And a sinusoidal projection written in eight lines, handed in as a plain object.

<mappo-moon projection="stereographic-south" lat-max="-80" figure="solid" figure-source="vector" graticule>
  <a data-lat="-89.7" data-lon="129.2">Shackleton</a>   <!-- the pole is the centre -->
</mappo-moon>

Region: Earth →

The see-through globe from cloudflare.com's home page, to the pixel where mappo can reach it: fourteen thousand tiles lying on the surface of a Fibonacci lattice, a perspective camera 2.4 radii out, fog that lets the far side show through, the pins, the captions and the arcs — with the original's exact points, copy and kinematics, and mappo's own coastline under it.

<mappo-world mode="globe" cols="396" lat-min="-90" lat-max="90"
  distribution="uniform" dot-shape="tile" dot-size="0.38"
  distance="2.37" fog="-0.67 1.01" graticule meridians="24" parallels="23"></mappo-world>

Live Globe →

The globe a product with users everywhere puts on its front page: ~12,000 dots on a lit indigo sphere under a blue rim, a blue spike wherever someone is sending right now, rising and sinking as the moment passes, a pink arc for every message on its way, drawing in, holding, erasing and landing with a ring, the hover card, the pause toggle and an opening view turned toward your part of the world. The feed is synthetic: two hundred and sixty messages between a hundred and sixty cities, weighted the way people are, so Asia and Africa carry most of it. The lights are three CSS gradients; the lines are mappo/links on a second, empty globe over them, so they stay unlit.

import { links } from "mappo/links";
const arcs = links(sky.map, { color: "#f46bbe", width: 1.75, blend: "lighter" });
const arc = arcs.add({ points: bezier, range: [ 0, 0 ], data: message });
arc.range = [ 0, drawn / total ];        // the original's 600 index units a second
const hit = arcs.at(pointerEvent);       // the message under the pointer

Starlink, right now →

Every satellite in the constellation and the ISS, where they actually are this second, on a full-screen globe you can spin — then the same positions on the flat map, where the 53° shell draws its own turnaround lines. The orbital elements come from CelesTrak and the positions from an SGP4 propagator running in the page: no API key, no tracking service, nothing to go stale but the elements themselves.

// mappo hands back the projection it just drew with, so your own
// canvas registers to the pixel — including things above the surface
const p = map.locate(lat, lon, 1 + altitudeKm / 6371);
if (p.front) ctx.fillRect(p.x, p.y, 2, 2);   // .depth fades it with the limb

Where the Earth is →

Kepler's equation solved in the page, the orbit drawn to scale with the Sun at its focus, and the planet shown as the Sun sees it — so the edge of the disc is the terminator and the pole leaning toward you is the season. Scrub a year either way and watch the Earth run faster in January than in July, because it does.

// aim the globe at the subsolar point and the disc IS the daylit half
earth.setAttribute("focus", `${dec},${subLon}`);
earth.setAttribute("tilt", dec);   // focus is live now, so this re-aims

Other worlds →

Lunar maria and Martian lowlands drawn by the very same flat and globe renderers, from opt-in body packs that ship apart from the bundle. Landing sites from each body's own gazetteer, and all three worlds at their true relative diameters.

The carrier only translates

That is the whole trick: mappo spins the planet on its own axis, and the container walks an ellipse. Because the container never counter-rotates, the tilt keeps pointing the same way all year — which is what gives a planet seasons.

<div class="carrier">
  <mappo-world mode="globe" tilt="23.44" rotate-speed="45"
    figure="solid outline" figure-source="vector"></mappo-world>
</div>

const phase = (t % YEAR_MS) / YEAR_MS, a = phase * Math.PI * 2;
carrier.style.transform =
  `translate3d(${Math.cos(a)*330}px, ${Math.sin(a)*125}px, 0)`;