diff --git a/plugin-designs/gospel-internet/src/components/GiBoundedSet.vue b/plugin-designs/gospel-internet/src/components/GiBoundedSet.vue
index 5c622642c..5f4777e1a 100644
--- a/plugin-designs/gospel-internet/src/components/GiBoundedSet.vue
+++ b/plugin-designs/gospel-internet/src/components/GiBoundedSet.vue
@@ -28,7 +28,12 @@ import { formatCount } from '@map/utils/formatCount.js'
 import { useBoardState } from '../useBoard.js'
 import { useGiT } from '../useGiT.js'
 import { loadNearRows, indexFor } from '../nearRows.js'
+<<<<<<< HEAD
 import { layoutBoundedSet, boundedSetTally } from '@map/components/charts/boundedSet.js'
+=======
+import { layoutBoundedSet, boundedSetTally } from '../boundedSet.js'
+import GiBoundedSetMap from './GiBoundedSetMap.vue'
+>>>>>>> ea8dbe45 (Put the bounded set on the whiteboard too, with its boundary in map units)
 
 const T = useGiT()
 const board = useBoardState()
@@ -73,7 +78,7 @@ useShadowStyles(
   // can never push the figure out of its pane the way the legend did on the centered set.
   '.gbs{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;' +
     'justify-content:center;padding:46px 10px 10px;box-sizing:border-box;overflow:hidden;background:#f3f3f1}' +
-  '.gbs svg{max-width:100%;max-height:100%}' +
+  '.gbs-fig{position:relative;flex:1 1 auto;align-self:stretch;min-height:0;min-width:0}' +
   '.gbs-ring{fill:none;stroke:#3b463d;stroke-width:1.5}' +
   '.gbs-in{fill:#92b195}.gbs-out{fill:#6d766e;opacity:.65}' +
   '.gbs-cross-halo{stroke:var(--gbs-bg,#f3f3f1);stroke-width:7;stroke-linecap:square}' +
@@ -91,24 +96,11 @@ useShadowStyles(
       <span class="gbs-warn" dir="ltr">{{ failed }}</span>
     </p>
     <template v-else>
-      <svg viewBox="-280 -280 560 560" role="img"
-           :aria-label="T('gospelInternet.bounded.aria', 'Bounded set: the cross at the centre, reached groups inside the circle, unreached outside')">
-        <circle class="gbs-ring" cx="0" cy="0" r="120" />
-        <circle v-for="p in layout.outside" :key="p.id" class="gbs-out" :cx="p.x" :cy="p.y" r="2.2" />
-        <circle v-for="p in layout.inside" :key="p.id" class="gbs-in" :cx="p.x" :cy="p.y" r="2.2" />
-        <!-- The cross is drawn LAST, over the dots, and carries a background-coloured halo
-             beneath it. Reached groups are laid out across the whole inner disc, so some of
-             them sit exactly where the cross does; the layout is not changed to clear a space
-             for it, because that layout is shared with the printed component and moving dots
-             to suit a glyph would move them for every reader of both. Painting order and a
-             halo solve it where they should be solved — in the drawing. -->
-        <g class="gbs-cross">
-          <line class="gbs-cross-halo" x1="0" y1="-13" x2="0" y2="13" />
-          <line class="gbs-cross-halo" x1="-9" y1="-4" x2="9" y2="-4" />
-          <line class="gbs-cross-ink" x1="0" y1="-13" x2="0" y2="13" />
-          <line class="gbs-cross-ink" x1="-9" y1="-4" x2="9" y2="-4" />
-        </g>
-      </svg>
+      <!-- The whiteboard map replaces the static figure: the reader can pan and zoom, and group
+           names appear once they are close enough for the names to be readable. The chart still
+           claims one thing — which side of the line a group is on — so nothing here encodes
+           distance or rank. The PRINTED component stays SVG; paper has no zoom. -->
+      <div class="gbs-fig"><GiBoundedSetMap :groups="joined" /></div>
       <p class="gbs-cap">
         {{ T('gospelInternet.bounded.caption', 'Inside the circle: reached. Outside: unreached.') }}
         <b dir="ltr">{{ fmt(tally.inside) }} / {{ fmt(tally.outside) }}</b>
diff --git a/plugin-designs/gospel-internet/src/components/GiBoundedSetMap.vue b/plugin-designs/gospel-internet/src/components/GiBoundedSetMap.vue
new file mode 100644
index 000000000..7c0369a3c
--- /dev/null
+++ b/plugin-designs/gospel-internet/src/components/GiBoundedSetMap.vue
@@ -0,0 +1,108 @@
+<script setup>
+/**
+ * GiBoundedSetMap.vue — the bounded set on the whiteboard: one circle, reached inside,
+ * unreached outside, pannable and zoomable like its neighbour.
+ *
+ * The chart still makes exactly one claim — which side of the line a group is on — so nothing
+ * here encodes distance, ranking or gradient. What zoom buys is reading the names: at 2,100
+ * dots the inside is a cluster until you can get close to it.
+ *
+ * ★ THE BOUNDARY IS A DISH, AND ITS RADIUS MUST BE IN MAP UNITS. circle-radius is SCREEN
+ * PIXELS: a fixed value would hold its size on screen while the dots spread out from under it,
+ * so the circle would be correct at exactly one zoom and wrong at every other — and for dots
+ * near the edge the inside/outside reading would silently invert, which is the only thing this
+ * chart says. degreesToPixelRadius converts it with an exponential-base-2 interpolation, which
+ * is exact rather than approximate because pixels-per-degree doubles with every zoom level.
+ *
+ * The cross rides in the point collection as its own tier rather than as an overlay, so it pans
+ * and zooms with the drawing instead of floating over it.
+ */
+import { ref, shallowRef, computed, watch, onMounted, onBeforeUnmount, markRaw } from 'vue'
+import { useShadowStyles } from '@map/composables/useShadowStyles.js'
+import { labelFont } from '@map/maps/label-font.js'
+import { whiteboardProjection } from '@map/maps/whiteboard-projection.js'
+import { addTieredPointLayers } from '@map/charts/whiteboard/tiered-points.js'
+import { createBoardMap } from '../boardEngine.js'
+import { useBoardState } from '../useBoard.js'
+import { useGiT } from '../useGiT.js'
+import { layoutBoundedSet } from '../boundedSet.js'
+import { boundedSetFeatures, toFeatureCollection, dishRadiusDegrees, degreesToPixelRadius, TIERS } from '../setChartFeatures.js'
+
+const props = defineProps({ groups: { type: Array, default: () => [] } })
+
+const T = useGiT()
+const board = useBoardState()
+const el = ref(null)
+const mapRef = shallowRef(null)
+const handle = shallowRef(null)
+const failed = ref('')
+
+const R = 120, SPREAD = 260
+const project = whiteboardProjection({ extent: SPREAD })
+
+const layout = computed(() => layoutBoundedSet(props.groups, { r: R, spread: SPREAD }))
+const built = computed(() => boundedSetFeatures(layout.value, { population: (p) => p.pop ?? 0 }))
+
+// The cross is a feature, not an overlay, so it moves with the drawing. It is its own tier so
+// the label layer renders it at every zoom while group names stay hidden until you are close.
+const features = computed(() => [
+  ...built.value.features,
+  { id: '__centre', label: '✝', tier: 'centre', k: 3e9, u: 0, v: 0 },
+])
+const data = computed(() => toFeatureCollection(features.value, project).collection)
+
+const dishDegrees = computed(() => dishRadiusDegrees(R, project))
+
+onMounted(async () => {
+  try {
+    const made = await createBoardMap(el.value, board.profileConfig?.value || {},
+      { whiteboard: true, boundaries: false, center: [0, 0], zoom: 1 })
+    const map = markRaw(made.map || made)
+    mapRef.value = map
+    map.on('load', () => {
+      handle.value = markRaw(addTieredPointLayers(map, {
+        data: data.value,
+        sourceId: 'gbsm',
+        tiers: [
+          { tier: 'centre', minzoom: 0, weight: 'bold', offset: 0 },
+          { tier: TIERS.GROUP, minzoom: 5.2, weight: 'regular', offset: 0.7 },
+        ],
+        // Inside and outside are the whole claim, so they are the whole palette.
+        colorExpr: ['match', ['get', 'side'], 'in', '#92b195', 'out', '#6d766e', '#3b463d'],
+        radiusExpr: ['interpolate', ['linear'], ['zoom'], 1, 1.8, 6, 3.6],
+        opacityExpr: ['case', ['==', ['get', 'side'], 'out'], 0.65, 0.95],
+        dish: {
+          filter: ['==', ['get', 'id'], '__centre'],
+          radiusExpr: degreesToPixelRadius(dishDegrees.value),
+          color: 'rgba(0,0,0,0)',            // the boundary is a LINE, not a filled disc:
+          stroke: '#3b463d',                 // a fill would imply the inside is a region
+        },
+        font: labelFont,
+      }))
+    })
+  } catch (e) {
+    failed.value = String(e?.message || e)
+  }
+})
+
+watch(data, (d) => { try { mapRef.value?.getSource('gbsm')?.setData(d) } catch (_) {} })
+onBeforeUnmount(() => { try { handle.value?.destroy?.() } catch (_) {} ; try { mapRef.value?.remove?.() } catch (_) {} })
+
+useShadowStyles(
+  '.gbsm{position:absolute;inset:0;min-height:0;min-width:0}' +
+  '.gbsm-map{position:absolute;inset:0}' +
+  '.gbsm-fail{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;' +
+    'padding:16px;text-align:center;color:#3b463d;font-size:13px;background:#f3f3f1}',
+  'gi-bounded-set-map',
+)
+</script>
+
+<template>
+  <div class="gbsm">
+    <div ref="el" class="gbsm-map" />
+    <p v-if="failed" class="gbsm-fail">
+      {{ T('gospelInternet.bounded.failed', 'The reached/unreached table could not be loaded, so this chart is not drawn.') }}
+      <span dir="ltr">{{ failed }}</span>
+    </p>
+  </div>
+</template>
diff --git a/plugin-designs/gospel-internet/src/setChartFeatures.js b/plugin-designs/gospel-internet/src/setChartFeatures.js
index 14c85bb7e..66bc15a47 100644
--- a/plugin-designs/gospel-internet/src/setChartFeatures.js
+++ b/plugin-designs/gospel-internet/src/setChartFeatures.js
@@ -118,3 +118,20 @@ export function toFeatureCollection(features, project) {
 export function dishRadiusDegrees(r, project) {
   return Number(r || 0) * (project?.K ?? 0) * 360
 }
+
+/**
+ * A zoom expression that keeps a radius fixed in MAP units while the paint wants PIXELS.
+ *
+ * ★ circle-radius IS SCREEN PIXELS, and for the bounded set's boundary that is the wrong unit.
+ * A fixed pixel radius stays the same size on screen while the dots spread out from under it as
+ * the reader zooms — the circle would be right at exactly one zoom level and wrong at every
+ * other, with the inside/outside reading silently inverting for dots near the edge.
+ *
+ * The world is 512 x 2^zoom pixels across 360 degrees, so pixels-per-degree doubles with every
+ * zoom level — measured exactly 2.000000 between adjacent levels. An exponential-base-2
+ * interpolation therefore tracks map units exactly rather than approximately, with two stops.
+ */
+export function degreesToPixelRadius(degrees, { minZoom = 0, maxZoom = 22 } = {}) {
+  const px = (z) => Number(degrees || 0) * 512 * Math.pow(2, z) / 360
+  return ['interpolate', ['exponential', 2], ['zoom'], minZoom, px(minZoom), maxZoom, px(maxZoom)]
+}