geotimelapse 0.1.0

package/src/map.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import type { DeckGLRef } from 'deck.gl';
+import DeckGL, { WebMercatorViewport } from 'deck.gl';
+import type { MapRef } from 'react-map-gl/mapbox';
+import Map from 'react-map-gl/mapbox';
+
+import type { GlowTuning } from './glow-layer.js';
+import { buildGlowLayers, DEFAULT_GLOW_TUNING } from './glow-layer.js';
+import type { FrameBids } from './hooks.js';
+import { mapStyle } from './map-style.js';
+import type { MapBounds } from './types.js';
+
+interface ViewState {
+  longitude: number;
+  latitude: number;
+  zoom: number;
+  pitch: number;
+  bearing: number;
+}
+
+const CONTINENTAL_US_VIEW: ViewState = {
+  longitude: -98.5,
+  latitude: 38.8,
+  zoom: 4,
+  pitch: 0,
+  bearing: 0,
+};
+
+export default function TimelapseMap({
+  frames,
+  mapboxAccessToken,
+  initialBounds,
+  tuning,
+  onBoundsChange,
+}: {
+  frames: FrameBids[];
+  mapboxAccessToken: string;
+  initialBounds?: MapBounds;
+  tuning?: Partial<GlowTuning>;
+  onBoundsChange: (bounds: MapBounds) => void;
+}) {
+  const deckRef = useRef<DeckGLRef>(null);
+  const mapRef = useRef<MapRef>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  // Fitting bounds needs the container size, unknown before the first layout;
+  // the map mounts one frame later, invisible on the black stage.
+  const [initialViewState, setInitialViewState] = useState<ViewState | null>(
+    initialBounds ? null : CONTINENTAL_US_VIEW,
+  );
+
+  useLayoutEffect(() => {
+    if (!initialBounds || initialViewState) return;
+    const container = containerRef.current;
+    if (!container || container.clientWidth === 0 || container.clientHeight === 0) return;
+    const { longitude, latitude, zoom } = new WebMercatorViewport({
+      width: container.clientWidth,
+      height: container.clientHeight,
+    }).fitBounds([
+      [initialBounds.west, initialBounds.south],
+      [initialBounds.east, initialBounds.north],
+    ]);
+    setInitialViewState({ longitude, latitude, zoom, pitch: 0, bearing: 0 });
+  }, [initialBounds, initialViewState]);
+
+  // Mapbox misses the container resize on fullscreen toggles (deck redraws,
+  // the basemap stays stale); poke it once the new dimensions have settled.
+  useEffect(() => {
+    const onFullscreenChange = () => {
+      requestAnimationFrame(() => mapRef.current?.resize());
+      setTimeout(() => mapRef.current?.resize(), 350);
+    };
+    document.addEventListener('fullscreenchange', onFullscreenChange);
+    return () => document.removeEventListener('fullscreenchange', onFullscreenChange);
+  }, []);
+
+  // Read from the deck viewport (not the event's view state) so the numbers
+  // include the canvas dimensions; one frame of lag is fine for consumers.
+  const reportBounds = () => {
+    const viewport = deckRef.current?.deck?.getViewports()[0];
+    if (!viewport) return;
+    const [west, south, east, north] = viewport.getBounds();
+    const round = (value: number) => Math.round(value * 1000) / 1000;
+    onBoundsChange({ west: round(west), south: round(south), east: round(east), north: round(north) });
+  };
+
+  const layers = buildGlowLayers(frames, { ...DEFAULT_GLOW_TUNING, ...tuning });
+
+  return (
+    <div ref={containerRef} className="absolute inset-0">
+      {initialViewState && (
+        <DeckGL
+          ref={deckRef}
+          initialViewState={initialViewState}
+          controller
+          layers={layers}
+          onLoad={reportBounds}
+          onViewStateChange={reportBounds}
+          onResize={reportBounds}
+        >
+          <Map ref={mapRef} mapboxAccessToken={mapboxAccessToken} mapStyle={mapStyle} />
+        </DeckGL>
+      )}
+    </div>
+  );
+}

