Explore a prettier world map: five options against the hand-rolled SVG we have now

[2ndtlmining]

Where the map is today

client/src/analytics/WorldMap/index.jsx (157 lines) is entirely hand-rolled
and has zero map dependencies:

• geo/worldLandPath.js — 22.6 KB of hand-authored SVG path data for the
  coastlines
• geo/countryCentroids.js — 66 lines of hard-coded lat/lon centroids
• geo/regionBounds.js — viewBox maths for zooming to a continent or country
• proportional bubbles, sqrt-scaled so area tracks node count (the correct
  cartographic convention), Blueprint Tooltip2 on each

That is a genuinely decent piece of work, and it has one property no library
listed below keeps for free: it makes no network request at runtime and has no
third-party dependency. For an app whose whole point is running on somebody
else's Flux node, that is worth more than it looks.

What any replacement must not lose

Listing these because most "prettier map" options quietly drop one:

1. Click-to-select a country, driving the scope selector and the three
   region cards (onSelectCountry).
2. Zoom-to-scope — selecting Europe reframes the map (regionBounds.js).
3. The unmapped disclosure — "+N countries not shown (no map coordinates)".
   Countries without a centroid are deliberately omitted rather than stacked on
   a fallback point, because several unrelated countries on one dot reads as a
   real cluster. A library with a complete atlas removes this problem entirely,
   which is a genuine win.
4. Theme-aware light/dark.
5. No horizontal bleed at 390px (the guard from Mobile: the wallet dashboard scrolls sideways on every phone (662px content floor on /nodes and /demo) #275).
6. Current JS bundle is 3.0 MB; adding meaningfully to that is a real cost.

Five options

Versions and licences checked against npm at time of writing.

1. react-simple-maps 5.0.3 (MIT) + world-atlas 2.0.2 (ISC) — recommended

D3-geo under a React API. Real country polygons from TopoJSON instead of a
hand-drawn outline, real projections (Natural Earth, Robinson, Mercator),
ZoomableGroup for pan/zoom, and Geography gives per-country onClick and
hover for free — so choropsleth shading by node count becomes possible,
which the current bubbles-only map cannot do.

• Peer deps allow React 18 (^16.8.0 || 17.x || 18.x || 19.x) — compatible.
• Pulls d3-geo, d3-zoom, d3-selection, d3-interpolate, d3-color,
  topojson-client.
• Atlas can be bundled, so the no-runtime-fetch property survives.
• Deletes worldLandPath.js and most of countryCentroids.js.

Closest fit to the existing model: still SVG, still our styling, still our
interaction — just accurate geography and a better projection.

2. @visx/geo 4.0.0 (MIT)

Airbnb's visx — a thin, modular React wrapper over d3-geo. Same idea as (1)
but less framework and more assembly: you compose Mercator/AlbersUsa and
render the paths yourself. Smaller and more controllable; more code to write.
Good if we want to keep owning the rendering.

3. d3-geo 3.1.1 (ISC) alone — smallest change

Keep WorldMap/index.jsx exactly as it is structurally and swap only the
geometry: replace the hand-drawn WORLD_LAND_PATH with a real projection over a
bundled TopoJSON. Every interaction, style and test survives untouched. The
least visual upgrade of the five, but by far the lowest risk, and it alone fixes
the "hand-drawn coastline" problem.

4. maplibre-gl 6.9.0 (BSD-3-Clause) (+ react-map-gl)

The biggest visual leap — real vector tiles, WebGL, smooth zoom, the
Mapbox-grade look, without Mapbox's licence.

But it needs a tile source. Either a third party (MapTiler and friends, which
means an API key and a runtime call to someone else's server from every
operator's node) or self-hosted tiles in the image. It is also the heaviest
option by a wide margin and brings a WebGL dependency. For a decentralised-
hosting dashboard I think the external-tile dependency is the wrong trade, but
it is the honest answer to "can it look much prettier" — yes, and this is how.

5. cobe 2.0.1 (MIT) or react-globe.gl 2.38.0 (MIT) — a 3D globe

cobe is a tiny WebGL globe; react-globe.gl is richer (arcs, rings,
per-point interaction) and heavier. A rotating globe with glowing points is
thematically apt for a decentralised network and would be the most striking
thing on the site.

Weaker as a control, though: picking a specific country off a rotating sphere
is worse than clicking a flat map. Best considered as a hero element on
/home alongside the flat map on /analytics, rather than as a replacement for
the tab's selector.

Also considered

echarts 6.1.0 (Apache-2.0) has a strong geo/effectScatter story and would
look good, but it is a large dependency to add for one panel when we use no
charting library of that scale elsewhere. amCharts 5 is excellent and was
ruled out on licensing for a project of this shape.

Suggested approach

Take (1). If it lands well, revisit (5) as a separate Home hero — the two are
complementary, not competing.

Worth prototyping (1) and (3) side by side before committing, since (3) is
nearly free and may already be enough.