@kahwee/sf-map-svg 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -4,6 +4,22 @@ User-visible changes are recorded here. Unreleased entries describe changes on `
 
 ## Unreleased
 
+- Make the measures atlas a full-screen map with floating controls, expandable mobile results, touch pan/zoom, overlay tables and sources, and a distraction-free focus view.
+
+- Redesign the measures explorer around visible district maps, side-by-side comparisons, Yes/No and district-color modes, keyboard zoom/pan, district fitting, stable labels, and SVG/CSV exports.
+
+- Add a Pages ballot-measures explorer for certified June 2026 local results, with district comparisons, shareable selections, and official data downloads.
+
+- Build public Pages demos and SVG downloads from the published npm version, with visible release metadata, installation copying, release links, and social previews.
+- Refresh Pages after successful publishing and improve mobile layout and release documentation.
+
+## 1.2.0
+
+### Added
+
+- Add `@kahwee/sf-map-svg/custom-map`, a data-injected renderer entry point that lets consumers bundle only the geographic datasets they provide.
+- Add public styled geographic overlays, explorer theme tokens, configurable labels, and optional controls.
+
 ## 1.1.0
 
 ### Added

package/README.md

@@ -1,5 +1,7 @@
 # San Francisco SVG maps
 
+[![npm version](https://img.shields.io/npm/v/@kahwee/sf-map-svg)](https://www.npmjs.com/package/@kahwee/sf-map-svg)
+
 [Explore the live map](https://kahwee.github.io/sf-map-svg/) · [Data guide](data/README.md) · [Geographic sources](SOURCES.md) · [Contributing](CONTRIBUTING.md)
 
 Self-contained SVG maps of San Francisco, with precise coastlines, soft district colors, parks, roads, BART stations, and searchable neighborhoods. Render static SVGs in Node or add an interactive map to a browser. All geometry is bundled; there are no runtime dependencies, map tiles, API keys, or external data requests.
@@ -17,8 +19,10 @@ Use Node 22.12+ for server-side rendering. Browser components need a DOM and a b
 | Start with | Entry point | What you get |
 | --- | --- | --- |
 | Static SVG | `@kahwee/sf-map-svg` | SVG markup, projection helpers, optional layers |
+| Data-injected SVG | `@kahwee/sf-map-svg/custom-map` | Tree-shakeable renderer core with only the geographic data you provide |
 | Neighborhood explorer | `@kahwee/sf-map-svg/explorer` | Search, source selection, map controls, GeoJSON downloads |
 | Interactive map | `@kahwee/sf-map-svg/interactive` | Embeddable map and controls without the explorer sidebar |
+| Animated transit demo | `@kahwee/sf-map-svg/transit` | Optional, schematic BART journey with playback controls |
 | Geographic data | `@kahwee/sf-map-svg/data` | Source-aware lookup and canonical GeoJSON |
 
 ## Render a static map
@@ -38,6 +42,15 @@ const svg = renderSFMap({
 await writeFile('san-francisco.svg', svg);
 ```
 
+For smaller browser bundles, import `createSFMapWithData` from
+`@kahwee/sf-map-svg/custom-map` and pass only the geographic assets your map uses.
+That entry point does not import the package's built-in JSON collections. Its `SFMapData`
+requires the coast and accepts selected district vintages plus optional neighborhood,
+road, park, and station arrays. Use the canonical JSON subpaths documented in
+[`data/README.md`](data/README.md) as source; map each feature collection to the
+corresponding `SFMapData` records. The root entry remains convenient and includes the
+built-in datasets for backward compatibility.
+
 Embed the returned SVG markup directly in a page; in Astro, use `<div set:html={svg} />`. User-supplied text and attributes are XML escaped. Use a distinct `idPrefix` for each map when combining independently rendered SVGs.
 
 ## Static options
@@ -156,6 +169,10 @@ aliases. Import types including `InteractiveSFMapOptions`, `InteractiveSFMapElem
 | `markerRadius` / `markerHitSize` | `6` / `44` | Screen-pixel visible radius and tap-target diameter, independent of zoom; selected radius grows by 2px |
 | `markerColor` / `selectedMarkerColor` | `#245b61` / `#f04f32` | Default marker colors; individual `marker.color` overrides the unselected color |
 | `onMarkerActivate` | Unset | Called when a non-null marker selection changes, including programmatic changes |
+| `overlays` | `[]` | GeoJSON line or polygon overlays with stable IDs and optional SVG styles |
+| `style` | Built-in tokens | Explorer CSS tokens: `ink`, `surface`, `accent`, `border`, `focus`, `controlGap`, `font` |
+| `strings` | English defaults | Replace visible map labels and gesture help for localization |
+| `controls` | All enabled | Independently hide `zoom`, `pan`, `reset`, `labels`, `touch`, or `legend`; source attribution remains visible |
 
 Explicit layer options override mode defaults even after `setMode()`. District fills, outlines,
 and badges can therefore be composed with neighborhood names without requiring district
@@ -201,6 +218,11 @@ unknown identities. `getSelection()` and `getSelectedMarker()` read current sele
 when needed. `setMode(mode)` resets the viewport. Repeating the same viewport or selection
 emits no change event, avoiding state feedback loops. All events bubble. Call `destroy()`
 before removing the element to release listeners, observers, frames, and download URLs.
+`setOverlays(overlays)` replaces all consumer overlays; each overlay has a unique `id`,
+WGS84 `LineString`, `MultiLineString`, `Polygon`, or `MultiPolygon` geometry, optional
+`stroke`, `strokeWidth`, `fill`, `fillOpacity`, `visible`, and accessible `label`. Overlays
+track every pan, zoom, resize, and source change and render above geography but below markers.
+They are decorative and do not participate in label collision layout.
 
 ### Dense markers
 
