gloomberb 0.16.2 → 0.16.4

package/src/plugins/builtin/world-venue-map/layers.ts

@@ -75,6 +75,33 @@ function capLayerSelection(ordered: readonly GeoLayerInfo[]): GeoLayerInfo[] {
   return kept;
 }
 
+/** Layers a plain map opens with: the server's default layers that can serve, two at most. */
+const MAX_DEFAULT_LAYERS = 2;
+
+function defaultLayerIds(layers: readonly GeoLayerInfo[] | null | undefined): string[] {
+  if (!layers?.length) return [];
+  const defaults = layers.filter((layer) => layer.defaultVisible && layer.status !== "unavailable");
+  return capLayerSelection(defaults.slice(0, MAX_DEFAULT_LAYERS)).map((layer) => layer.id);
+}
+
+/**
+ * A pane that never chose its layers or venues: a plain `MAP`, or a map
+ * saved before layers existed. It shows venues and the server's default
+ * layers. A preset or an edit in the layer picker writes both settings, and
+ * from then on the pane keeps exactly what was chosen.
+ */
+export function isPlainMap(settings: Record<string, unknown> | undefined): boolean {
+  return settings?.[LAYERS_SETTING_KEY] == null && typeof settings?.[VENUES_SETTING_KEY] !== "boolean";
+}
+
+/** The layer ids or groups a pane shows: what it chose, or the defaults on a plain map. */
+export function activeLayerTokens(
+  settings: Record<string, unknown> | undefined,
+  layers: readonly GeoLayerInfo[] | null | undefined,
+): string[] {
+  return isPlainMap(settings) ? defaultLayerIds(layers) : parseLayerTokens(settings?.[LAYERS_SETTING_KEY]);
+}
+
 /** Expands groups to their layers, drops what the server does not list, and applies the caps. */
 export function resolveActiveLayers(tokens: readonly string[], layers: readonly GeoLayerInfo[] | null | undefined): GeoLayerInfo[] {
   if (!layers?.length || !tokens.length) return [];
@@ -98,18 +125,23 @@ export interface MapPreset {
   venues: boolean;
 }
 
-/** `MAP ships` and friends: the typed words become layer tokens, resolved once the catalog is known. */
+/**
+ * `MAP ships` and friends: the typed words become layer tokens, resolved once
+ * the catalog is known. `MAP venues` alone is the venue map without layers.
+ */
 export function parseMapPreset(arg: string | null | undefined): MapPreset | null {
   const tokens = parseLayerTokens(arg ?? "");
-  if (!tokens.length) return null;
-  return { layers: tokens, venues: /\bvenues\b/i.test(arg ?? "") };
+  const venues = /\bvenues\b/i.test(arg ?? "");
+  if (!tokens.length) return venues ? { layers: [], venues: true } : null;
+  return { layers: tokens, venues };
 }
 
 export const MAP_PRESET_OPTIONS = [
+  { value: "venues", label: "Trading venues only" },
   { value: "ships", label: "Ships and chokepoints" },
   { value: "ports", label: "Ports" },
   { value: "energy", label: "Pipelines, fields and terminals" },
-  { value: "air", label: "Airports" },
+  { value: "air", label: "Airports and flights" },
 ] as const;
 
 function shortDate(iso: string): string | null {
@@ -152,8 +184,8 @@ function groupsOf(layers: readonly GeoLayerInfo[]): string[] {
 export function readVenuesSetting(settings: Record<string, unknown> | undefined, activeLayers: number): boolean {
   const value = settings?.[VENUES_SETTING_KEY];
   if (typeof value === "boolean") return value;
-  // A preset opens on its layers; a plain MAP stays the venue map.
-  return activeLayers === 0;
+  // A plain MAP shows venues under its default layers; a preset opens on its layers alone.
+  return settings?.[LAYERS_SETTING_KEY] == null || activeLayers === 0;
 }
 
 /**
@@ -166,7 +198,7 @@ export function buildMapSettingsDef(
   layers: readonly GeoLayerInfo[] | null | undefined,
 ): PaneSettingsDef | undefined {
   if (!layers?.length) return undefined;
-  const active = resolveActiveLayers(parseLayerTokens(settings[LAYERS_SETTING_KEY]), layers);
+  const active = resolveActiveLayers(activeLayerTokens(settings, layers), layers);
   const values: Record<string, unknown> = { [VENUES_SETTING_KEY]: readVenuesSetting(settings, active.length) };
   const fields: PaneSettingField[] = [{
     key: VENUES_SETTING_KEY,
@@ -199,12 +231,16 @@ export function applyMapSetting(
   value: unknown,
   layers: readonly GeoLayerInfo[],
 ): Record<string, unknown> {
-  if (key === VENUES_SETTING_KEY) return { ...settings, [VENUES_SETTING_KEY]: value === true };
-  if (!key.startsWith(GROUP_PREFIX)) return { ...settings, [key]: value };
+  const before = resolveActiveLayers(activeLayerTokens(settings, layers), layers);
+  // The first edit of a plain map writes down what it showed, so only the edited part changes.
+  const chosen = isPlainMap(settings)
+    ? { ...settings, [LAYERS_SETTING_KEY]: before.map((layer) => layer.id), [VENUES_SETTING_KEY]: readVenuesSetting(settings, before.length) }
+    : settings;
+  if (key === VENUES_SETTING_KEY) return { ...chosen, [VENUES_SETTING_KEY]: value === true };
+  if (!key.startsWith(GROUP_PREFIX)) return { ...chosen, [key]: value };
   const group = key.slice(GROUP_PREFIX.length);
   const members = new Set(layers.filter((layer) => String(layer.group || "other") === group).map((layer) => layer.id));
   const picked = Array.isArray(value) ? value.filter((entry): entry is string => typeof entry === "string" && members.has(entry)) : [];
-  const before = resolveActiveLayers(parseLayerTokens(settings[LAYERS_SETTING_KEY]), layers);
   // Other groups keep their order; this group's picks follow, newest last, so the caps drop the oldest.
   const kept = before.filter((layer) => !members.has(layer.id) || picked.includes(layer.id));
   const added = picked.filter((id) => !kept.some((layer) => layer.id === id))
@@ -253,6 +289,28 @@ export function geoViewForViewport(
   };
 }
 
+/**
+ * Zoom an opened entity is shown at: 16 times the world (the server's zoom 4,
+ * where dense point layers stop clustering) for a ship or a port, wider for a
+ * pipeline or a field, and never short of the zoom its layer draws from
+ * (flights from the server's zoom 5, 32 times the world).
+ */
+export function entityOpenZoom(layer: Pick<GeoLayerInfo, "geometry" | "minZoom">): number {
+  const base = layer.geometry === "point" ? 16 : 4;
+  return layer.minZoom === undefined ? base : Math.max(base, 2 ** layer.minZoom);
+}
+
+/**
+ * The area a layer's table reads. A layer drawn only from a zoom (live
+ * flights) lists what the map shows once it is that close; further out, and
+ * for every other layer, the table asks without one and the server answers
+ * for the whole layer or, for flights, one busy area.
+ */
+export function entityTableBbox(layer: Pick<GeoLayerInfo, "minZoom">, view: GeoView): GeoBbox | undefined {
+  if (layer.minZoom === undefined || view.zoom < layer.minZoom) return undefined;
+  return view.bbox;
+}
+
 export function geoViewKey(view: GeoView): string {
   return `${view.bbox.join(",")}@${Math.floor(view.zoom)}`;
 }

package/src/plugins/builtin/world-venue-map/map.tsx

@@ -16,6 +16,7 @@ import {
   MAX_WORLD_MAP_ZOOM,
   panWorldMapViewport,
   projectWorldPoint,
+  savedWorldMapViewport,
   unprojectWorldPoint,
   zoomWorldMapViewport,
   type WorldMapPoint,
@@ -26,7 +27,8 @@ import { WORLD_OUTLINES } from "./world-outlines";
 import { drawGeoBitmap, hitTestGeo, rasterGeoCells, type GeoHit, type GeoMapOverlay } from "./geo-draw";
 import { GeoSvgLayers, MapIconSwatch, toneColor, type MapMatrix, type SymbolTones } from "./geo-svg";
 import { BasemapLayer, type BasemapPalette } from "./basemap-layer";
-import type { GeoBox } from "./basemap";
+import { loadCountryLabels, type CountryLabel, type GeoBox } from "./basemap";
+import { COUNTRY_LABEL_FONT_PX, layoutCountryLabels, type LabelObstacle, type PlacedCountryLabel } from "./country-labels";
 import { layerSymbol, shipClass, usesClassTones, type MapSymbolId, type SymbolTone } from "./map-symbols";
 import { geoViewForViewport, sameGeoView, WORLD_GEO_VIEW, type GeoView } from "./layers";
 
@@ -52,6 +54,13 @@ interface WorldVenueMapProps {
   focus?: WorldMapFocus | null;
   /** How far the map may zoom; geo layers go closer than venues. */
   maxZoom?: number;
+  /**
+   * Where the map was when this pane last drew it (saved pane state). A pane
+   * docked, undocked, popped out or reloaded mounts a new map; it opens here.
+   */
+  savedViewport?: unknown;
+  /** The view once it has rested for a moment, for the pane to keep. */
+  onViewportSettled?: (viewport: WorldMapViewport) => void;
 }
 
 function clusterVenue(cluster: WorldVenueCluster, selectedMic: string | null): CloudWorldVenuePayload {
@@ -306,6 +315,75 @@ const MAP_CLICK_HIT_PX = 14;
 const MAP_DOUBLE_CLICK_ZOOM = 1.8;
 /** Share of the plot a selected venue may sit inside before the map pans to it. */
 const MAP_FOLLOW_MARGIN = 0.06;
+/** How long the view rests before the pane keeps it. */
+const VIEWPORT_SETTLE_MS = 400;
+
+/**
+ * Whether a map of this many cells can be drawn. A pane mid-layout (a new
+ * window, a dock move) can hand the map a width of one cell for a frame; a
+ * projection from that has no scale, and a focus applied to it loses its
+ * centre.
+ */
+function mapHasArea(width: number, height: number): boolean {
+  return width > 2 && height > 1;
+}
+
+/** A venue dot's radius in view units, larger for a cluster of venues. */
+function venueDotRadius(count: number): number {
+  return Math.max(0.55, Math.min(1.5, 0.45 + Math.sqrt(count) * 0.22));
+}
+
+/** Country names are laid out again once the view has rested this long, not on every drag frame. */
+const LABEL_SETTLE_MS = 150;
+/** Room a selected or hovered marker keeps clear of country names, in pixels. */
+const LABEL_MARKER_CLEARANCE_PX = 14;
+
+/** The country names, from their lazy chunk; none until it arrives, none in a build without map data. */
+function useCountryLabels(): readonly CountryLabel[] | null {
+  const [labels, setLabels] = useState<readonly CountryLabel[] | null>(null);
+  useEffect(() => {
+    let current = true;
+    loadCountryLabels().then((loaded) => {
+      if (current) setLabels(loaded);
+    }, () => {});
+    return () => {
+      current = false;
+    };
+  }, []);
+  return labels;
+}
+
+/** Country names under the markers: small, quiet, never in the way of a click. */
+function CountryNames({ labels, project, unitPx, color, halo }: {
+  labels: readonly PlacedCountryLabel[];
+  project: (longitude: number, latitude: number) => WorldMapPoint;
+  unitPx: number;
+  color: string;
+  halo: string;
+}) {
+  if (!labels.length) return null;
+  const fontSize = COUNTRY_LABEL_FONT_PX / unitPx;
+  return createElement(
+    "g",
+    {
+      "data-gloom-role": "country-labels",
+      fill: color,
+      stroke: halo,
+      strokeWidth: 3 / unitPx,
+      strokeOpacity: 0.8,
+      strokeLinejoin: "round",
+      paintOrder: "stroke",
+      fontSize,
+      fontFamily: "inherit",
+      textAnchor: "middle",
+      pointerEvents: "none",
+    },
+    ...labels.map((label) => {
+      const at = project(label.longitude, label.latitude);
+      return createElement("text", { key: label.name, x: at.x, y: at.y, dy: "0.35em" }, label.name);
+    }),
+  );
+}
 
 function wheelZoomFactor(event: WheelEvent): number {
   const delta = event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY;
@@ -386,7 +464,10 @@ function DesktopWorldVenueMap(props: WorldVenueMapProps) {
   const maxZoom = props.maxZoom ?? MAX_WORLD_MAP_ZOOM;
   const surfaceRef = useRef<HTMLDivElement | null>(null);
   const surfaceSize = useElementSize(surfaceRef);
-  const [viewport, setViewport] = useState<WorldMapViewport>(DEFAULT_WORLD_MAP_VIEWPORT);
+  const [viewport, setViewport] = useState<WorldMapViewport>(
+    () => savedWorldMapViewport(props.savedViewport, maxZoom) ?? DEFAULT_WORLD_MAP_VIEWPORT,
+  );
+  const sized = mapHasArea(props.width, props.height);
   const viewportRef = useRef(viewport);
   viewportRef.current = viewport;
   const [dragging, setDragging] = useState(false);
@@ -431,6 +512,7 @@ function DesktopWorldVenueMap(props: WorldVenueMapProps) {
     land: blendHex(colors.bg, colors.text, dark ? 0.1 : 0.07),
     coast: blendHex(colors.bg, colors.textDim, dark ? 0.85 : 0.75),
     border: blendHex(colors.bg, colors.textDim, dark ? 0.42 : 0.35),
+    label: blendHex(colors.bg, colors.textDim, dark ? 0.7 : 0.8),
   }), [colors.bg, colors.text, colors.textDim, dark]);
   // Five colours in all: the layer's own for cargo, amber tankers, bright
   // passenger ships, green fishing boats, and one quiet grey for the rest.
@@ -439,6 +521,42 @@ function DesktopWorldVenueMap(props: WorldVenueMapProps) {
     return { tanker: colors.warning, passenger: colors.textBright, fishing: colors.positive, service: quiet, other: quiet };
   }, [colors.positive, colors.text, colors.textBright, colors.textDim, colors.warning]);
 
+  // Names are placed for the view once it rests; a drag moves the ones already placed.
+  const countryLabels = useCountryLabels();
+  const [labelViewport, setLabelViewport] = useState(viewport);
+  useEffect(() => {
+    if (labelViewport === viewport) return;
+    const timer = setTimeout(() => setLabelViewport(viewport), LABEL_SETTLE_MS);
+    return () => clearTimeout(timer);
+  }, [labelViewport, viewport]);
+  const selectedPoint = props.overlay?.selected ?? null;
+  const selectedVenuePoint = props.venues.find((venue) => venue.mic === props.selectedMic) ?? null;
+  const hoverAnchor = hover?.hit.kind === "feature" && hover.hit.feature.geometry.type === "Point" ? hover.hit.feature.geometry.coordinates : null;
+  const placedLabels = useMemo(() => {
+    if (!countryLabels?.length) return [];
+    const at = (longitude: number, latitude: number) => {
+      const point = projectWorldPoint(longitude, latitude, props.width, plotHeight, 1, labelViewport);
+      return { x: point.x * unitPx, y: point.y * unitPx };
+    };
+    const markers = [
+      selectedPoint ? [selectedPoint.longitude, selectedPoint.latitude] : null,
+      selectedVenuePoint ? [selectedVenuePoint.longitude, selectedVenuePoint.latitude] : null,
+      hoverAnchor,
+    ].filter((point): point is [number, number] => point !== null);
+    const obstacles: LabelObstacle[] = markers.map(([longitude, latitude]) => ({ ...at(longitude, latitude), radius: LABEL_MARKER_CLEARANCE_PX }));
+    // Venue dots are few and sit on land, where the names are: a name never runs under one.
+    for (const cluster of clusterWorldVenues(props.venues, props.width, plotHeight, 1, labelViewport)) {
+      obstacles.push({ x: cluster.x * unitPx, y: cluster.y * unitPx, radius: (venueDotRadius(cluster.venues.length) + 0.2) * unitPx });
+    }
+    return layoutCountryLabels(countryLabels, {
+      pxPerDegree: (at(1, 0).x - at(0, 0).x),
+      toPixels: at,
+      widthPx: props.width * unitPx,
+      heightPx: plotHeight * unitPx,
+      obstacles,
+    });
+  }, [countryLabels, hoverAnchor?.[0], hoverAnchor?.[1], labelViewport, plotHeight, props.venues, props.width, selectedPoint?.latitude, selectedPoint?.longitude, selectedVenuePoint, unitPx]);
+
   const hitRadius = useCallback((element: HTMLElement) => {
     const rect = element.getBoundingClientRect();
     return rect.height <= 0 ? 2.4 : (MAP_CLICK_HIT_PX / rect.height) * plotHeight;
@@ -464,24 +582,39 @@ function DesktopWorldVenueMap(props: WorldVenueMapProps) {
   const onViewChange = props.onViewChange;
   const reportedViewRef = useRef<GeoView | null>(null);
   useEffect(() => {
-    if (!onViewChange) return;
+    if (!onViewChange || !sized) return;
     const next = geoViewForViewport(viewport, props.width, plotHeight);
     if (reportedViewRef.current && sameGeoView(reportedViewRef.current, next)) return;
     reportedViewRef.current = next;
     onViewChange(next);
-  }, [onViewChange, plotHeight, props.width, viewport]);
+  }, [onViewChange, plotHeight, props.width, sized, viewport]);
 
-  // A new focus (an entity picked in the table) centres the map on it.
+  // The pane keeps the view once it rests, so a remount opens where this left off.
+  const onViewportSettled = props.onViewportSettled;
+  const settledViewportRef = useRef(viewport);
+  useEffect(() => {
+    if (!onViewportSettled || settledViewportRef.current === viewport) return;
+    const timer = setTimeout(() => {
+      settledViewportRef.current = viewport;
+      onViewportSettled(viewport);
+    }, VIEWPORT_SETTLE_MS);
+    return () => clearTimeout(timer);
+  }, [onViewportSettled, viewport]);
+
+  // A new focus (an entity picked in the table) centres the map on it, once
+  // the map has an area to centre it in.
   const focusKey = props.focus?.key ?? null;
+  const appliedFocusRef = useRef<string | null>(null);
   useEffect(() => {
     const focus = props.focus;
-    if (!focus) return;
+    if (!focus || !sized || appliedFocusRef.current === focus.key) return;
+    appliedFocusRef.current = focus.key;
     setViewport((current) => {
       const zoom = Math.max(current.zoom, focus.zoom ?? 1);
       if (zoom <= 1) return current;
       return clampWorldMapViewport({ zoom, centerLongitude: focus.longitude, centerLatitude: focus.latitude }, props.width, plotHeight, 1, maxZoom);
     });
-  }, [focusKey]);
+  }, [focusKey, sized]);
 
   const selectedVenue = props.venues.find((venue) => venue.mic === props.selectedMic) ?? null;
   const selectedVenueRef = useRef(selectedVenue);
@@ -637,60 +770,63 @@ function DesktopWorldVenueMap(props: WorldVenueMapProps) {
           background: colors.bg,
         }}
       >
-        <svg
-          viewBox={`0 0 ${props.width} ${plotHeight}`}
-          width="100%"
-          height="100%"
-          aria-hidden="true"
-          style={{ display: "block", background: colors.bg, pointerEvents: "none" }}
-        >
-          <BasemapLayer matrix={matrix} view={view} pxPerDegree={pxPerDegree} palette={palette} />
-          {props.overlay ? (
-            <GeoSvgLayers
-              overlay={props.overlay}
-              matrix={matrix}
-              project={project}
-              view={view}
-              unitPx={unitPx}
-              mapWidthPx={surfaceSize?.width ?? props.width * 8}
-              background={colors.bg}
-              selectedColor={colors.selectedText}
-              textColor={colors.textBright}
-              tones={tones}
-              hovered={hovered?.hit ?? null}
-            />
-          ) : null}
-          {clusters.map((cluster) => {
-            const selected = isSelectedCluster(cluster, props.selectedMic);
-            const venue = clusterVenue(cluster, props.selectedMic);
-            const radius = Math.max(0.55, Math.min(1.5, 0.45 + Math.sqrt(cluster.venues.length) * 0.22));
-            return (
-              <g key={cluster.id}>
-                <title>{`${cluster.venues.length} venue${cluster.venues.length === 1 ? "" : "s"} near ${venue.city}: ${cluster.venues.map((item) => `${item.mic} ${item.name}`).join(", ")}`}</title>
-                <circle
-                  cx={cluster.x}
-                  cy={cluster.y}
-                  r={radius + (selected ? 0.24 : 0)}
-                  fill={cluster.isOpen ? colors.positive : colors.textMuted}
-                  stroke={selected ? colors.selectedText : colors.bg}
-                  strokeWidth={selected ? 0.35 : 0.16}
-                  vectorEffect="non-scaling-stroke"
-                />
-                {cluster.venues.length > 1 ? createElement("text", {
-                  x: cluster.x,
-                  y: cluster.y,
-                  fill: colors.bg,
-                  dy: "0.34em",
-                  fontSize: Math.max(0.62, Math.min(0.95, radius * 0.78)),
-                  fontWeight: "700",
-                  fontFamily: "inherit",
-                  textAnchor: "middle",
-                  pointerEvents: "none",
-                }, cluster.venues.length) : null}
-              </g>
-            );
-          })}
-        </svg>
+        {sized ? (
+          <svg
+            viewBox={`0 0 ${props.width} ${plotHeight}`}
+            width="100%"
+            height="100%"
+            aria-hidden="true"
+            style={{ display: "block", background: colors.bg, pointerEvents: "none" }}
+          >
+            <BasemapLayer matrix={matrix} view={view} pxPerDegree={pxPerDegree} palette={palette} />
+            <CountryNames labels={placedLabels} project={project} unitPx={unitPx} color={palette.label} halo={colors.bg} />
+            {props.overlay ? (
+              <GeoSvgLayers
+                overlay={props.overlay}
+                matrix={matrix}
+                project={project}
+                view={view}
+                unitPx={unitPx}
+                mapWidthPx={surfaceSize?.width ?? props.width * 8}
+                background={colors.bg}
+                selectedColor={colors.selectedText}
+                textColor={colors.textBright}
+                tones={tones}
+                hovered={hovered?.hit ?? null}
+              />
+            ) : null}
+            {clusters.map((cluster) => {
+              const selected = isSelectedCluster(cluster, props.selectedMic);
+              const venue = clusterVenue(cluster, props.selectedMic);
+              const radius = venueDotRadius(cluster.venues.length);
+              return (
+                <g key={cluster.id}>
+                  <title>{`${cluster.venues.length} venue${cluster.venues.length === 1 ? "" : "s"} near ${venue.city}: ${cluster.venues.map((item) => `${item.mic} ${item.name}`).join(", ")}`}</title>
+                  <circle
+                    cx={cluster.x}
+                    cy={cluster.y}
+                    r={radius + (selected ? 0.24 : 0)}
+                    fill={cluster.isOpen ? colors.positive : colors.textMuted}
+                    stroke={selected ? colors.selectedText : colors.bg}
+                    strokeWidth={selected ? 0.35 : 0.16}
+                    vectorEffect="non-scaling-stroke"
+                  />
+                  {cluster.venues.length > 1 ? createElement("text", {
+                    x: cluster.x,
+                    y: cluster.y,
+                    fill: colors.bg,
+                    dy: "0.34em",
+                    fontSize: Math.max(0.62, Math.min(0.95, radius * 0.78)),
+                    fontWeight: "700",
+                    fontFamily: "inherit",
+                    textAnchor: "middle",
+                    pointerEvents: "none",
+                  }, cluster.venues.length) : null}
+                </g>
+              );
+            })}
+          </svg>
+        ) : null}
         {tooltip && hovered ? (
           <MapTooltip
             title={tooltip.title}
@@ -700,7 +836,7 @@ function DesktopWorldVenueMap(props: WorldVenueMapProps) {
             width={surfaceSize?.width ?? 0}
           />
         ) : null}
-        {props.overlay ? <GeoLegend overlay={props.overlay} venues={props.venues.length > 0} tones={tones} /> : null}
+        {props.overlay && sized ? <GeoLegend overlay={props.overlay} venues={props.venues.length > 0} tones={tones} /> : null}
       </div>
     </Box>
   );

package/src/plugins/builtin/world-venue-map/model.ts

@@ -97,6 +97,9 @@ export function clampWorldMapViewport(
   if (zoom <= 1) return DEFAULT_WORLD_MAP_VIEWPORT;
 
   const { availableWidth, effectiveHeight, latitudeSpan } = mapExtent(width, height, yUnitAspect);
+  // A plot with no area yet (a pane mid-layout) says nothing about what fits:
+  // keep the centre rather than resetting it to the middle of the world.
+  if (availableWidth <= 0 || effectiveHeight <= 0) return { ...viewport, zoom };
   const scale = fittedWorldMapScale(width, height, yUnitAspect) * zoom;
   const halfLongitude = availableWidth / (2 * scale);
   const halfLatitude = effectiveHeight / (2 * scale);
@@ -116,6 +119,19 @@ export function clampWorldMapViewport(
   };
 }
 
+/** A viewport read back from saved pane state, or null when it is not one. */
+export function savedWorldMapViewport(value: unknown, maxZoom = MAX_WORLD_MAP_ZOOM): WorldMapViewport | null {
+  if (!value || typeof value !== "object") return null;
+  const { zoom, centerLongitude, centerLatitude } = value as Partial<WorldMapViewport>;
+  if (![zoom, centerLongitude, centerLatitude].every((part) => typeof part === "number" && Number.isFinite(part))) return null;
+  if (zoom! <= 1) return DEFAULT_WORLD_MAP_VIEWPORT;
+  return {
+    zoom: Math.min(zoom!, maxZoom),
+    centerLongitude: clamp(centerLongitude!, -180, 180),
+    centerLatitude: clamp(centerLatitude!, MIN_LATITUDE, MAX_LATITUDE),
+  };
+}
+
 export function zoomWorldMapViewport(
   viewport: WorldMapViewport,
   width: number,

package/src/plugins/builtin/world-venue-map/natural-earth/index.chunk.ts

@@ -4,6 +4,9 @@ import type { DetailTile } from "../basemap";
 /** @knipignore Loaded through the map's data specifier, which only view builds define (see ../basemap.ts). */
 export const loadWorld = () => import("./world-50m.chunk.js");
 
+/** @knipignore Loaded through the map's data specifier, which only view builds define (see ../basemap.ts). */
+export const loadLabels = () => import("./labels.chunk.js");
+
 export const DETAIL_TILES: readonly DetailTile[] = [
   { id: "w090s60", box: [-90.005, -60, -74.995, -44.995], load: () => import("./tiles/w090s60.chunk.js") },
   { id: "w075s60", box: [-75.005, -60, -59.995, -44.995], load: () => import("./tiles/w075s60.chunk.js") },