@fundar/data-chart-telling 0.0.25 → 0.0.27

package/dist/plots/geo/Plot.svelte

@@ -1,54 +1,42 @@
 <script lang="ts" generics="TProps extends Record<string, unknown>">
   import { SvelteMap } from 'svelte/reactivity';
-  import { Geo, Graticule, Sphere, Dot, Vector, Contour } from 'svelteplot';
   import { resolveAccessor } from '../utils/accessors';
   import { resolveFeatureStyle } from '../utils/geoSegments';
-  import {
-    geometryCentroid,
-    geometryLonLatBounds,
-    geometryPartCentroids,
-    filterGeometryParts,
-    defaultFeatureId,
-    greatCircleInterpolate,
-  } from '../utils/geoAccessors';
+  import { geometryCentroid, filterGeometryParts, defaultFeatureId } from '../utils/geoAccessors';
   import { isTopology, topologyToGeoJson } from '../utils/topojson';
   import { makeColorScale } from '../../utils/color';
   import { getConfiguration } from '../../configuration/config.svelte';
   import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
   import { disabledFillOverride } from '../utils/legendDisabled';
-  import { GEO_MARGIN_ESTIMATE } from '../../layout/plot/margins';
+  import { GEO_MARGIN_ESTIMATE } from '../../layout/coordinates/margins';
+  import { buildGeoMarkers } from './buildGeoMarkers';
+  import { hasHoverMarker } from '../../layout/tooltip/utils';
   import BasePlotLayout from '../../layout/plot/BasePlotLayout.svelte';
-  import GeoLayout from '../../layout/geo/GeoLayout.svelte';
-  import { resolveProjection } from '../../layout/geo/resolveProjection';
-  import HoverMarker from '../../markers/HoverMarker.svelte';
-  import { createGeoZoom } from './zoom.svelte';
-  import { createGeoRotate, type GeoRotate } from './rotate.svelte';
-  import InsetMarker from '../../markers/inset/InsetMarker.svelte';
-  import ContourClipMarker from '../../markers/ContourClipMarker.svelte';
-  import type { BasePlotProps, GeoScalesConfig } from '../../types/plots/props';
+  import type { BasePlotProps } from '../../types/plots/props';
+  import type { GeoScalesConfig, CoordinatesConfig } from '../../types/layout/coordinates';
   import type { GeoFeature, GeoDataProps } from '../../types/plots/data/geo';
-  import type { GeoStyles } from '../../types/plots/styles/geo';
+  import type { GeoStylesConfig } from '../../types/layout/styles';
   import type { GeoSegmentStyle } from '../../types/plots/segments/common';
-  import type { GeoMarker, GeoHoverMarkerConfig, GeoDotMarker, GeoInsetMarker } from '../../types/markers/geo';
+  import type { GeoMarkersConfig } from '../../types/markers/geo';
 
   /**
-   * A map, rendered from GeoJSON (or, optionally, TopoJSON — see
-   * `$lib/plots/utils/topojson`). Unlike the other plot kinds there's no x/y/z
-   * axis pair: `data` IS the map. `segments` styles features by id (e.g.
-   * `segments.argentina`), `value` + `scales.color`/`styles.colors` drive a
-   * continuous choropleth ramp (mirrors heatmap's `z`/`colors` pattern), and
-   * everything drawn on top — points, arrows, geodesic links, contours,
-   * graticule/sphere — is a `markers` entry.
+   * A map, rendered from GeoJSON or TopoJSON. Unlike the other plot kinds
+   * there's no x/y/z axis pair: `data` IS the map. `segments` styles
+   * features by id; `value` + `scales.color`/`styles.colors` drive a
+   * continuous choropleth ramp. Everything drawn on top — points, arrows,
+   * links, contours, graticule/sphere — is a `markers` entry, assembled by
+   * `buildGeoMarkers` and routed through `GeometryLayout`.
    */
   type TaggedFeature = GeoFeature<TProps> & { __id: string; __cx: number; __cy: number };
 
   type Props = BasePlotProps<
     GeoDataProps<TProps>,
     GeoFeature<TProps>,