package/src/player-bar.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+import { DAY_SECONDS, useDaySeconds, useTimelapseClock } from './clock.js';
+import { formatDayTime, formatDayTime24, formatHourLabel } from './utils.js';
+
+const SEEK_STEP = 60;
+const BAR_PITCH_PX = 1;
+
+const PLAYED_ALPHA = 0.55;
+const CURRENT_ALPHA = 1;
+const FUTURE_ALPHA = 0.22;
+
+// The activity plot is the seek bar: event volume per minute drawn as 1px
+// bars, played minutes brighter than upcoming ones, current one highlighted.
+function ActivitySeekBar({ activity }: { activity: Float32Array | null }) {
+  const clock = useTimelapseClock();
+  const daySeconds = useDaySeconds();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const draw = () => {
+      const { width, height } = canvas.getBoundingClientRect();
+      const scale = window.devicePixelRatio || 1;
+      canvas.width = width * scale;
+      canvas.height = height * scale;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+      ctx.scale(scale, scale);
+      const fraction = daySeconds / DAY_SECONDS;
+      if (activity) {
+        const bucketCount = Math.max(1, Math.floor(width / BAR_PITCH_PX));
+        // Average per minute, so a partial last bucket doesn't read as a dip.
+        const sums = new Float32Array(bucketCount);
+        const minutes = new Float32Array(bucketCount);
+        for (let minute = 0; minute < activity.length; minute++) {
+          const bucket = Math.min(Math.floor((minute / activity.length) * bucketCount), bucketCount - 1);
+          sums[bucket] += activity[minute];
+          minutes[bucket] += 1;
+        }
+        let max = 1;
+        for (let bucket = 0; bucket < bucketCount; bucket++) {
+          sums[bucket] /= Math.max(minutes[bucket], 1);
+          max = Math.max(max, sums[bucket]);
+        }
+        const pitch = width / bucketCount;
+        const barWidth = Math.max(pitch - 1, 1);
+        const currentBucket = Math.min(Math.floor(fraction * bucketCount), bucketCount - 1);
+        for (let bucket = 0; bucket < bucketCount; bucket++) {
+          const alpha = bucket < currentBucket ? PLAYED_ALPHA : bucket === currentBucket ? CURRENT_ALPHA : FUTURE_ALPHA;
+          ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`;
+          const barHeight = (sums[bucket] / max) * height;
+          ctx.fillRect(bucket * pitch, height - barHeight, barWidth, barHeight);
+        }
+      }
+      // Full-height playhead at the exact time, finer than the minute bars.
+      ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
+      ctx.fillRect(fraction * (width - 1), 0, 1, height);
+    };
+    draw();
+    const observer = new ResizeObserver(draw);
+    observer.observe(canvas);
+    return () => observer.disconnect();
+  }, [activity, daySeconds]);
+
+  const seekFromPointer = (event: React.PointerEvent<HTMLCanvasElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const fraction = Math.min(Math.max((event.clientX - rect.left) / rect.width, 0), 1);
+    clock.seek(Math.round((fraction * DAY_SECONDS) / SEEK_STEP) * SEEK_STEP);
+  };
+
+  const seekBy = (offset: number) => {
+    clock.seek(Math.min(Math.max(clock.getDaySeconds() + offset, 0), DAY_SECONDS));
+  };
+
+  return (
+    <canvas
+      ref={canvasRef}
+      role="slider"
+      aria-label="Time of day"
+      aria-valuemin={0}
+      aria-valuemax={DAY_SECONDS}
+      aria-valuenow={daySeconds}
+      aria-valuetext={formatDayTime(daySeconds)}
+      tabIndex={0}
+      className="h-8 w-full cursor-pointer select-none focus-visible:outline-1 focus-visible:outline-white/60"
+      onPointerDown={(event) => {
+        seekFromPointer(event);
+        // Capture keeps the drag scrubbing outside the canvas bounds; a
+        // failed capture must never block the seek itself.
+        try {
+          event.currentTarget.setPointerCapture(event.pointerId);
+        } catch {
+          // no active pointer (synthetic events, stale pointer id)
+        }
+      }}
+      onPointerMove={(event) => {
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) seekFromPointer(event);
+      }}
+      onKeyDown={(event) => {
+        const step = event.shiftKey ? 10 * SEEK_STEP : SEEK_STEP;
+        if (event.key === 'ArrowLeft') seekBy(-step);
+        else if (event.key === 'ArrowRight') seekBy(step);
+        else if (event.key === 'PageDown') seekBy(-10 * SEEK_STEP);
+        else if (event.key === 'PageUp') seekBy(10 * SEEK_STEP);
+        else if (event.key === 'Home') clock.seek(0);
+        else if (event.key === 'End') clock.seek(DAY_SECONDS);
+        else return;
+        event.preventDefault();
+      }}
+    />
+  );
+}
+
+// Hour axis under the seek bar: a tick per hour, a label every two.
+function HourAxis() {
+  return (
+    <div className="relative mt-0.5 h-3 font-mono text-[9px] text-white/40 tabular-nums">
+      {Array.from({ length: 25 }, (_, hour) => (
+        <div key={hour} className="absolute top-0" style={{ left: `${(hour / 24) * 100}%` }}>
+          <div className="h-1 w-px bg-white/30" />
+          {hour % 2 === 0 && (
+            <div className={hour === 0 ? '' : hour === 24 ? '-translate-x-full' : '-translate-x-1/2'}>
+              {formatHourLabel(hour)}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function PlayerBar({ activity }: { activity: Float32Array | null }) {
+  const [hover, setHover] = useState<{ x: number; label: string } | null>(null);
+
+  return (
+    <div className="absolute inset-x-4 bottom-4 flex items-center gap-4 rounded-lg bg-black/60 px-4 py-3 text-white backdrop-blur-sm">
+      <div
+        className="relative min-w-0 flex-1"
+        onPointerMove={(event) => {
+          const rect = event.currentTarget.getBoundingClientRect();
+          const fraction = Math.min(Math.max((event.clientX - rect.left) / rect.width, 0), 1);
+          const minuteSeconds = Math.floor((fraction * DAY_SECONDS) / 60) * 60;
+          setHover({ x: event.clientX - rect.left, label: formatDayTime24(minuteSeconds) });
+        }}
+        onPointerLeave={() => setHover(null)}
+      >
+        {hover && (
+          <div
+            className="pointer-events-none absolute bottom-full mb-2 -translate-x-1/2 rounded-sm bg-black/80 px-1.5 py-0.5 font-mono text-[10px] tabular-nums"
+            style={{ left: hover.x }}
+          >
+            {hover.label}
+          </div>
+        )}
+        <ActivitySeekBar activity={activity} />
+        <HourAxis />
+      </div>
+    </div>
+  );
+}

package/src/settings-menu.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import type { ComponentType, SVGProps } from 'react';
+import { useState } from 'react';
+import {
+  ArrowPathIcon,
+  ArrowsPointingInIcon,
+  ArrowsPointingOutIcon,
+  Cog6ToothIcon,
+  PauseIcon,
+  PlayIcon,
+  ViewfinderCircleIcon,
+} from '@heroicons/react/20/solid';
+
+import { useMapBounds } from './bounds.js';
+import { useIsPlaying, useTimelapseClock } from './clock.js';
+import type { FrameBids } from './hooks.js';
+import { FRAME_HISTORY } from './hooks.js';
+
+interface RowProps {
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
+  label: string;
+  hint?: string;
+  state?: boolean;
+  onClick: () => void;
+}
+
+function Row({ icon: Icon, label, hint, state, onClick }: RowProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-white/10"
+    >
+      <Icon className="size-4 shrink-0" />
+      <span className="flex-1">
+        {label}
+        {hint && <span className="text-white/50"> {hint}</span>}
+      </span>
+      {state !== undefined && <span className={state ? '' : 'text-white/40'}>{state ? 'on' : 'off'}</span>}
+    </button>
+  );
+}
+
+interface SettingsMenuProps {
+  visible: boolean;
+  fullscreen: boolean;
+  onToggleFullscreen: () => void;
+  loop: boolean;
+  onToggleLoop: () => void;
+  scoped: boolean;
+  onToggleScoped: () => void;
+  frame?: FrameBids;
+  fps: number;
+  /** Ghost frames currently rendered by the adaptive trail. */
+  trailFrames: number;
+}
+
+export default function SettingsMenu({
+  visible,
+  fullscreen,
+  onToggleFullscreen,
+  loop,
+  onToggleLoop,
+  scoped,
+  onToggleScoped,
+  frame,
+  fps,
+  trailFrames,
+}: SettingsMenuProps) {
+  const clock = useTimelapseClock();
+  const playing = useIsPlaying();
+  const bounds = useMapBounds();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div
+      className={`absolute top-4 left-4 font-mono text-xs text-white transition-opacity duration-250 ${
+        visible ? 'opacity-100' : 'pointer-events-none opacity-0'
+      }`}
+    >
+      <button
+        type="button"
+        aria-label="Settings"
+        onClick={() => setOpen((wasOpen) => !wasOpen)}
+        className="cursor-pointer rounded-lg bg-black/60 p-2 opacity-80 backdrop-blur-sm hover:opacity-100"
+      >
+        <Cog6ToothIcon className="size-5" />
+      </button>
+      {open && (
+        <div className="mt-2 w-64 rounded-lg bg-black/60 p-2 backdrop-blur-sm">
+          <Row
+            icon={fullscreen ? ArrowsPointingInIcon : ArrowsPointingOutIcon}
+            label={fullscreen ? 'Exit full screen' : 'Full screen'}
+            hint="([Esc] to quit)"
+            onClick={onToggleFullscreen}
+          />
+          <Row icon={playing ? PauseIcon : PlayIcon} label={playing ? 'Pause' : 'Play'} onClick={clock.toggle} />
+          <Row icon={ArrowPathIcon} label="Loop" state={loop} onClick={onToggleLoop} />
+          <Row icon={ViewfinderCircleIcon} label="Scope data to view" state={scoped} onClick={onToggleScoped} />
+          <div className="mt-2 space-y-1 border-t border-white/10 px-2 pt-2 text-white/50 tabular-nums">
+            {bounds && (
+              <div>
+                {bounds.west.toFixed(1)}, {bounds.south.toFixed(1)} → {bounds.east.toFixed(1)},{' '}
+                {bounds.north.toFixed(1)}
+              </div>
+            )}
+            <div>
+              {fps} fps · {trailFrames}/{FRAME_HISTORY} ghosts
+              {frame ? ` · ${frame.count.toLocaleString('en-US')} pts · ${frame.queryMs} ms` : ''}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/synthetic-source.test.ts

@@ -0,0 +1,58 @@
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+
+import { createSyntheticSource } from './synthetic-source.js';
+
+test('a seed fully determines the day', async () => {
+  const first = createSyntheticSource({ total: 5_000, seed: 7 });
+  const second = createSyntheticSource({ total: 5_000, seed: 7 });
+  await first.load();
+  await second.load();
+  const [frameA, frameB] = await Promise.all([first.frame(0, 86_400), second.frame(0, 86_400)]);
+  assert.deepEqual(frameA.positions, frameB.positions);
+  assert.deepEqual(frameA.weights, frameB.weights);
+  await first.dispose();
+  await second.dispose();
+});
+
+test('totals accumulate to the requested volume', async () => {
+  const source = createSyntheticSource({ total: 5_000, seed: 42 });
+  await source.load();
+  assert.deepEqual(await source.totals(0), { count: 0, value: 0 });
+  assert.deepEqual(await source.totals(86_400), { count: 5_000, value: 5_000 });
+  await source.dispose();
+});
+
+test('the day mixes clusters, fog and geometric point stacks', async () => {
+  const source = createSyntheticSource({ total: 10_000, seed: 42 });
+  await source.load();
+  const day = await source.frame(0, 86_400);
+  const weightSum = Array.from(day.weights).reduce((sum, weight) => sum + weight, 0);
+  assert.equal(weightSum, 10_000);
+  const stacks = Array.from(day.weights)
+    .filter((weight) => weight > 1)
+    .sort((a, b) => b - a);
+  assert.equal(stacks.length, 5);
+  for (let i = 1; i < stacks.length; i++) {
+    const ratio = stacks[i - 1] / stacks[i];
+    assert.ok(ratio > 1.4 && ratio < 2.8, `stack ratio ${ratio}`);
+  }
+  await source.dispose();
+});
+
+test('setScope filters the reads and null restores them', async () => {
+  const source = createSyntheticSource({ total: 5_000, seed: 42 });
+  await source.load();
+  const world = await source.totals(86_400);
+
+  await source.setScope({ west: -100, south: 24.5, east: -66.9, north: 49.4 });
+  const east = await source.totals(86_400);
+  assert.ok(east.count > 0 && east.count < world.count);
+  const activity = await source.activity();
+  const activitySum = Array.from(activity).reduce((sum, count) => sum + count, 0);
+  assert.equal(activitySum, east.count);
+
+  await source.setScope(null);
+  assert.deepEqual(await source.totals(86_400), world);
+  await source.dispose();
+});

package/src/synthetic-source.ts

@@ -0,0 +1,218 @@
+import type { FramePoints, GeoTimelapseSource, MapBounds, Totals } from './types.js';
+
+export interface SyntheticSourceOptions {
+  /** Total events over the day. */
+  total: number;
+  /** Area events land in; defaults to the continental US. */
+  bounds?: MapBounds;
+  clusterCount?: number;
+  /** Same seed, same day — handy to compare tunings. */
+  seed?: number;
+}
+
+// Every dataset mixes the three spatial regimes the renderer must handle:
+// gaussian clusters, a diffuse background, and exact-spot stacks of
+// geometrically increasing size (to exercise the weight-driven brightness).
+const UNIFORM_SHARE = 0.25;
+const POINT_SHARE = 0.05;
+const POINT_STACKS = 5;
+
+const CONTINENTAL_US: MapBounds = { west: -124.7, south: 24.5, east: -66.9, north: 49.4 };
+const MINUTES = 24 * 60;
+
+// Deterministic PRNG (mulberry32).
+function makeRng(seed: number): () => number {
+  let state = seed >>> 0;
+  return () => {
+    state = (state + 0x6d2b79f5) | 0;
+    let t = Math.imul(state ^ (state >>> 15), 1 | state);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+// Quiet night, morning bump, evening prime-time peak.
+function diurnalWeight(minute: number): number {
+  const hour = minute / 60;
+  const morning = Math.exp(-((hour - 8.5) ** 2) / (2 * 2.2 ** 2)) * 0.6;
+  const evening = Math.exp(-((hour - 20.5) ** 2) / (2 * 2.8 ** 2)) * 1.4;
+  return 0.25 + morning + evening;
+}
+
+function lowerBound(array: Uint32Array, value: number): number {
+  let low = 0;
+  let high = array.length;
+  while (low < high) {
+    const mid = (low + high) >>> 1;
+    if (array[mid] < value) low = mid + 1;
+    else high = mid;
+  }
+  return low;
+}
+
+/**
+ * A GeoTimelapseSource generating a deterministic synthetic day in memory —
+ * no engine, no network. Made for benches, demos and tests: pick a volume and
+ * the component runs on it like on real data.
+ * Each event has value 1, so totals().value mirrors the event count.
+ */
+export function createSyntheticSource({
+  total,
+  bounds = CONTINENTAL_US,
+  clusterCount = 12,
+  seed = 42,
+}: SyntheticSourceOptions): GeoTimelapseSource {
+  let loadPromise: Promise<void> | null = null;
+  let seconds = new Uint32Array(0);
+  let lons = new Float32Array(0);
+  let lats = new Float32Array(0);
+  let minuteCounts = new Float32Array(MINUTES);
+  let scopedSeconds: Uint32Array | null = null;
+  let scopedMinuteCounts: Float32Array | null = null;
+
+  const load = (onProgress?: (loaded: number, totalBytes: number) => void) =>
+    (loadPromise ??= (async () => {
+      const rng = makeRng(seed);
+
+      // Spread the total over minutes following the diurnal curve.
+      const weights = Array.from({ length: MINUTES }, (_, minute) => diurnalWeight(minute));
+      const weightSum = weights.reduce((a, b) => a + b, 0);
+      const counts = weights.map((w) => Math.floor((total * w) / weightSum));
+      let remainder = total - counts.reduce((a, b) => a + b, 0);
+      for (let minute = 0; remainder > 0; minute = (minute + 7) % MINUTES) {
+        counts[minute] += 1;
+        remainder -= 1;
+      }
+
+      seconds = new Uint32Array(total);
+      lons = new Float32Array(total);
+      lats = new Float32Array(total);
+
+      const width = bounds.east - bounds.west;
+      const height = bounds.north - bounds.south;
+      const hotspots = Array.from({ length: POINT_STACKS }, (_, i) => ({
+        lon: bounds.west + width * (0.2 + 0.6 * rng()),
+        lat: bounds.south + height * (0.2 + 0.6 * rng()),
+        pull: 2 ** i,
+      }));
+      const hotspotPullSum = hotspots.reduce((a, h) => a + h.pull, 0);
+      const centers = Array.from({ length: clusterCount }, () => ({
+        lon: bounds.west + width * (0.1 + 0.8 * rng()),
+        lat: bounds.south + height * (0.1 + 0.8 * rng()),
+        pull: 0.3 + rng(),
+      }));
+      const pullSum = centers.reduce((a, c) => a + c.pull, 0);
+      const sigma = Math.min(width, height) / 40;
+      // Box-Muller, one gaussian pair per call.
+      const gaussian = () => {
+        const radius = Math.sqrt(-2 * Math.log(1 - rng()));
+        const angle = 2 * Math.PI * rng();
+        return [radius * Math.cos(angle), radius * Math.sin(angle)];
+      };
+
+      let index = 0;
+      for (let minute = 0; minute < MINUTES; minute++) {
+        const count = counts[minute];
+        minuteCounts[minute] = count;
+        for (let i = 0; i < count; i++, index++) {
+          seconds[index] = minute * 60 + Math.min(Math.floor((i + rng()) * (60 / Math.max(count, 1))), 59);
+          const roll = rng();
+          if (roll < POINT_SHARE) {
+            let pick = rng() * hotspotPullSum;
+            let hotspot = hotspots[0];
+            for (const candidate of hotspots) {
+              pick -= candidate.pull;
+              if (pick <= 0) {
+                hotspot = candidate;
+                break;
+              }
+            }
+            lons[index] = hotspot.lon;
+            lats[index] = hotspot.lat;
+          } else if (roll < POINT_SHARE + UNIFORM_SHARE) {
+            lons[index] = bounds.west + width * rng();
+            lats[index] = bounds.south + height * rng();
+          } else {
+            let pick = rng() * pullSum;
+            let center = centers[0];
+            for (const candidate of centers) {
+              pick -= candidate.pull;
+              if (pick <= 0) {
+                center = candidate;
+                break;
+              }
+            }
+            const [dx, dy] = gaussian();
+            lons[index] = center.lon + dx * sigma;
+            lats[index] = center.lat + dy * sigma;
+          }
+        }
+        if (minute % 288 === 0) onProgress?.(index, total);
+      }
+      onProgress?.(total, total);
+    })());
+
+  const frame = async (fromSecond: number, toSecond: number): Promise<FramePoints> => {
+    const start = lowerBound(seconds, Math.floor(fromSecond));
+    const end = lowerBound(seconds, Math.floor(toSecond));
+    const byLocation = new Map<string, { lon: number; lat: number; weight: number }>();
+    for (let i = start; i < end; i++) {
+      const key = `${lons[i]},${lats[i]}`;
+      const entry = byLocation.get(key);
+      if (entry) entry.weight += 1;
+      else byLocation.set(key, { lon: lons[i], lat: lats[i], weight: 1 });
+    }
+    const positions = new Float32Array(byLocation.size * 2);
+    const weights = new Float32Array(byLocation.size);
+    let i = 0;
+    for (const { lon, lat, weight } of byLocation.values()) {
+      positions[2 * i] = lon;
+      positions[2 * i + 1] = lat;
+      weights[i] = weight;
+      i += 1;
+    }
+    return { positions, weights, count: byLocation.size };
+  };
+
+  const totals = async (second: number): Promise<Totals> => {
+    const array = scopedSeconds ?? seconds;
+    const count = lowerBound(array, Math.floor(second));
+    return { count, value: count };
+  };
+
+  const activity = async (): Promise<Float32Array> => Float32Array.from(scopedMinuteCounts ?? minuteCounts);
+
+  const setScope = async (scope: MapBounds | null): Promise<void> => {
+    if (!scope) {
+      scopedSeconds = null;
+      scopedMinuteCounts = null;
+      return;
+    }
+    const kept = new Uint32Array(seconds.length);
+    const minutes = new Float32Array(MINUTES);
+    let size = 0;
+    for (let i = 0; i < seconds.length; i++) {
+      const lon = lons[i];
+      const lat = lats[i];
+      if (lon >= scope.west && lon <= scope.east && lat >= scope.south && lat <= scope.north) {
+        kept[size] = seconds[i];
+        size += 1;
+        minutes[Math.floor(seconds[i] / 60)] += 1;
+      }
+    }
+    scopedSeconds = kept.subarray(0, size);
+    scopedMinuteCounts = minutes;
+  };
+
+  const dispose = async (): Promise<void> => {
+    seconds = new Uint32Array(0);
+    lons = new Float32Array(0);
+    lats = new Float32Array(0);
+    minuteCounts = new Float32Array(MINUTES);
+    scopedSeconds = null;
+    scopedMinuteCounts = null;
+    loadPromise = null;
+  };
+
+  return { load, frame, totals, activity, setScope, dispose };
+}