@kahwee/sf-map-svg 1.0.0 → 1.2.0

package/dist/src/transit.js

@@ -0,0 +1,105 @@
+import stations from '../data/bart-stations.json' with { type: 'json' };
+import { createSFMap } from './index.js';
+/** A deliberately schematic, offline station-to-station animation. Starts paused. */
+export function createTransitAnimation() {
+    const host = Object.assign(document.createElement('div'), {
+        destroy: () => { },
+    });
+    const root = host.attachShadow({ mode: 'open' });
+    const map = createSFMap({ districtLabels: false, landmarks: true, labels: false });
+    root.innerHTML = `<style>
+    :host{display:block;font:14px system-ui;color:#244747;max-width:800px}
+    svg{display:block;width:100%;height:auto} .controls{display:flex;gap:12px;align-items:center;padding:12px;flex-wrap:wrap}
+    button{font:inherit;padding:10px 18px;border:1px solid #244747;border-radius:24px;background:#244747;color:white;cursor:pointer}
+    label{display:flex;align-items:center;gap:8px;flex:1} input{width:100%;min-width:100px;accent-color:#24789a}
+    p{margin:8px 12px;line-height:1.5} output{display:block;min-height:3em;margin:8px 12px}
+  </style>${map.svg}<div class="controls"><button type="button">Play</button><label>Journey <input aria-label="Journey progress" type="range" min="0" max="1000" value="0"></label></div><output aria-live="off"></output><p>Schematic BART journey. Straight connections between official station locations; not track geometry, a timetable, or live trains. One loop takes 28 seconds.</p>`;
+    const svg = root.querySelector('svg');
+    const ns = 'http://www.w3.org/2000/svg';
+    const points = stations.features.map((station) => map.project(station.geometry.coordinates));
+    const line = document.createElementNS(ns, 'polyline');
+    line.setAttribute('points', points.map((point) => point.join(',')).join(' '));
+    line.setAttribute('fill', 'none');
+    line.setAttribute('stroke', '#24789a');
+    line.setAttribute('stroke-width', '3');
+    line.setAttribute('stroke-dasharray', '5 5');
+    svg.append(line);
+    for (const [x, y] of points) {
+        const dot = document.createElementNS(ns, 'circle');
+        dot.setAttribute('cx', String(x));
+        dot.setAttribute('cy', String(y));
+        dot.setAttribute('r', '4');
+        dot.setAttribute('fill', 'white');
+        dot.setAttribute('stroke', '#24789a');
+        dot.setAttribute('stroke-width', '2');
+        svg.append(dot);
+    }
+    const train = document.createElementNS(ns, 'circle');
+    train.setAttribute('r', '7');
+    train.setAttribute('fill', '#a85036');
+    train.setAttribute('stroke', 'white');
+    train.setAttribute('stroke-width', '2');
+    svg.append(train);
+    const button = root.querySelector('button');
+    const slider = root.querySelector('input');
+    const output = root.querySelector('output');
+    let progress = 0;
+    let frame = 0;
+    let previous = 0;
+    let playing = false;
+    let destroyed = false;
+    function draw() {
+        const position = progress * (points.length - 1);
+        const index = Math.min(Math.floor(position), points.length - 2);
+        const fraction = position - index;
+        const from = points[index];
+        const to = points[index + 1];
+        train.setAttribute('cx', String(from[0] + (to[0] - from[0]) * fraction));
+        train.setAttribute('cy', String(from[1] + (to[1] - from[1]) * fraction));
+        slider.value = String(Math.round(progress * 1000));
+        output.textContent = `${stations.features[index].properties.name} → ${stations.features[index + 1].properties.name}`;
+    }
+    function tick(now) {
+        if (!playing)
+            return;
+        if (previous)
+            progress = (progress + Math.min(now - previous, 100) / 28000) % 1;
+        previous = now;
+        draw();
+        frame = requestAnimationFrame(tick);
+    }
+    function pause() {
+        playing = false;
+        cancelAnimationFrame(frame);
+        previous = 0;
+        button.textContent = 'Play';
+    }
+    button.addEventListener('click', () => {
+        if (destroyed)
+            return;
+        if (playing)
+            pause();
+        else {
+            playing = true;
+            button.textContent = 'Pause';
+            frame = requestAnimationFrame(tick);
+        }
+    });
+    slider.addEventListener('input', () => {
+        pause();
+        progress = Number(slider.value) / 1000;
+        draw();
+    });
+    const visibility = () => {
+        if (document.hidden)
+            pause();
+    };
+    document.addEventListener('visibilitychange', visibility);
+    host.destroy = () => {
+        destroyed = true;
+        pause();
+        document.removeEventListener('visibilitychange', visibility);
+    };
+    draw();
+    return host;
+}