@@ -301,12 +323,15 @@ synthetic pointer tests do not establish physical-device compatibility.
 The [live explorer](https://kahwee.github.io/sf-map-svg/) provides neighborhood search, 2022 district views, SVG examples, and GeoJSON downloads. Its source is in `website/` and uses the public explorer API.
 
 ```sh
-pnpm build:pages
+pnpm build:pages             # local preview
+pnpm build:pages --released  # use the current npm release
 python3 -m http.server 8765 --directory pages-dist
 # Open http://localhost:8765
 ```
 
-The build bundles local assets into `pages-dist/` with relative URLs for GitHub’s project path. `.github/workflows/pages.yml` validates and deploys pushes to `main` using GitHub Actions. It does not publish npm packages or releases.
+The build bundles assets into `pages-dist/` with relative URLs for GitHub’s project path. Local builds use the working package; deployed builds use npm’s latest stable package for both browser components and SVG downloads. The page shows that version and links to its release notes. `pages-dist/release.json` records the build’s version and source.
+
+`.github/workflows/pages.yml` validates and deploys on pushes to `main` and after successful npm publishing. Release-triggered builds wait for registry processing before using the newly published version. Pages deployment does not publish npm packages or releases.
 
 ## License and attribution
 
@@ -324,3 +349,7 @@ document.querySelector('#transit').append(animation);
 This optional browser component starts paused, with Play/Pause and a keyboard-accessible journey slider. A loop lasts 28 seconds; timing is illustrative. It connects the bundled official BART station centroids with straight segments, not actual tracks or live service. It pauses when the page is hidden. No autoplay means reduced-motion users can inspect the static map or scrub manually. Existing map defaults are unchanged.
 
 Embed the Pages demo with `<iframe src="https://kahwee.github.io/sf-map-svg/transit.html" title="Schematic BART journey" loading="lazy" style="width:100%;height:clamp(650px, calc(100vw + 240px), 930px);border:0"></iframe>`.
+
+## Ballot measures explorer
+
+[Explore June 2026 ballot measures](https://kahwee.github.io/sf-map-svg/measures.html): certified local Measures A–D, citywide outcomes, full-screen district maps with floating controls, expandable mobile results, touch pan/zoom, a focus view, side-by-side measure comparisons, Yes/No or original district colors, zoom and district fitting, a sortable comparison table, shareable views, and SVG/CSV/JSON downloads. The page uses the released map renderer and separately bundled official election results. It is an archive, not a live results service or voting guide. Methodology and source links are available on the page and in [SOURCES.md](SOURCES.md).

package/SOURCES.md

@@ -79,3 +79,16 @@ The cleanup retains all 92 identities, names, and source codes. It uses no round
 ## Key road landmarks
 
 Downloaded September 26, 2026 (UTC; September 25 in San Francisco) from [DataSF Streets – Active and Retired](https://data.sf.gov/resource/3psu-pn9h.geojson), filtering `active = true` and exact source street names. `data/key-roads.json` groups 724 source segments into nine named corridors, preserving every source coordinate and CNN segment ID. Geary St and Geary Blvd are grouped under the Geary Blvd display label. These are geographic orientation features, not a complete network or vehicle-access guidance. Label anchors select existing source vertices near editorial targets. Regenerate with `node scripts/import-key-roads.mjs` then `pnpm data:catalog`. The full query and retrieval date are embedded in the JSON. DataSF terms apply.
+
+## June 2026 ballot measures explorer
+
+Downloaded September 26, 2026 from the San Francisco Department of Elections:
+
+- Final district workbook: https://sfelections.org/results/20260602/data/20260625/dsov.xlsx
+- Citywide summary, official measure titles, ballot questions, and thresholds: https://sfelections.org/results/20260602/index.html
+- Certification dated June 25, 2026: https://sfelections.org/results/20260602/data/20260625/CertificationLetterJun22026.pdf
+- Final report index: https://sfelections.org/results/20260602w/detail.html
+
+`data/elections/2026-06-02.json` contains Measures A–D, their citywide counts, and the 11 `SUP DIST n - Total` rows from workbook sheets 20–23. Each row retains its worksheet row number; metadata retains the workbook SHA-256. `scripts/import-election-results.py` extracts these with openpyxl (ingestion only), checks all district sums including under/overvotes, and cross-checks Yes/No citywide counts against the official HTML summary. Rerun with the downloaded workbook and summary paths. No original Site ballot overlays are reused.
+
+The Pages-only explorer calculates Yes / (Yes + No), excluding under/overvotes. Measure A uses the two-thirds threshold; B–D use a strict majority, as stated in the official summary. These are citywide outcomes, not district-level passage decisions. District counts are reported directly by Elections, not spatially assigned to neighborhoods. The existing 2022 district display map is reused unchanged. Election JSON is a separate website dataset, not a new npm package API; no live service or forthcoming-election coverage is claimed.

package/dist/data/README.md

@@ -99,3 +99,7 @@ Edit the canonical JSON only. Keep coordinate precision and source labels; recor
 The 92 realtor neighborhoods have disjoint interiors. Shared borders and corner points are allowed. The source contained tiny overlapping boundary slivers; the normalized JSON assigns each such area once using stable-ID order, preserving the combined footprint without rounding or buffering. `topology` records this processing. This guarantee applies within the realtor collection; alternative neighborhood sources and district/park layers describe different concepts and must not be treated as additional mutually exclusive neighborhoods.
 
 Run `pnpm data:normalize-realtor` when updating realtor geometry, then `pnpm data:catalog` and `pnpm check`. Cleanup aborts if it would erase a neighborhood, leave overlapping interiors, or change the combined footprint. Tests reject any nonempty polygon intersection; they do not excuse small slivers with an area threshold.
+
+## Election result snapshots (Pages only)
+
+`elections/2026-06-02.json` holds certified local-measure results for the June 2026 Pages explorer. It contains four measures, citywide counts, and eleven supervisorial district totals per measure, plus source URLs, workbook checksum, and source row references. It is not a GeoJSON collection or a public npm export. It does not change the default SFAR neighborhood dataset. See `SOURCES.md` and `scripts/import-election-results.py` for extraction and validation.

package/dist/src/custom-map.d.ts

@@ -0,0 +1,3 @@
+export type { BartStationData, DistrictRowData, KeyRoadData, LandmarkData, SFMapData, } from './map-core.js';
+export { createSFMapWithData, districtColors, districtYears, } from './map-core.js';
+export type { DistrictYear, MapMarker, MapOverlay, SFMapOptions } from './types.js';

package/dist/src/custom-map.js

@@ -0,0 +1 @@
+export { createSFMapWithData, districtColors, districtYears, } from './map-core.js';

package/dist/src/explorer.d.ts

@@ -1,4 +1,4 @@
 import type { NeighborhoodExplorerElement, NeighborhoodExplorerOptions } from './types.js';
 export type { ExplorerMode, NeighborhoodExplorerElement, NeighborhoodExplorerOptions, } from './types.js';
 /** Create an offline, browser-only neighborhood explorer. Call destroy() before disposal. */
-export declare function createNeighborhoodExplorer({ source, mode, labels, neighborhood, year, theme, interface: chrome, layers, selectableNeighborhoods, labelSize, fitPadding, markers: initialMarkers, markerRadius, markerHitSize, markerColor, selectedMarkerColor, onMarkerActivate, }?: NeighborhoodExplorerOptions): NeighborhoodExplorerElement;
+export declare function createNeighborhoodExplorer({ source, mode, labels, neighborhood, year, theme, interface: chrome, layers, selectableNeighborhoods, labelSize, fitPadding, markers: initialMarkers, markerRadius, markerHitSize, markerColor, selectedMarkerColor, onMarkerActivate, overlays: initialOverlays, onOverlayActivate, style: styleOptions, strings, controls, }?: NeighborhoodExplorerOptions): NeighborhoodExplorerElement;

package/dist/src/explorer.js

@@ -25,7 +25,7 @@ function svgElement(tag, attributes = {}) {
     return node;
 }
 /** Create an offline, browser-only neighborhood explorer. Call destroy() before disposal. */
-export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighborhoods', labels = true, neighborhood, year = 2022, theme = 'transit', interface: chrome = 'explorer', layers = {}, selectableNeighborhoods = true, labelSize = {}, fitPadding = 24, markers: initialMarkers = [], markerRadius = 6, markerHitSize = 44, markerColor = '#245b61', selectedMarkerColor = '#f04f32', onMarkerActivate, } = {}) {
+export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighborhoods', labels = true, neighborhood, year = 2022, theme = 'transit', interface: chrome = 'explorer', layers = {}, selectableNeighborhoods = true, labelSize = {}, fitPadding = 24, markers: initialMarkers = [], markerRadius = 6, markerHitSize = 44, markerColor = '#245b61', selectedMarkerColor = '#f04f32', onMarkerActivate, overlays: initialOverlays = [], onOverlayActivate, style: styleOptions = {}, strings = {}, controls = {}, } = {}) {
     if (!['neighborhoods', 'districts', 'basemap'].includes(mode))
         throw new RangeError(`Unknown map mode: ${mode}`);
     if (chrome !== 'explorer' && chrome !== 'map')
@@ -63,7 +63,7 @@ export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighbo
     root.setAttribute('aria-label', 'San Francisco neighborhood explorer');
     const style = element('style');
     style.textContent = `
-.sf-explorer{container:sf-neighborhood-explorer / inline-size;font:14px/1.5 system-ui,sans-serif;color:#18364f;background:#fff;border:1px solid #cedae3;border-radius:14px;overflow:hidden;max-width:1120px;margin:auto;box-shadow:0 8px 32px #18364f08}
+.sf-explorer{container:sf-neighborhood-explorer / inline-size;font:14px/1.5 var(--sf-map-font);color:var(--sf-map-ink);background:var(--sf-map-surface);border:1px solid var(--sf-map-border);border-radius:14px;overflow:hidden;max-width:1120px;margin:auto;box-shadow:0 8px 32px #18364f08}
 .sf-explorer *{box-sizing:border-box}
 .sf-explorer [hidden]{display:none!important}
 .sf-explorer h2,.sf-explorer p{margin:0}
@@ -72,8 +72,8 @@ export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighbo
 .sf-explorer button{cursor:pointer;transition:background .12s,border-color .12s}
 .sf-explorer button:hover{background:#f0f6fa;border-color:#8ba9c0}
 .sf-explorer button[aria-pressed=true]{color:#123d63;background:#e6f1f9;border-color:#5689b0;font-weight:650}
-.sf-explorer :focus-visible{outline:3px solid #1676b8;outline-offset:2px}
-.sf-explorer-header{padding:24px;border-top:4px solid #163d61;border-bottom:1px solid #dce5eb}
+.sf-explorer :focus-visible{outline:3px solid var(--sf-map-focus);outline-offset:2px}
+.sf-explorer-header{padding:24px;border-top:4px solid var(--sf-map-accent);border-bottom:1px solid var(--sf-map-border)}
 .sf-explorer-header h2{font-size:25px;line-height:1.25;font-weight:700;letter-spacing:-.7px}
 .sf-explorer-header p{color:#586f80;margin-top:8px;max-width:58ch}
 .sf-explorer-body{display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-areas:"panel map" "detail map";grid-template-rows:auto 1fr}
@@ -92,7 +92,7 @@ export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighbo
 .sf-explorer-detail p{font-size:12px;margin-bottom:10px}
 .sf-explorer-download{display:block;margin:8px 0;color:#12649c;text-underline-offset:3px}
 .sf-explorer-map-column{grid-area:map;min-width:0;background:#e4f2f8}
-.sf-explorer-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:12px;background:#fff;border-bottom:1px solid #dce5eb}
+.sf-explorer-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sf-map-control-gap);padding:12px;background:var(--sf-map-surface);border-bottom:1px solid var(--sf-map-border)}
 .sf-explorer-control-group{display:flex;align-items:center;flex-wrap:wrap;gap:6px;max-width:100%}
 .sf-explorer-pan-controls{margin-left:auto}
 .sf-explorer-toolbar button{min-width:44px;padding:6px 10px}
@@ -136,13 +136,20 @@ export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighbo
 .sf-explorer-download{display:inline-block;margin:4px 14px 4px 0}
 }`;
     root.dataset.interface = chrome;
+    root.style.setProperty('--sf-map-ink', styleOptions.ink ?? '#18364f');
+    root.style.setProperty('--sf-map-surface', styleOptions.surface ?? '#fff');
+    root.style.setProperty('--sf-map-accent', styleOptions.accent ?? '#163d61');
+    root.style.setProperty('--sf-map-border', styleOptions.border ?? '#cedae3');
+    root.style.setProperty('--sf-map-focus', styleOptions.focus ?? '#1676b8');
+    root.style.setProperty('--sf-map-control-gap', styleOptions.controlGap ?? '6px');
+    root.style.setProperty('--sf-map-font', styleOptions.font ?? 'system-ui,sans-serif');
     root.append(style);
     const header = element('header', '', 'sf-explorer-header');
-    header.append(element('h2', 'Explore San Francisco'), element('p', 'Explore the city, from familiar names to the places in between.'));
+    header.append(element('h2', strings.title ?? 'Explore San Francisco'), element('p', 'Explore the city, from familiar names to the places in between.'));
     root.append(header);
     const body = element('div', '', 'sf-explorer-body');
     const panel = element('div', '', 'sf-explorer-panel');
-    const modeLabel = element('label', 'Map mode');
+    const modeLabel = element('label', strings.mode ?? 'Map mode');
     const modeSelect = element('select');
     for (const [value, title] of [
         ['neighborhoods', 'Neighborhoods'],
@@ -154,7 +161,7 @@ export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighbo
         modeSelect.append(option);
     }
     modeLabel.append(modeSelect);
-    const sourceLabel = element('label', 'Neighborhood definitions');
+    const sourceLabel = element('label', strings.source ?? 'Neighborhood definitions');
     const sourceSelect = element('select');
     for (const [value, title] of Object.entries(sourceNames)) {
         const option = element('option', title);
@@ -163,7 +170,7 @@ export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighbo
     }
     sourceSelect.value = source;
     sourceLabel.append(sourceSelect);
-    const searchLabel = element('label', 'Find a neighborhood');
+    const searchLabel = element('label', strings.search ?? 'Find a neighborhood');
     const search = element('input');
     search.type = 'search';
     search.placeholder = 'Try Mission, Outer Mission, or NoPa';
@@ -180,7 +187,8 @@ export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighbo
     const toolbar = element('div', '', 'sf-explorer-toolbar');
     toolbar.setAttribute('aria-label', 'Map controls');
     const canvas = element('div', '', 'sf-explorer-canvas');
-    const hint = element('p', 'Drag to pan · Ctrl/⌘ + scroll to zoom · Focus map: arrows pan, +/− zoom, Home resets. Touch: scroll the page, or enable Touch navigation to pan and pinch the map. Escape exits.', 'sf-explorer-hint');
+    const hint = element('p', strings.gestureHelp ??
+        'Drag to pan · Ctrl/⌘ + scroll to zoom · Focus map: arrows pan, +/− zoom, Home resets. Touch: scroll the page, or enable Touch navigation to pan and pinch the map. Escape exits.', 'sf-explorer-hint');
     const status = element('p', '', 'sf-explorer-status');
     status.setAttribute('aria-live', 'polite');
     const legend = element('div', '', 'sf-explorer-legend');
@@ -198,10 +206,10 @@ export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighbo
         legend.append(entry);
     }
     const featureControls = element('div', '', 'sf-explorer-feature-controls');
-    const neighborhoodLabel = element('label', 'Select neighborhood');
+    const neighborhoodLabel = element('label', strings.chooseNeighborhood ?? 'Select neighborhood');
     const neighborhoodSelect = element('select');
     neighborhoodLabel.append(neighborhoodSelect);
-    const markerLabel = element('label', 'Choose marker');
+    const markerLabel = element('label', strings.chooseMarker ?? 'Choose marker');
     const markerSelect = element('select');
     markerLabel.append(markerSelect);
     featureControls.append(neighborhoodLabel, markerLabel);
@@ -246,6 +254,7 @@ export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighbo
         kind: 'district',
     })));
     const markerLayer = svgElement('g', { 'data-layer': 'interactive-markers' });
