Globe

Places and their state, where the picture should be a thing you can hold: an infrastructure map of regions and their health, a fleet or an edge network, a status board of sites, energy and IoT assets by country, an incident view that turns to the region that went red. Every marker is a real button (Tab walks the ones on the near side, Enter selects), the ball is a slider for longitude with its value spoken as "30 degrees east, facing Frankfurt", and select, turn and settle events report what the visitor did.

Copy the globe folder from its package next to your page, link its stylesheet and construct it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="globe/globe.css">
<div id="globe" style="width: min(92vw, 640px); height: min(86vh, 700px); display: grid"></div>

<script type="module">
  import Globe from './globe/globe.mjs';

  const globe = new Globe(document.getElementById('globe'), {
    markers: [{"id":"frankfurt","lat":50.11,"lon":8.680000000000064,"label":"Frankfurt","state":"ok","detail":"eu-central-1, 38 ms"},{"id":"virginia","lat":38.95,"lon":-77.44999999999999,"label":"Virginia","state":"ok","detail":"us-east-1, 21 ms"},{"id":"sao-paulo","lat":-23.55,"lon":-46.629999999999995,"label":"São Paulo","state":"ok","detail":"sa-east-1, 96 ms"},{"id":"johannesburg","lat":-26.2,"lon":28.049999999999955,"label":"Johannesburg","state":"ok","detail":"af-south-1, 143 ms"},{"id":"singapore","lat":1.35,"lon":103.81999999999994,"label":"Singapore","state":"ok","detail":"ap-southeast-1, 71 ms"},{"id":"sydney","lat":-33.87,"lon":151.21000000000004,"label":"Sydney","state":"degraded","detail":"ap-southeast-2, 212 ms"},{"id":"tokyo","lat":35.68,"lon":139.69000000000005,"label":"Tokyo","state":"ok","detail":"ap-northeast-1, 64 ms"}],
    lon: -20,
    land: 'dotted',
  });

  // globe.update({ … });   change any option in place
  // globe.destroy();        and take it away again
</script>

new Globe(element, options)

Builds it inside the element with these options.

lon

The longitude facing the viewer, −180…180.

centre

The point facing the viewer: { lat, lon }.

state

renderer

markers

selectedId

focus(lat, lon, { instant = false } = {})

Turn the globe the short way round so a place faces the viewer: at the horizontal middle of the ball.

focusMarker(id, opts = {})

Turn to a marker by id.

spin(speed = 360)

Flick it: turn with this speed (degrees a second, positive turns east into view) and let friction stop it.

select(id)

Select a marker: its plate shows and select fires.

deselect()

setState(id, state)

Change one marker's state: its lamp fades to the new colour.

update(opts = {})

Change options in place.

toDataURL()

The current picture as a PNG data URL.

destroy()

Stops it and cleans up after it.

Events it fires, which bubble from the element: select, deselect, settle, turn.

1. At restNothing moves and no frame is requested; the terminator, the highlight and every lamp are still.
2. DraggingThe surface under the pointer follows it along its parallel. A vertical drag does not turn it: the ball gives a few degrees on its axle.
3. CoastingAfter a flick it keeps turning against viscous and dry friction, slows and stops; the loop then sleeps.
4. Meridian resistsVertical drag tips the ball at most 4.5 degrees, following the hand, and it springs back with a small ring.
5. Turning to a placefocus() and focusMarker() turn it the short way round with a spring that starts quickly and arrives slowly.
6. KeyboardArrows turn 15 degrees, Page keys 45, Home returns to the prime meridian, Escape clears the selection; Tab moves through the markers that are on the near side.
7. SelectedA small engraved plate with the label and state sits beside the lamp (on the left if it would run out of the box) and select fires.
8. LampsGreen, amber, red or white domes set into the surface; each lights the metal around it, dims and foreshortens toward the limb and is gone behind it, its button hidden.
9. State changeA lamp fades to its new colour; setState turns one red.
10. EngravedThe land is a shallow frosted recess with a bevelled coast.
11. DottedThe land is raised beads on rows of equal spacing, fewer toward the poles.
12. AluminiumA bead-blasted aluminium ring and stand and a light satin ball.
13. GraphiteA graphite ring and stand and a dark satin ball with the land frosted lighter.
14. DriftOptional: a slow idle turn that pauses on hover, on focus and while a marker is selected.
15. SoundOptional: a soft bearing hum while it turns and a knock when a lamp is selected. Off by default and only after the page has been touched.
16. Off screen or hiddenThe loop pauses and nothing runs.
17. Reduced motionNo inertia and no springs; focus() jumps; no drift; no sound.

Made of: Analytic sphere shader, Land mask mip sampling, Engraved coast bevel, Bead lattice, Axle friction inertia, Resisted axle give, Short way seek, Domed lamp markers, Ray cast stand, Unrolled meridian scale, Sleeping loop.

Original. One fragment shader draws the ball, the stand and the desk; the land is a mask rasterised once from baked Natural Earth polygons; the markers are DOM buttons positioned from the same rotation the shader uses.