package/dist/src/types.d.ts

@@ -8,6 +8,18 @@ export interface MapMarker {
     selected?: boolean;
     color?: string;
 }
+export interface MapOverlay {
+    id: string;
+    geometry: Extract<Geometry, {
+        type: 'LineString' | 'MultiLineString' | 'Polygon' | 'MultiPolygon';
+    }>;
+    stroke?: string;
+    strokeWidth?: number;
+    fill?: string;
+    fillOpacity?: number;
+    visible?: boolean;
+    label?: string;
+}
 export interface SFMapOptions {
     theme?: 'districts' | 'transit';
     width?: number;
@@ -25,6 +37,7 @@ export interface SFMapOptions {
     landmarks?: boolean;
     bartStations?: boolean;
     markers?: MapMarker[];
+    overlays?: readonly MapOverlay[];
     title?: string;
     idPrefix?: string;
     colors?: Partial<Record<'water' | 'land' | 'district' | 'neighborhood' | 'highway' | 'road' | 'park' | 'landmark' | 'bart' | 'label' | 'marker' | 'selected', string>>;
@@ -81,6 +94,12 @@ export interface NeighborhoodExplorerOptions {
     markerColor?: string;
     selectedMarkerColor?: string;
     onMarkerActivate?: (marker: MapMarker) => void;
+    overlays?: readonly MapOverlay[];
+    onOverlayActivate?: (overlay: MapOverlay) => void;
+    /** Stable theme tokens consumed by the explorer chrome. */
+    style?: Partial<Record<'ink' | 'surface' | 'accent' | 'border' | 'focus' | 'controlGap' | 'font', string>>;
+    strings?: Partial<Record<'title' | 'mode' | 'source' | 'search' | 'chooseNeighborhood' | 'chooseMarker' | 'touchNavigation' | 'reset' | 'emptyResults' | 'gestureHelp', string>>;
+    controls?: Partial<Record<'zoom' | 'pan' | 'reset' | 'labels' | 'touch' | 'legend', boolean>>;
 }
 export interface NeighborhoodExplorerElement extends HTMLElement {
     selectNeighborhood(name: string | null, options?: {
@@ -100,9 +119,14 @@ export interface NeighborhoodExplorerElement extends HTMLElement {
     /** Explicitly engage map touch gestures; false restores page gestures. */
     setTouchNavigation(enabled: boolean): void;
     setMarkers(markers: readonly MapMarker[]): void;
+    setOverlays(overlays: readonly MapOverlay[]): void;
     selectMarker(id: string | null, options?: {
         fit?: boolean;
     }): boolean;
     getSelectedMarker(): MapMarker | null;
     destroy(): void;
 }
+/** Paused-by-default schematic BART animation with keyboard-operable controls. */
+export interface TransitAnimationElement extends HTMLElement {
+    destroy(): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahwee/sf-map-svg",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Offline SVG maps of San Francisco with district boundaries, parks, landmarks, and BART stations.",
   "type": "module",
   "main": "./dist/src/index.js",
@@ -10,6 +10,10 @@
       "types": "./dist/src/index.d.ts",
       "import": "./dist/src/index.js"
     },
+    "./custom-map": {
+      "types": "./dist/src/custom-map.d.ts",
+      "import": "./dist/src/custom-map.js"
+    },
     "./data": {
       "types": "./dist/data/index.d.ts",
       "import": "./dist/data/index.js"
@@ -26,6 +30,10 @@
     "./interactive": {
       "types": "./dist/src/interactive.d.ts",
       "import": "./dist/src/interactive.js"
+    },
+    "./transit": {
+      "types": "./dist/src/transit.d.ts",
+      "import": "./dist/src/transit.js"
     }
   },
   "files": [
@@ -53,7 +61,7 @@
     "typescript": "^7.0.2",
     "vite": "^8.3.1"
   },
-  "homepage": "https://github.com/kahwee/sf-map-svg#readme",
+  "homepage": "https://kahwee.github.io/sf-map-svg/",
   "bugs": {
     "url": "https://github.com/kahwee/sf-map-svg/issues"
   },
@@ -82,6 +90,7 @@
     "data:normalize-realtor": "node scripts/normalize-realtor.mjs",
     "test:package": "node scripts/smoke-package.mjs",
     "build": "node scripts/build.mjs",
-    "lint": "biome check ."
+    "lint": "biome check .",
+    "build:pages": "pnpm build && node scripts/build-pages.mjs"
   }
 }