+    const overlayLayer = svgElement('g', { 'data-layer': 'user-overlays' });
     const areas = svgElement('g', { 'data-layer': 'explorer-neighborhoods' });
     const stations = svgElement('g', { 'data-layer': 'explorer-bart' });
     const labelLayer = svgElement('g', {
@@ -253,7 +262,7 @@ export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighbo
         'aria-hidden': 'true',
         'font-family': 'system-ui,sans-serif',
     });
-    geography.append(areas, stations, labelLayer, markerLayer);
+    geography.append(areas, stations, labelLayer, overlayLayer, markerLayer);
     let view = [0, 0, 800];
     let selected;
     let items = [];
@@ -306,6 +315,51 @@ export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighbo
     legend.hidden = !legend.children.length;
     let markerItems = [];
     let selectedMarker = null;
+    function setOverlays(overlays) {
+        const ids = new Set();
+        const next = overlays.map((overlay) => {
+            if (!overlay.id || ids.has(overlay.id))
+                throw new RangeError('Overlays require unique nonempty IDs.');
+            ids.add(overlay.id);
+            const node = svgElement('path', {
+                'data-overlay-id': overlay.id,
+                d: geometryPath(overlay.geometry, map.project),
+                fill: overlay.fill ?? 'none',
+                'fill-opacity': overlay.fillOpacity ?? 1,
+                stroke: overlay.stroke ?? '#bd8b73',
+                'stroke-width': overlay.strokeWidth ?? 2,
+                'vector-effect': 'non-scaling-stroke',
+                display: overlay.visible === false ? 'none' : 'inline',
+                'pointer-events': 'none',
+                ...(overlay.label ? { 'aria-label': overlay.label } : {}),
+            });
+            if (overlay.label) {
+                node.setAttribute('role', 'img');
+                const title = svgElement('title');
+                title.textContent = overlay.label;
+                node.append(title);
+            }
+            if (onOverlayActivate) {
+                node.setAttribute('role', 'button');
+                node.setAttribute('tabindex', '0');
+                node.setAttribute('pointer-events', 'stroke');
+                node.setAttribute('aria-label', overlay.label ?? overlay.id);
+                const activate = () => {
+                    onOverlayActivate(overlay);
+                    root.dispatchEvent(new CustomEvent('overlayactivate', { bubbles: true, detail: { overlay } }));
+                };
+                node.addEventListener('click', activate, { signal: controller.signal });
+                node.addEventListener('keydown', (event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        activate();
+                    }
+                }, { signal: controller.signal });
+            }
+            return node;
+        });
+        overlayLayer.replaceChildren(...next);
+    }
     const zoomControls = element('div', '', 'sf-explorer-control-group');
     const panControls = element('div', '', 'sf-explorer-control-group sf-explorer-pan-controls');
     toolbar.append(zoomControls, panControls);
