Map

Where things are happening, for the places a product shows the world: traffic between regions, shipments, the edges of a network, an incident's spread. Each place is a real button with its status in its name, in west-to-east order that the arrow keys walk, with an engraved plate on select. Routes, statuses and zoom are plain calls (route, pulse, setStatus, focusRegion) with events for a selection, the end of a route and a landed zoom. It draws nothing while nothing moves and stops off screen.

Copy the map 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="map/map.css">
<div id="map" style="width: min(100%, 1040px)"></div>

<script type="module">
  import WorldMap from './map/map.mjs';

  const map = new WorldMap(document.getElementById('map'), {
    markers: [{"id":"rotterdam","label":"Rotterdam","lat":51.92,"lon":4.48,"status":"ok","detail":"Europoort, 41 vessels"},{"id":"singapore","label":"Singapore","lat":1.29,"lon":103.85,"status":"ok","detail":"Tuas, 63 vessels"},{"id":"los-angeles","label":"Los Angeles","lat":33.74,"lon":-118.27,"status":"degraded","detail":"San Pedro Bay, queue 9 h"},{"id":"santos","label":"Santos","lat":-23.96,"lon":-46.33,"status":"ok","detail":"Terminal 4, 18 vessels"},{"id":"dubai","label":"Dubai","lat":25.01,"lon":55.06,"status":"ok","detail":"Jebel Ali, 29 vessels"},{"id":"shanghai","label":"Shanghai","lat":31.23,"lon":121.47,"status":"ok","detail":"Yangshan, 88 vessels"},{"id":"frankfurt","label":"Frankfurt","lat":50.11,"lon":8.68,"status":"neutral","detail":"Air cargo, 12 flights"},{"id":"sydney","label":"Sydney","lat":-33.87,"lon":151.21,"status":"ok","detail":"Botany, 11 vessels"}],
    finish: 'auto',
    pitch: 8,
  });

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

new WorldMap(element, options)

Builds it inside the element with these options.

list

The markers, with their current status.

selected

Which marker is selected, if any.

busy

Is anything moving: a route in flight, a zoom, the scan?

regions

update(opts = {})

Change options in place.

route(fromId, toId, opts = {})

Send a packet along the great circle between two of the markers.

pulse(from, to, opts = {})

Like route(), but either end may be a place: { lat, lon }.

setStatus(id, status, detail)

Change how a marker is.

select(id, user = false)

Select a marker (or none): its plate stays up.

focusRegion(name)

Zoom the glass onto a region, eased.

destroy()

Stops it and cleans up after it.

Events it fires, which bubble from the element: select, region, route-end.

1. IdleLand is a field of dim domes, the sea is empty glass, the places are lit clusters. Nothing runs and no frame is drawn.
2. MarkersA place lights a cross of lamps with soft shoulders and a bloom behind the glass: green for ok, amber for degraded, red for down, cool white for neutral.
3. DownA red place breathes slowly. The breathing is a CSS animation on its bloom, so it costs no frames.
4. Routeroute or pulse sends a short lit packet along the great circle, snapped to the lamps, stepping one lamp at a time with a track that fades behind it. A ring of lamps spreads where it lands, and route-end fires. A route that leaves one edge of the glass comes back in at the other.
5. SelectHover or focus shows an engraved plate with the place, its status and what it says; Enter or a click keeps it up with a ring of lamps round the place.
6. KeyboardThe places are one tab stop. Arrow keys walk them west to east, Home and End go to the ends, Enter selects, Escape clears.
7. RegionfocusRegion eases the glass to Europe, the Americas, Asia, Oceania, Africa or the world. The lamp pitch stays; the land is rasterised again at the new extent, so a region takes more lamps and a smaller area.
8. HeatOptional: land near a point warms, from an ember to warm white. Amber and white only.
9. ScanOptional and off by default: a slow bar of light across the glass with a short tail.
10. AluminiumA bead-blasted bezel with the glass let into it.
11. GraphiteA soft-touch black bezel; the glass is the same smoked dark.
12. SoundOptional: a relay tick for each step a packet takes. Off by default and only after the page has been touched.
13. Off screen or hiddenNo frames. A zoom lands at once and a route ends on time.
14. Reduced motionA route is drawn whole and fades, the zoom is instant, red does not breathe, there is no scan and no sound.

Made of: Equal earth projection, Scanline land raster, Lamp atlas, Great circle packet, Lamp quantised path, Css bloom breathing, Region re rasterise, Roving marker buttons, Engraved plate, Sleeping loop, Room fixed sheen.

Original. The land is not an image: the Natural Earth rings are projected once and filled by scanline onto the lamp grid for each view (about 2 ms), so a zoom re-rasterises every frame. Lamps are a handful of small pictures painted once per size onto an atlas and copied. Two canvases: the land, drawn once per size and region, and the lit things, drawn only while they move. In the source tree land.mjs beside the Map re-exports the Globe's; a package carries the real file under the Map's own folder.