-    GeoStyles<TProps>,
+    GeoStylesConfig<TProps>,
     GeoSegmentStyle,
-    GeoMarker,
-    GeoScalesConfig
+    GeoMarkersConfig,
+    GeoScalesConfig,
+    CoordinatesConfig
   >;
 
   let {
@@ -63,6 +51,7 @@
     segments = {},
     markers = [],
     scales = {},
+    coordinates = {},
     margins,
     tooltip = undefined,
   }: Props = $props();
@@ -110,18 +99,12 @@
   );
 
   /**
-   * Tags each feature with a plain enumerable `__id`/`__cx`/`__cy` by
-   * spreading into a fresh object (never mutating the original — Svelte 5
-   * forbids mutating state read inside a `$derived`, and `data` may already
-   * be a reactive proxy) — required because svelteplot's `<Pointer>`
-   * shallow-clones matched rows, so per-row metadata needed at hover-match
-   * time must live as an own enumerable property on the object itself, not a
-   * side `Map` keyed by identity.
-   *
-   * Untouched by `excludeParts` — this is the full geometry, passed to
-   * `InsetMarker` as-is, so an inset can show a part regardless of whether
-   * `excludeParts` also hides that same part from the main map's own
-   * rendering below (see `features`).
+   * Tags each feature with a plain enumerable `__id`/`__cx`/`__cy`, so
+   * per-row metadata (feature id for style/hover lookups, centroid for
+   * positioning) lives as an own property on the object itself rather than a
+   * side lookup. Untouched by `excludeParts`: passed to `InsetMarker` as-is,
+   * so an inset can show a part the main map's own rendering (`features`,
+   * below) excludes.
    */
   const allFeatures = $derived.by((): TaggedFeature[] =>
     rawFeatures.map((f) => {
@@ -132,8 +115,9 @@
 
   /**
    * `allFeatures`, reduced per `excludeParts` — this is what actually
-   * renders (`styleGroups`/`<Geo>` below) and what `hoverCandidates` derives
-   * from. A feature reduced to no parts at all is dropped entirely.
+   * renders (`styleGroups`/the base `'geo'` marker below) and what
+   * `hoverPoints` derives from. A feature reduced to no parts at all is
+   * dropped entirely.
    */
   const features = $derived.by((): TaggedFeature[] => {
     if (!excludeParts) return allFeatures;
@@ -148,7 +132,7 @@
   // ── Tile-layer / projection compatibility ────────────────────────────────
   $effect(() => {
     if (!styles.tileLayer) return;
-    const proj = scales.projection;
+    const proj = coordinates.projection;
     const name = typeof proj === 'string' ? proj : proj?.type;
     if (name && name !== 'mercator' && name !== 'transverse-mercator') {
       console.warn(
@@ -157,22 +141,28 @@
     }
   });
 
-  const dataLonLatBounds = $derived.by((): [number, number, number, number] | null => {
-    if (!styles.tileLayer) return null;
-    let minLon = Infinity;
-    let maxLon = -Infinity;
-    let minLat = Infinity;
-    let maxLat = -Infinity;
-    for (const f of features) {
-      const b = geometryLonLatBounds(f.geometry);
-      if (!b) continue;
-      if (b[0] < minLon) minLon = b[0];
-      if (b[2] > maxLon) maxLon = b[2];
-      if (b[1] < minLat) minLat = b[1];
-      if (b[3] > maxLat) maxLat = b[3];
-    }
-    return minLon === Infinity ? null : [minLon, minLat, maxLon, maxLat];
-  });
+  /**
+   * `coordinates.projection`, defaulted to `'mercator'` when unset and
+   * `styles.tileLayer` is active (the only projection family `TileLayer`
+   * renders correctly under) — folded in here, before `coordinates` reaches
+   * `BasePlotLayout`/`CoordinatesLayout`, since neither knows about
+   * `styles.tileLayer`.
+   */
+  const resolvedCoordinates = $derived.by((): CoordinatesConfig => ({
+    ...coordinates,
+    projection: coordinates.projection ?? (styles.tileLayer ? 'mercator' : undefined),
+  }));
+
+  /**
+   * `styles`, with `features` tacked onto `tileLayer` (never author-facing —
+   * `GeoTileLayerConfig` doesn't declare it) so `StylesLayout` can compute
+   * the tile layer's auto-fit bounds without raw geometry threaded through
+   * as a separate prop. `excludeParts`-reduced `features`, matching what
+   * actually renders.
+   */
+  const resolvedStyles = $derived.by(() =>
+    styles.tileLayer ? { ...styles, tileLayer: { ...styles.tileLayer, features } } : styles,
+  );
 
   // ── Choropleth color scale (mirrors heatmap's styles.colors/scales.z) ────
   const minColor = $derived(styles.colors?.min ?? cfg.continuous.min);
@@ -213,23 +203,8 @@
     return { ...base, ...disabledFillOverride(r.disabledStyle) };
   }
 
-  /** Per-marker color ramp for a `dot` marker's `value` channel — independent of the base map's own choropleth ramp. */
-  function makeDotColorScale(marker: GeoDotMarker): ((v: number) => string) | null {
-    if (!marker.value) return null;
-    const getValue = resolveAccessor(marker.value);
-    const vals = marker.data.map((d) => Number(getValue(d))).filter((v) => Number.isFinite(v));
-    if (!vals.length) return null;
-    const domain: [number, number] = [Math.min(...vals), Math.max(...vals)];
-    return makeColorScale(
-      domain[0],
-      domain[1],
-      marker.style?.colors?.min ?? cfg.continuous.min,
-      marker.style?.colors?.max ?? cfg.continuous.max,
-    );
-  }
-
   // ── Per-feature style resolution, grouped by distinct resolved style ─────
-  // (one <Geo> call per group — mirrors heatmap's styleGroups: svelteplot's
+  // (one `'geo'` marker per group — mirrors heatmap's styleGroups: svelteplot's
   // shared numeric-scale machinery collapses a per-row fillOpacity/strokeWidth
   // *accessor* to a single value, so literal per-call constants are required.)
   function getFeatureStyle(f: TaggedFeature): GeoSegmentStyle {
@@ -252,22 +227,10 @@
     return [...groups.values()];
   });
 
-  /**
-   * Hover/click candidates — like `features`, but one row per disjoint
-   * geometry part instead of per feature, so a multi-part feature's hover
-   * point isn't stranded somewhere between its parts (see
-   * `geometryPartCentroids`). Only used for hover matching (`BasePlotLayout`'s
-   * `data`/`hoverPoints`) — `<Geo>` itself still renders from
-   * `features`/`styleGroups`, one entry per feature, unaffected by this.
-   */
-  const hoverCandidates = $derived.by((): TaggedFeature[] =>
-    features.flatMap((f) => geometryPartCentroids(f.geometry).map(([cx, cy]) => ({ ...f, __cx: cx, __cy: cy }))),
-  );
-
   // A feature outside the active range is dimmed in place, but never
   // surfaces in hover/tooltip — it's simply absent from the candidate list.
   const hoverPoints = $derived(
-    hoverCandidates
+    features
       .filter((f) => {
         const r = range;
         if (r == null || !value) return true;
@@ -280,323 +243,86 @@
   const hoverGetY = (f: TaggedFeature) => f.__cy;
 
   /**
-   * `markers` otherwise always render after (on top of) the base map's own
-   * `styleGroups`, regardless of array order — a marker opts into drawing
-   * underneath it instead by setting `behind: true` (see e.g.
-   * `GeoSphereMarker.behind`).
-   */
-  function isBehindMarker(marker: GeoMarker): boolean {
-    return (
-      (marker.type === 'graticule' || marker.type === 'sphere' || marker.type === 'contour') &&
-      marker.behind === true
-    );
-  }
-
-  const hoverMarkerConfig = $derived(markers.find((m): m is GeoHoverMarkerConfig => m.type === 'hover'));
-
-  $effect(() => {
-    if (hoverMarkerConfig?.strategy === 'nearest-point') {
-      console.warn(
-        "GeoPlot: the hover marker's strategy 'nearest-point' isn't implemented yet — falling back to 'nearest-feature'.",
-      );
-    }
-  });
-
-  const hoverActive = $derived(tooltip != null || hoverMarkerConfig != null);
-
-  // ── Projection ────────────────────────────────────────────────────────────
-  const resolvedProjection = $derived(
-    resolveProjection(scales.projection ?? (styles.tileLayer ? 'mercator' : undefined), hoverCandidates),
-  );
-
-  // ── Pan / zoom / rotate — owned here (not GeoLayout) since the resulting
-  // rotated projection must reach `BasePlotLayout`'s own `<Plot projection>`
-  // prop, and a component nested *inside* that `<Plot>` (as GeoLayout is)
-  // has no way to reach back out to a prop on its own ancestor. GeoLayout
-  // only renders the *result* (`zoomTransform`) as its `<g transform>`. ────
-  let containerEl = $state<HTMLDivElement>();
-  const zoomEnabled = $derived(styles.zoom !== false && styles.zoom != null);
-  const zoomConfig = $derived(typeof styles.zoom === 'object' ? styles.zoom : undefined);
-
-  /**
-   * Orthographic (and other azimuthal, hemisphere-style) projections don't
-   * gain anything from drag-to-*pan* — panning just slides the same globe a
-   * few pixels within the frame — so when `zoom` is enabled on one, drag
-   * instead rotates the globe (`createGeoRotate`) and wheel/pinch keeps
-   * scaling it (`createGeoZoom`, with its own drag disabled below so the two
-   * gestures don't fight over the same pointer events).
+   * `hoverPoints` keyed by feature `__id`, looked up from the exact feature
+   * the browser's own SVG hit-testing resolved a pointer event to (see the
+   * base `'geo'` marker's `onpointerenter`, built by `buildGeoMarkers`). A
+   * feature absent here was filtered out of `hoverPoints` and correctly
+   * produces no match.
    */
-  const projectionType = $derived(
-    typeof resolvedProjection === 'string' ? resolvedProjection : resolvedProjection?.type,
-  );
-  const rotateEnabled = $derived(zoomEnabled && projectionType === 'orthographic');
-  const baseRotate = $derived.by((): GeoRotate => {
-    const configured = typeof resolvedProjection === 'object' ? resolvedProjection?.rotate : undefined;
-    return [configured?.[0] ?? 0, configured?.[1] ?? 0, configured?.[2] ?? 0];
-  });
-
-  const geoZoom = createGeoZoom({
-    enabled: () => zoomEnabled,
-    config: () => zoomConfig,
-    node: () => containerEl ?? null,
-    disableDrag: () => rotateEnabled,
-  });
-
-  const geoRotate = createGeoRotate({
-    enabled: () => rotateEnabled,
-    baseRotate: () => baseRotate,
-    scale: () => geoZoom.transform.k,
-    node: () => containerEl ?? null,
+  const hoverPointById = $derived.by(() => {
+    const map = new SvelteMap<string, (typeof hoverPoints)[number]>();
+    for (const p of hoverPoints) map.set(p.row.__id, p);
+    return map;
   });
 
-  const finalProjection = $derived.by(() => {
-    if (!rotateEnabled) return resolvedProjection;
-    return {
-      ...(typeof resolvedProjection === 'string' ? { type: resolvedProjection } : resolvedProjection),
-      rotate: geoRotate.rotate,
-    };
+  const hoverActive = $derived(tooltip != null || hasHoverMarker(markers));
+
+  const hover = $derived({
+    active: hoverActive,
+    points: hoverPoints,
+    label: (f: TaggedFeature) => f.__id,
+    strategy: 'punctual' as const,
+    // A map has no axis to draw a crosshair rule against — 'punctual' here
+    // only means "exact XY hover match", unlike heatmap's own use of it.
+    crosshair: false,
+    sync: tooltip?.sync ?? false,
+    tooltip,
+    exclude: isOverInset,
+    // A feature's true visual center can sit far from where the cursor
+    // actually is on a large/irregular shape (e.g. an elongated province) —
+    // 'contains' matches the feature the cursor is really over, via the
+    // browser's own SVG hit-testing on each rendered feature path, rather
+    // than 'nearest' centroid distance.
+    pointMatching: 'contains' as const,
   });
 
   /**
-   * This plot's own hover must never fire while the cursor is actually over
-   * an `inset` marker's panel — an inset draws its own content at its own
-   * scale/projection, so the main map's `Pointer` has no way to know it's
-   * there and would otherwise still match/show whatever main-map feature
-   * happens to be nearest that screen position underneath the inset.
-   *
-   * Checked via `e.target` (which `InsetMarker`'s own hit-test `<rect>`, or
-   * one of its feature `<path>`s, tags with the `dct-geo-inset` ancestor —
-   * see `InsetMarker.svelte`) rather than by comparing pixel coordinates against a
-   * precomputed inset box: svelteplot's `<Plot>` doesn't necessarily render
-   * at a 1:1 scale between its `width`/`height` props and actual client
-   * pixels (its internal `viewBox` can differ), which would silently desync
-   * any independently-computed pixel math from what's really on screen. The
-   * browser's own hit-testing has no such problem — it already resolves
-   * `e.target` against whatever is actually painted, accounting for any such
-   * scaling automatically.
+   * The main map's own hover must never fire while the cursor is over an
+   * `inset` marker's panel, which draws at its own scale/projection.
+   * Checked via `e.target` (tagged with the `dct-geo-inset` ancestor class
+   * by `InsetMarker`'s own hit-test elements) rather than precomputed pixel
+   * bounds, since the browser's own hit-testing already accounts for any
+   * scale mismatch between `<Plot>`'s props and its rendered viewBox.
    */
   function isOverInset(e: PointerEvent): boolean {
     return (e.target as Element | null)?.closest?.('.dct-geo-inset') != null;
   }
 </script>
 
-{#snippet marker_(marker: GeoMarker, numericMargins: { top: number; right: number; bottom: number; left: number })}
-      {#if marker.type === 'graticule'}
-        <Graticule
-          step={marker.step}
-          stepX={marker.stepX}
-          stepY={marker.stepY}
-          stroke={marker.style?.stroke ?? 'currentColor'}
-          strokeWidth={marker.style?.strokeWidth ?? 0.5}
-          strokeOpacity={marker.style?.strokeOpacity ?? 0.3}
-          strokeDasharray={marker.style?.strokeDasharray}
-          style="vector-effect: non-scaling-stroke"
-        />
-      {:else if marker.type === 'sphere'}
-        <Sphere
-          fill={marker.style?.fill}
-          fillOpacity={marker.style?.fillOpacity}
-          stroke={marker.style?.stroke ?? 'currentColor'}
-          strokeWidth={marker.style?.strokeWidth ?? 1}
-          style="vector-effect: non-scaling-stroke"
-        />
-      {:else if marker.type === 'dot'}
-        {@const getDotValue = marker.value ? resolveAccessor(marker.value) : null}
-        {@const dotColorScale = getDotValue ? makeDotColorScale(marker) : null}
-        <Dot
-          data={marker.data}
-          x={marker.x}
-          y={marker.y}
-          r={marker.r ?? marker.style?.dotRadius ?? 4}
-          fill={dotColorScale && getDotValue
-            ? (d: Record<string, unknown>) => dotColorScale(Number(getDotValue(d)))
-            : (marker.style?.dotFill ?? cfg.palette[0])}
-          fillOpacity={marker.style?.dotFillOpacity ?? 1}
-          stroke={marker.style?.dotStroke}
-          strokeWidth={marker.style?.dotStrokeWidth}
-        />
-      {:else if marker.type === 'vector'}
-        <Vector
-          data={marker.data}
-          x={marker.x}
-          y={marker.y}
-          length={marker.length}
-          rotate={marker.rotate}
-          shape={marker.shape ?? 'arrow'}
-          anchor={marker.anchor}
-          fill={marker.style?.fill ?? 'currentColor'}
-          stroke={marker.style?.stroke}
-          strokeWidth={marker.style?.strokeWidth}
-        />
-      {:else if marker.type === 'link'}
-        {@const getX1 = resolveAccessor(marker.x1)}
-        {@const getY1 = resolveAccessor(marker.y1)}
-        {@const getX2 = resolveAccessor(marker.x2)}
-        {@const getY2 = resolveAccessor(marker.y2)}
-        {@const linkFeatures = marker.data.map((d) => ({
-          type: 'Feature' as const,
-          properties: {},
-          geometry: {
-            type: 'LineString' as const,
-            coordinates:
-              marker.curve === 'linear'
-                ? [
-                    [Number(getX1(d)), Number(getY1(d))],
-                    [Number(getX2(d)), Number(getY2(d))],
-                  ]
-                : greatCircleInterpolate(Number(getX1(d)), Number(getY1(d)), Number(getX2(d)), Number(getY2(d))),
-          },
-        }))}
-        <!--
-          No `fill` prop here, deliberately: svelteplot's channel resolution
-          (`toChannelOption`) treats *any* string value — including the
-          literal `'none'` this used to pass — as scale-worthy unless it
-          parses as a real CSS color, so `fill="none"` was getting run
-          through the plot's color scale and painted an arbitrary category
-          color instead of staying unfilled (confirmed by inspecting the
-          rendered DOM). Omitting the prop entirely leaves svelteplot's own
-          per-mark default in place, which is `fill: none` for an unfilled
-          channel — the outcome this mark actually wants, without the buggy
-          detour through the color scale.
-        -->
-        <Geo
-          class="link"
-          data={linkFeatures}
-          stroke={marker.style?.stroke ?? 'currentColor'}
-          strokeWidth={marker.style?.strokeWidth ?? 1}
-          strokeOpacity={marker.style?.strokeOpacity}
-          strokeDasharray={marker.style?.strokeDasharray}
-          style="vector-effect: non-scaling-stroke"
-        />
-      {:else if marker.type === 'contour'}
-        <!--
-          `fill`/`stroke`: no `?? 'none'` fallback here, deliberately — same
-          bug as the `link` marker above. Omitting the prop when
-          `marker.fill` is unset leaves svelteplot's own per-mark default in
-          place (`fill="none"`, per Contour's own doc comment), instead of
-          running the literal string `'none'` through the plot's color scale
-          (`'none'` isn't a recognized CSS color, so svelteplot doesn't treat
-          it as a literal output value the way it does e.g. `'currentColor'`).
-        -->
-        <ContourClipMarker mode={marker.clip} {features}>
-          <Contour
-            class="contour"
-            data={marker.data}
-            x={marker.x}
-            y={marker.y}
-            value={marker.value}
-            thresholds={marker.thresholds}
-            fill={marker.fill}
-            stroke={marker.stroke ?? 'currentColor'}
-            strokeWidth={marker.style?.strokeWidth}
-            fillOpacity={marker.style?.fillOpacity}
-            strokeOpacity={marker.style?.strokeOpacity}
-            blur={marker.blur}
-            interpolate={marker.interpolate}
-          />
-        </ContourClipMarker>
-      {:else if marker.type === 'component'}
-        <marker.component {...marker.props} data={marker.data ?? features} />
-      {:else if marker.type === 'inset'}
-        {@const insetContentBox = {
-          left: numericMargins.left,
-          top: numericMargins.top,
-          width: Math.max(0, width - numericMargins.left - numericMargins.right),
-          height: Math.max(0, height - numericMargins.top - numericMargins.bottom),
-        }}
-        <InsetMarker
-          marker={marker as GeoInsetMarker<TProps>}
-          features={allFeatures}
-          width={insetContentBox.width}
-          height={insetContentBox.height}
-          left={insetContentBox.left}
-          top={insetContentBox.top}
-          defaultFill={cfg.palette[0]}
-        />
-      {/if}
-{/snippet}
-
 <!--
-  `x`/`y`: pins the plot's generic linear x/y scales to the full lon/lat
-  range. Every geo-aware mark (Geo, Dot, Vector, Link, …) bypasses these
-  entirely when a projection is active, routing through it instead — except
-  svelteplot's own `Contour` mark, whose scatter/sampler-mode grid is
-  hardcoded to read `plot.scales.x`/`y` (see `Contour.svelte`) regardless of
-  any active projection. Left unset, that scale would auto-fit to just the
-  contour data's own point extent — a different frame than the projection's
-  own (typically whole-world) fit, so the contour would sit at the wrong
-  scale/position relative to the map under it. Pinning both to the world
-  range only helps `contour` markers align (best exactly under an
-  `equirectangular` projection, whose x/y truly are linear in lon/lat) and
-  is a no-op for every other mark type.
+  `x`/`y`: pins the plot's generic linear scales to the full lon/lat range.
+  Every geo-aware mark routes through the active projection instead, except
+  svelteplot's `Contour`, whose grid reads `plot.scales.x`/`y` directly —
+  this keeps a `contour` marker aligned with the map under it.
 -->
 <BasePlotLayout
   {width}
   {height}
-  data={hoverCandidates}
+  data={features}
   getX={hoverGetX}
   getY={hoverGetY}
-  {hoverPoints}
-  label={(f) => f.__id}
-  {tooltip}
-  {hoverActive}
-  hoverStrategy="punctual"
-  hoverSync={tooltip?.sync ?? false}
+  {hover}
   x={{ domain: [-180, 180] }}
   y={{ domain: [90, -90] }}
-  projection={finalProjection}
+  coordinates={resolvedCoordinates}
   {margins}
   marginEstimate={GEO_MARGIN_ESTIMATE}
-  excludeHover={isOverInset}
-  touchAction={zoomEnabled ? 'none' : undefined}
-  bind:containerEl
->
-  {#snippet children({ matchedPoints, numericMargins })}
-    <GeoLayout
-      {width}
-      {height}
-      {numericMargins}
-      zoomTransform={geoZoom.transform}
-      tileLayer={styles.tileLayer}
-      {dataLonLatBounds}
-    >
-      {#each markers as marker, i (marker.type + '-' + i)}
-        {#if isBehindMarker(marker)}
-          {@render marker_(marker, numericMargins)}
-        {/if}
-      {/each}
-
-      {#each styleGroups as group (JSON.stringify(group.style))}
-        <Geo
-          data={group.data}
-          fill={(d: TaggedFeature) => group.style.fill ?? resolveBaseFill(d)}
-          fillOpacity={group.style.fillOpacity ?? styles.fillOpacity ?? 1}
-          stroke={group.style.stroke ?? styles.stroke ?? cfg.axis.color}
-          strokeWidth={group.style.strokeWidth ?? styles.strokeWidth ?? 0.5}
-          style="vector-effect: non-scaling-stroke"
-          onclick={styles.onFeatureClick
-            ? (e: Event, d: TaggedFeature) => styles.onFeatureClick?.(d, e)
-            : undefined}
-        />
-      {/each}
-
-      {#each markers as marker, i (marker.type + '-' + i)}
-        {#if !isBehindMarker(marker)}
-          {@render marker_(marker, numericMargins)}
-        {/if}
-      {/each}
-    </GeoLayout>
-
-    {#if hoverMarkerConfig}
-      <HoverMarker
-        data={matchedPoints}
-        ruleX={null}
-        ruleY={null}
-        showLabels={hoverMarkerConfig.showLabels ?? true}
-        format={hoverMarkerConfig.format}
-        dotStyle={hoverMarkerConfig.dotStyle}
-        fontStyle={hoverMarkerConfig.fontStyle}
-      />
-    {/if}
-  {/snippet}
-</BasePlotLayout>
+  styles={resolvedStyles}
+  markers={({ setHoverMatch, clearHoverMatch }) =>
+    buildGeoMarkers({
+      styleGroups,
+      resolveBaseFill,
+      fillOpacity: styles.fillOpacity,
+      stroke: styles.stroke,
+      strokeWidth: styles.strokeWidth,
+      axisColor: cfg.axis.color,
+      onFeatureClick: styles.onFeatureClick,
+      markers,
+      hoverActive,
+      hoverPointById,
+      isOverInset,
+      setHoverMatch,
+      clearHoverMatch,
+    })}
+  geoAllFeatures={allFeatures}
+/>

package/dist/plots/geo/Plot.svelte.d.ts

@@ -1,10 +1,11 @@
-import type { BasePlotProps, GeoScalesConfig } from '../../types/plots/props';
+import type { BasePlotProps } from '../../types/plots/props';
+import type { GeoScalesConfig, CoordinatesConfig } from '../../types/layout/coordinates';
 import type { GeoFeature, GeoDataProps } from '../../types/plots/data/geo';
-import type { GeoStyles } from '../../types/plots/styles/geo';
+import type { GeoStylesConfig } from '../../types/layout/styles';
 import type { GeoSegmentStyle } from '../../types/plots/segments/common';
-import type { GeoMarker } from '../../types/markers/geo';
+import type { GeoMarkersConfig } from '../../types/markers/geo';
 declare function $$render<TProps extends Record<string, unknown>>(): {
-    props: BasePlotProps<GeoDataProps<TProps>, GeoFeature<TProps>, GeoStyles<TProps>, GeoSegmentStyle, GeoMarker, GeoScalesConfig>;
+    props: BasePlotProps<GeoDataProps<TProps>, GeoFeature<TProps>, GeoStylesConfig<TProps>, GeoSegmentStyle, GeoMarkersConfig, GeoScalesConfig, CoordinatesConfig>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/plots/geo/buildGeoMarkers.d.ts

@@ -0,0 +1,33 @@
+import type { MarkerConfig } from '../../types/markers/all';
+import type { GeoMarkersConfig } from '../../types/markers/geo';
+import type { GeoSegmentStyle } from '../../types/plots/segments/common';
+/** One resolved-style bucket of features, as grouped by `GeoPlot`'s own `styleGroups`. */
+export type GeoStyleGroup<TRow> = {
+    style: GeoSegmentStyle;
+    data: TRow[];
+};
+/**
+ * Every marker for one `GeoPlot` render, in final draw order: any authored
+ * marker with `behind: true`, then the base map itself (one `'geo'` marker
+ * per resolved feature style), then the rest of the authored markers in
+ * order, with any `hover` marker moved last.
+ */
+export declare function buildGeoMarkers<TRow extends Record<string, unknown> & {
+    __id: string;
+}>(args: {
+    styleGroups: GeoStyleGroup<TRow>[];
+    resolveBaseFill: (d: TRow) => string;
+    fillOpacity?: number;
+    stroke?: string;
+    strokeWidth?: number;
+    axisColor: string;
+    onFeatureClick?: (d: TRow, e: Event) => void;
+    markers: GeoMarkersConfig[];
+    hoverActive: boolean;
+    hoverPointById: Map<string, {
+        row: TRow;
+    }>;
+    isOverInset: (e: PointerEvent) => boolean;
+    setHoverMatch: (rows: TRow[]) => void;
+    clearHoverMatch: () => void;
+}): MarkerConfig[];