@@ -321,7 +375,7 @@ export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighbo
     const zoomText = element('span', '100%', 'sf-explorer-zoom');
     zoomControls.append(zoomText);
     const zoomIn = button('+', 'Zoom in', () => zoomBy(1.5));
-    button('Reset', 'Reset map to city view', resetView);
+    button(strings.reset ?? 'Reset', strings.reset ?? 'Reset map to city view', resetView);
     const labelsButton = button('Labels', 'Show map labels', () => setLabels(!labels));
     for (const [symbol, label, dx, dy] of [
         ['←', 'Pan west', -1, 0],
@@ -541,7 +595,7 @@ export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighbo
                 node.focus({ preventScroll: true });
         }
         if (!matches.length)
-            results.append(element('p', 'No matches. Try another name or definition source.', 'sf-explorer-note'));
+            results.append(element('p', strings.emptyResults ?? 'No matches. Try another name or definition source.', 'sf-explorer-note'));
     }
     function getSelection() {
         return selected
@@ -784,6 +838,19 @@ export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighbo
             : (markers.find((marker) => marker.selected)?.id ?? null);
         selectMarker(nextSelection, { fit: false });
     }
+    if (controls.zoom === false)
+        zoomControls.hidden = true;
+    if (controls.pan === false)
+        panControls.hidden = true;
+    if (controls.reset === false) {
+        const reset = Array.from(toolbar.querySelectorAll('button')).find((node) => node.textContent === (strings.reset ?? 'Reset'));
+        if (reset)
+            reset.hidden = true;
+    }
+    if (controls.labels === false)
+        labelsButton.hidden = true;
+    if (controls.legend === false)
+        legend.hidden = true;
     function setMode(next) {
         if (destroyed)
             return;
@@ -852,7 +919,9 @@ export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighbo
         if (node?.dataset.neighborhoodResult)
             selectNeighborhood(node.dataset.neighborhoodResult);
     });
