Status page by region

A status page's job is to answer one question in under two seconds: is the bit I use working? For anyone running in more than one region, a list of nine region names does not answer that as fast as nine coloured dots in the right places.

Loading globe…

The code

import { createGlobe } from "canvas-globe";

const COLOR = { ok: "#22c55e", degraded: "#f59e0b", down: "#ef4444" };

function toMarker(region) {
  return {
    label: region.name,
    lat: region.lat,
    lon: region.lon,
    color: COLOR[region.status],
    live: region.status !== "ok",     // only unhealthy regions pulse
    latency: region.latency,
  };
}

const globe = createGlobe(canvas, {
  mode: "map",
  preset: "blueprint",
  projection: "naturalEarth",
  autoRotate: false,
  labels: "markers",
  markers: regions.map(toMarker),
  legend: {
    title: "Region health",
    items: [
      { color: COLOR.ok, label: "Operational" },
      { color: COLOR.degraded, label: "Degraded" },
      { color: COLOR.down, label: "Outage" },
    ],
  },
  showViewer: { label: "You" },
  tooltip: (m) => (m.latency ? `${m.label}: ${m.latency} ms` : `${m.label}: no response`),
  onClick: (m) => m && scrollToIncident(m.label),
});

// Refresh on the same cadence as your health checks.
setInterval(async () => {
  const regions = await fetch("/api/status").then((r) => r.json());
  globe.setMarkers(regions.map(toMarker));
}, 30000);

Why only the broken ones pulse

live: true gives a marker a slow pulse. The instinct is to put it on everything, because it looks alive. Do not: if all nine pulse, none of them stand out, and you have built a decoration instead of a signal.

Keep healthy markers green, still, and small. Reserve motion, saturation, and size for the region that needs attention.

Colour is not enough

Roughly one in twelve men cannot reliably separate your green from your red. A status page that encodes state only in hue fails exactly the people who most need it to work.

• Keep the text list. The map is a summary of a table that is still on the page, in the DOM, readable by a screen reader and by anyone who prefers reading.
• Vary size as well as colour. A down region can be a larger marker.
• Use the label. With labels: "markers" the region name is on the map regardless of colour.

<ul class="regions">
  <li><span data-status="ok">Operational</span> eu-west: 18 ms</li>
  <li><span data-status="degraded">Degraded</span> eu-central: 187 ms</li>
  <li><span data-status="down">Outage</span> sa-east: no response</li>
</ul>

See Accessibility for how the canvas exposes itself to assistive tech.

Latency instead of state

If you are showing performance rather than uptime, drive the colour continuously and let the legend carry a scale:

import { colorScale } from "canvas-globe";

const latencyColor = colorScale([20, 250], ["#22c55e", "#ef4444"]);

markers: regions.map((r) => ({ ...r, color: latencyColor(r.latency) })),
legend: { title: "p95 latency (ms)", scale: { domain: [20, 250], range: ["#22c55e", "#ef4444"] } },

Pick the domain from your actual SLO, not from the data. A scale that rescales itself every refresh makes a good day and a bad day look identical.

Show them their region

The most useful thing a status map can do is point at the region the visitor is actually served from. If you know it, say so:

globe.setViewerLocation({ lat: 51.47, lon: -0.45, label: "You are served from eu-west" });

If you do not, showViewer falls back to the visitor's time zone: no permission prompt, no request, and accurate enough to be useful at this zoom. See Viewer location.

Internal dashboards

The same map on a wall screen wants different settings:

{
  mode: "map",
  preset: "midnight",
  interactive: false,        // nobody is going to drag a TV
  labels: "markers",
  fps: 15,                   // it will run for months
}

Add spikes keyed to request volume if the board also needs to answer "where is the traffic", and check Performance before leaving anything running indefinitely.

Next

• Markers: colours, pulses, labels and hit testing
• Coverage dashboard: the country-level sibling of this map
• Viewer location: pinning the visitor without a prompt