Build note: a world map with no tile server.
Most map components load tiles from Google, OpenStreetMap or Carto, so every visit sends a request to a third party and many need an API key. For our last two components I tried the opposite and baked the world into the code: Natural Earth coastlines (public domain), projected to Equal Earth and simplified into a single 25 KB SVG path. The land dots are an SVG pattern whose spacing is recalculated on zoom, so they keep the same size on screen.
Three things that took more than one try:
Scrolling. A plain wheel now scrolls the page and only Ctrl or ⌘ zooms the map. On phones one finger scrolls the page and two fingers move the map. We measured both on the published site.
The first view. Measuring the frame in JavaScript to fit all pins would make the server and browser draw different frames, so the fit is done with CSS container units. On a 390 px phone the first version cut off Japan and Australia; this fixed it.
Text sizes. The panel started with eleven unrelated font sizes. It now uses one scale (14 px base, ratio 1.125) tied to a single Text Size control.
The two are Aisol Office Map and Aisol Dot Globe; the clip is recorded from them.