-    const touchButton = button('Touch navigation', 'Enable map touch navigation', () => setTouchNavigation(!touchNavigation));
+    const touchLabel = strings.touchNavigation ?? 'Touch navigation';
+    const touchButton = button(touchLabel, `Enable ${touchLabel.toLowerCase()}`, () => setTouchNavigation(!touchNavigation));
+    touchButton.hidden = controls.touch === false;
     let touchNavigation = false;
     const navigation = attachNavigation(svg, getViewport, setView, controller.signal, () => setTouchNavigation(false));
     function setTouchNavigation(enabled) {
@@ -863,8 +932,8 @@ export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighbo
         touchNavigation = enabled;
         navigation.setTouchNavigation(enabled);
         canvas.style.touchAction = enabled ? 'none' : 'pan-y pinch-zoom';
-        touchButton.textContent = enabled ? 'Done: page scrolling' : 'Touch navigation';
-        touchButton.setAttribute('aria-label', enabled ? 'Exit map touch navigation' : 'Enable map touch navigation');
+        touchButton.textContent = enabled ? 'Done: page scrolling' : touchLabel;
+        touchButton.setAttribute('aria-label', enabled ? `Exit ${touchLabel.toLowerCase()}` : `Enable ${touchLabel.toLowerCase()}`);
         touchButton.setAttribute('aria-pressed', String(enabled));
         root.dataset.touchNavigation = String(enabled);
     }
@@ -923,6 +992,7 @@ export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighbo
         panBy,
         setTouchNavigation,
         setMarkers,
+        setOverlays,
         selectMarker,
         getSelectedMarker,
         setSource,
@@ -952,6 +1022,7 @@ export function createNeighborhoodExplorer({ source = 'realtor', mode = 'neighbo
         setLabels(labels);
         setTouchNavigation(false);
         setMarkers(initialMarkers);
+        setOverlays(initialOverlays);
     }
     catch (error) {
         explorer.destroy();

package/dist/src/index.d.ts

@@ -1,13 +1,12 @@
-import type { Position } from '../data/types.js';
-import type { DistrictYear, SFMapOptions } from './types.js';
-export type { DistrictYear, MapMarker, SFMapOptions } from './types.js';
-export declare const districtYears: readonly DistrictYear[];
+import { districtColors, districtYears } from './map-core.js';
+import type { SFMapOptions } from './types.js';
+export type { DistrictYear, MapMarker, MapOverlay, SFMapOptions } from './types.js';
+export { districtColors, districtYears };
 export declare const neighborhoodNames: readonly string[];
-export declare const districtColors: readonly string[];
 /** Make an offline SVG and the matching longitude/latitude projection. */
 export declare function createSFMap(options?: SFMapOptions): {
     svg: string;
-    project: (coordinates: Position) => [number, number];
+    project: (coordinates: import("../data/types.js").Position) => [number, number];
     viewBox: [number, number, number, number];
 };
 export declare function renderSFMap(options?: SFMapOptions): string;

package/dist/src/index.js

@@ -1,124 +1,20 @@
 import data from './data.js';
-import { geometryPath, positions, rawProject } from './geometry.js';
-import * as layers from './layers.js';
-import { landmarks as landmarkData, keyRoads as roadData, bartStations as stationData, } from './overlays.js';
-import { escapeXml, stroke } from './svg.js';
-// The common coast is immutable: compute its Mercator bounds once per module.
-const coastPoints = positions(data.coast).map(rawProject);
-const bounds = coastPoints.reduce((b, [x, y]) => [Math.min(b[0], x), Math.min(b[1], y), Math.max(b[2], x), Math.max(b[3], y)], [Infinity, Infinity, -Infinity, -Infinity]);
-export const districtYears = Object.freeze([2002, 2012, 2022]);
+import { createSFMapWithData, districtColors, districtYears } from './map-core.js';
+import { bartStations, keyRoads, landmarks } from './overlays.js';
+export { districtColors, districtYears };
 export const neighborhoodNames = Object.freeze(data.neighborhoods.map((item) => item.name));
-export const districtColors = Object.freeze([
-    '#c8dce5',
-    '#d5e4d6',
-    '#d1d6e8',
-    '#d0dfd7',
-    '#e4dcca',
-    '#d3dced',
-    '#d9d8e7',
-    '#c8dfdf',
-    '#e2d6ca',
-    '#cbdcd1',
-    '#dfddc9',
-]);
-const defaults = {
-    water: '#e7f0f3',
-    land: '#f1f3ee',
-    district: '#71838a',
-    neighborhood: '#8c9195',
-    highway: '#bd8b73',
-    road: '#bcc3c5',
-    park: '#b2cfaa',
-    landmark: '#3e6346',
-    bart: '#24789a',
-    label: '#304958',
-    marker: '#245b61',
-    selected: '#f04f32',
+const packagedData = {
+    coast: data.coast,
+    districts: data.districts,
+    neighborhoods: data.neighborhoods,
+    highways: data.highways,
+    landmarks,
+    keyRoads,
+    bartStations,
 };
-const transitColors = {
-    water: '#e4f2f8',
-    land: '#fcfcf8',
-    district: '#a7b8c0',
-    neighborhood: '#b2c0c7',
-    highway: '#b9a18a',
-    park: '#c6dfbd',
-    landmark: '#426641',
-    bart: '#0073ae',
-    label: '#183e58',
-    marker: '#0073ae',
-    selected: '#0073ae',
-};
-let sequence = 0;
 /** Make an offline SVG and the matching longitude/latitude projection. */
 export function createSFMap(options = {}) {
-    const { theme = 'districts', width = 800, height = 800, padding = 28, year = 2022, districtLines = true, neighborhoodLines = false, districtFills = true, districtLabels = true, labels = true, highways = false, keyRoads = false, landmarks = false, bartStations = false, markers = [], title = 'San Francisco map', idPrefix = `sf-map-${++sequence}`, } = options;
-    if (![width, height, padding].every(Number.isFinite) ||
-        width <= 0 ||
-        height <= 0 ||
-        padding < 0 ||
-        padding * 2 >= Math.min(width, height))
-        throw new RangeError('Use positive dimensions and padding smaller than half the map.');
-    if (!districtYears.includes(year))
-        throw new RangeError('District year must be 2002, 2012, or 2022.');
-    if (!/^[A-Za-z][A-Za-z0-9_-]*$/.test(idPrefix))
-        throw new TypeError('idPrefix must start with a letter and contain only letters, numbers, underscores, or hyphens.');
-    if (theme !== 'districts' && theme !== 'transit')
-        throw new TypeError('Theme must be districts or transit.');
-    const colors = { ...defaults, ...(theme === 'transit' ? transitColors : {}), ...options.colors };
-    const [minX, minY, maxX, maxY] = bounds;
-    const scale = Math.min((width - padding * 2) / (maxX - minX), (height - padding * 2) / (maxY - minY));
-    const project = (coordinates) => {
-        const [x, y] = rawProject(coordinates);
-        const point = [
-            (x - (minX + maxX) / 2) * scale + width / 2,
-            (y - (minY + maxY) / 2) * scale + height / 2,
-        ];
-        if (!point.every(Number.isFinite))
-            throw new RangeError('Projected coordinates must be finite; use smaller map dimensions.');
-        return point;
-    };
-    const path = (geometry) => geometryPath(geometry, project);
-    const coastPath = path(data.coast);
-    const districts = data.districts[year];
-    const context = { project, path, colors, idPrefix, theme, labels };
-    const districtPaths = districtFills || districtLines
-        ? districts.map((d) => ({
-            id: d.id,
-            path: path(d.geometry) + path(d.extras),
-            color: theme === 'transit' ? colors.land : districtColors[d.id - 1],
-        }))
-        : [];
-    const parts = [
-        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" role="img" aria-labelledby="${idPrefix}-title" data-sf-map="" data-year="${year}" style="max-width:100%;height:auto"><title id="${idPrefix}-title">${escapeXml(title)}</title><desc>San Francisco supervisorial district boundaries (${year}).${neighborhoodLines ? ' Dashed lines show SFAR realtor neighborhood areas, defined in August 2010.' : ''}${landmarks ? ' Highlighted areas show six parks and landmarks.' : ''}${keyRoads ? ' Thin gray lines show nine selected road corridors.' : ''}${bartStations ? ' Rings mark the eight San Francisco BART stations.' : ''} Geometry from DataSF${bartStations ? ' and BART' : ''}. See package SOURCES.md.</desc><defs><clipPath id="${idPrefix}-coast"><path d="${coastPath}" fill-rule="evenodd" clip-rule="evenodd"/></clipPath></defs><rect width="${width}" height="${height}" fill="${escapeXml(colors.water)}"/><g data-layer="geography"><path data-layer="coast" d="${coastPath}" fill="${escapeXml(colors.land)}" fill-rule="evenodd"/>`,
-    ];
-    // Explicit drawing order keeps optional overlays and user markers predictable.
-    if (districtFills)
-        parts.push(layers.districtFills(districtPaths, context));
-    if (landmarks)
-        parts.push(layers.landmarks(landmarkData, context));
-    if (keyRoads)
-        parts.push(layers.keyRoads(roadData, context));
-    if (highways)
-        parts.push(layers.highways(data.highways, context));
-    if (neighborhoodLines)
-        parts.push(layers.neighborhoods(data.neighborhoods, context));
-    if (districtLines)
-        parts.push(layers.districtLines(districtPaths, context));
-    parts.push(`<path data-layer="coastline" d="${coastPath}" ${stroke(colors.district, 0.65)}/>`);
-    if (labels && districtLabels)
-        parts.push(layers.districtLabels(districts, context));
-    if (labels && landmarks)
-        parts.push(layers.landmarkLabels(landmarkData, context));
-    if (labels && keyRoads)
-        parts.push(layers.keyRoadLabels(roadData, context));
-    if (bartStations)
-        parts.push(layers.bartStations(stationData, context));
-    parts.push(layers.markers(markers, context), '</g></svg>');
-    return {
-        svg: parts.join(''),
-        project,
-        viewBox: [0, 0, width, height],
-    };
+    return createSFMapWithData(options, packagedData);
 }
 export function renderSFMap(options = {}) {
     return createSFMap(options).svg;

package/dist/src/interactive.d.ts

@@ -1,4 +1,4 @@
 import type { NeighborhoodExplorerOptions } from './types.js';
-export type { InteractiveLayers, MapPadding, MapViewport, NeighborhoodExplorerElement as InteractiveSFMapElement, NeighborhoodExplorerOptions as InteractiveSFMapOptions, NeighborhoodSelection, } from './types.js';
+export type { InteractiveLayers, MapOverlay, MapPadding, MapViewport, NeighborhoodExplorerElement as InteractiveSFMapElement, NeighborhoodExplorerOptions as InteractiveSFMapOptions, NeighborhoodSelection, } from './types.js';
 /** Reusable browser map; plain basemap by default, no editorial UI or URL changes. */
 export declare function createInteractiveSFMap(options?: NeighborhoodExplorerOptions): import("./types.js").NeighborhoodExplorerElement;

package/dist/src/map-core.d.ts

@@ -0,0 +1,54 @@
+import type { Geometry, Position } from '../data/types.js';
+import type { DistrictYear, SFMapOptions } from './types.js';
+export type { DistrictYear, MapMarker, MapOverlay, SFMapOptions } from './types.js';
+export interface SFMapData {
+    coast: Geometry;
+    districts?: Readonly<Partial<Record<DistrictYear, readonly DistrictRowData[]>>>;
+    neighborhoods?: readonly {
+        name: string;
+        geometry: Geometry;
+    }[];
+    highways?: readonly {
+        route: string;
+        geometry: Geometry;
+    }[];
+    landmarks?: readonly LandmarkData[];
+    keyRoads?: readonly KeyRoadData[];
+    bartStations?: readonly BartStationData[];
+}
+export interface DistrictRowData {
+    id: number;
+    label: Position;
+    labelPoints: readonly Position[];
+    geometry: Geometry;
+    extras: Geometry | null;
+}
+export interface LandmarkData {
+    id: string;
+    name: string;
+    label: Position;
+    offset: readonly [number, number];
+    anchor: 'middle' | 'start' | 'end';
+    geometry: Geometry;
+}
+export interface KeyRoadData {
+    id: string;
+    name: string;
+    sourceNames: readonly string[];
+    label: Position;
+    segmentIds: readonly string[];
+    geometry: Geometry;
+}
+export interface BartStationData {
+    id: string;
+    name: string;
+    coordinates: Position;
+}
+export declare const districtYears: readonly DistrictYear[];
+export declare const districtColors: readonly string[];
+/** Make an offline SVG and the matching longitude/latitude projection. */
+export declare function createSFMapWithData(options: SFMapOptions, data: SFMapData): {
+    svg: string;
+    project: (coordinates: Position) => [number, number];
+    viewBox: [number, number, number, number];
+};

package/dist/src/map-core.js

@@ -0,0 +1,125 @@
+import { geometryPath, positions, rawProject } from './geometry.js';
+import * as layers from './layers.js';
+import { escapeXml, stroke } from './svg.js';
+export const districtYears = Object.freeze([2002, 2012, 2022]);
+export const districtColors = Object.freeze([
+    '#c8dce5',
+    '#d5e4d6',
+    '#d1d6e8',
+    '#d0dfd7',
+    '#e4dcca',
+    '#d3dced',
+    '#d9d8e7',
+    '#c8dfdf',
+    '#e2d6ca',
+    '#cbdcd1',
+    '#dfddc9',
+]);
+const defaults = {
+    water: '#e7f0f3',
+    land: '#f1f3ee',
+    district: '#71838a',
+    neighborhood: '#8c9195',
+    highway: '#bd8b73',
+    road: '#bcc3c5',
+    park: '#b2cfaa',
+    landmark: '#3e6346',
+    bart: '#24789a',
+    label: '#304958',
+    marker: '#245b61',
+    selected: '#f04f32',
+};
+const transitColors = {
+    water: '#e4f2f8',
+    land: '#fcfcf8',
+    district: '#a7b8c0',
+    neighborhood: '#b2c0c7',
+    highway: '#b9a18a',
+    park: '#c6dfbd',
+    landmark: '#426641',
+    bart: '#0073ae',
+    label: '#183e58',
+    marker: '#0073ae',
+    selected: '#0073ae',
+};
+let sequence = 0;
+/** Make an offline SVG and the matching longitude/latitude projection. */
+export function createSFMapWithData(options, data) {
+    const { theme = 'districts', width = 800, height = 800, padding = 28, year = 2022, districtLines = true, neighborhoodLines = false, districtFills = true, districtLabels = true, labels = true, highways = false, keyRoads = false, landmarks = false, bartStations = false, markers = [], title = 'San Francisco map', idPrefix = `sf-map-${++sequence}`, } = options;
+    if (![width, height, padding].every(Number.isFinite) ||
+        width <= 0 ||
+        height <= 0 ||
+        padding < 0 ||
+        padding * 2 >= Math.min(width, height))
+        throw new RangeError('Use positive dimensions and padding smaller than half the map.');
+    if (!districtYears.includes(year))
+        throw new RangeError('District year must be 2002, 2012, or 2022.');
+    if (!/^[A-Za-z][A-Za-z0-9_-]*$/.test(idPrefix))
+        throw new TypeError('idPrefix must start with a letter and contain only letters, numbers, underscores, or hyphens.');
+    if (theme !== 'districts' && theme !== 'transit')
+        throw new TypeError('Theme must be districts or transit.');
+    const colors = { ...defaults, ...(theme === 'transit' ? transitColors : {}), ...options.colors };
+    const coastPoints = positions(data.coast).map(rawProject);
+    const [minX, minY, maxX, maxY] = coastPoints.reduce((b, [x, y]) => [Math.min(b[0], x), Math.min(b[1], y), Math.max(b[2], x), Math.max(b[3], y)], [Infinity, Infinity, -Infinity, -Infinity]);
+    const scale = Math.min((width - padding * 2) / (maxX - minX), (height - padding * 2) / (maxY - minY));
+    const project = (coordinates) => {
+        const [x, y] = rawProject(coordinates);
+        const point = [
+            (x - (minX + maxX) / 2) * scale + width / 2,
+            (y - (minY + maxY) / 2) * scale + height / 2,
+        ];
+        if (!point.every(Number.isFinite))
+            throw new RangeError('Projected coordinates must be finite; use smaller map dimensions.');
+        return point;
+    };
+    const path = (geometry) => geometryPath(geometry, project);
+    const coastPath = path(data.coast);
+    const districts = data.districts?.[year] ?? [];
+    const landmarkData = data.landmarks ?? [];
+    const roadData = data.keyRoads ?? [];
+    const stationData = data.bartStations ?? [];
+    const context = { project, path, colors, idPrefix, theme, labels };
+    const districtPaths = districtFills || districtLines
+        ? districts.map((d) => ({
+            id: d.id,
+            path: path(d.geometry) + path(d.extras),
+            color: theme === 'transit' ? colors.land : districtColors[d.id - 1],
+        }))
+        : [];
+    const parts = [
+        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" role="img" aria-labelledby="${idPrefix}-title" data-sf-map="" data-year="${year}" style="max-width:100%;height:auto"><title id="${idPrefix}-title">${escapeXml(title)}</title><desc>San Francisco supervisorial district boundaries (${year}).${neighborhoodLines ? ' Dashed lines show SFAR realtor neighborhood areas, defined in August 2010.' : ''}${landmarks ? ' Highlighted areas show six parks and landmarks.' : ''}${keyRoads ? ' Thin gray lines show nine selected road corridors.' : ''}${bartStations ? ' Rings mark the eight San Francisco BART stations.' : ''} Geometry from DataSF${bartStations ? ' and BART' : ''}. See package SOURCES.md.</desc><defs><clipPath id="${idPrefix}-coast"><path d="${coastPath}" fill-rule="evenodd" clip-rule="evenodd"/></clipPath></defs><rect width="${width}" height="${height}" fill="${escapeXml(colors.water)}"/><g data-layer="geography"><path data-layer="coast" d="${coastPath}" fill="${escapeXml(colors.land)}" fill-rule="evenodd"/>`,
+    ];
+    // Explicit drawing order keeps optional overlays and user markers predictable.
+    if (districtFills)
+        parts.push(layers.districtFills(districtPaths, context));
+    if (landmarks)
+        parts.push(layers.landmarks(landmarkData, context));
+    if (keyRoads)
+        parts.push(layers.keyRoads(roadData, context));
+    if (highways)
+        parts.push(layers.highways(data.highways ?? [], context));
+    if (neighborhoodLines)
+        parts.push(layers.neighborhoods(data.neighborhoods ?? [], context));
+    if (districtLines)
+        parts.push(layers.districtLines(districtPaths, context));
+    parts.push(`<path data-layer="coastline" d="${coastPath}" ${stroke(colors.district, 0.65)}/>`);
+    if (labels && districtLabels)
+        parts.push(layers.districtLabels(districts, context));
+    if (labels && landmarks)
+        parts.push(layers.landmarkLabels(landmarkData, context));
+    if (labels && keyRoads)
+        parts.push(layers.keyRoadLabels(roadData, context));
+    if (bartStations)
+        parts.push(layers.bartStations(stationData, context));
+    for (const overlay of options.overlays ?? []) {
+        if (!overlay.id || !/^[A-Za-z0-9_-]+$/.test(overlay.id))
+            throw new TypeError('Overlay IDs must contain only letters, numbers, underscores, or hyphens.');
+        parts.push(`<path data-overlay-id="${escapeXml(overlay.id)}"${overlay.label ? ` aria-label="${escapeXml(overlay.label)}"` : ''} d="${path(overlay.geometry)}" fill="${escapeXml(overlay.fill ?? 'none')}" fill-opacity="${overlay.fillOpacity ?? 1}" stroke="${escapeXml(overlay.stroke ?? colors.road)}" stroke-width="${overlay.strokeWidth ?? 2}" vector-effect="non-scaling-stroke"${overlay.visible === false ? ' display="none"' : ''}/>`);
+    }
+    parts.push(layers.markers(markers, context), '</g></svg>');
+    return {
+        svg: parts.join(''),
+        project,
+        viewBox: [0, 0, width, height],
+    };
+}

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,6 +119,7 @@ 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahwee/sf-map-svg",
-  "version": "1.1.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"
@@ -87,6 +91,6 @@
     "test:package": "node scripts/smoke-package.mjs",
     "build": "node scripts/build.mjs",
     "lint": "biome check .",
-    "build:pages": "pnpm demo && node scripts/build-pages.mjs"
+    "build:pages": "pnpm build && node scripts/build-pages.mjs"
   }
 }