@kahwee/sf-map-svg 1.2.0 → 1.3.1

package/dist/src/guide.d.ts

@@ -0,0 +1,10 @@
+import type { InteractiveSFMapData } from './explorer-data.js';
+import type { InteractiveSFMapElement, InteractiveSFMapOptions } from './interactive-data.js';
+/** Compact, source-aware San Francisco guide data. Imports no district or alternate-neighborhood files. */
+export declare const guideMapData: InteractiveSFMapData;
+/** Guide map preset: SFAR neighborhoods, major parks, BART, and curated roads. */
+export declare function createGuideMap(options?: InteractiveSFMapOptions): InteractiveSFMapElement;
+/** Load the detailed versions of the guide's selected geography on explicit request. */
+export declare function loadGuideDetailedData(): Promise<InteractiveSFMapData>;
+export type { InteractiveSFMapData } from './explorer-data.js';
+export type { InteractiveSFMapElement, InteractiveSFMapOptions };

package/dist/src/guide.js

@@ -0,0 +1,107 @@
+import bart from '../data/guide/bart-stations.json' with { type: 'json' };
+import coast from '../data/guide/coast.json' with { type: 'json' };
+import highways from '../data/guide/highways.json' with { type: 'json' };
+import roads from '../data/guide/key-roads.json' with { type: 'json' };
+import landmarks from '../data/guide/landmarks.json' with { type: 'json' };
+import neighborhoods from '../data/guide/neighborhoods-realtor.json' with { type: 'json' };
+import { createInteractiveSFMapWithData } from './interactive-data.js';
+const neighborhoodData = neighborhoods;
+const highwayData = highways;
+const parkData = landmarks;
+const roadData = roads;
+const stationData = bart;
+/** Compact, source-aware San Francisco guide data. Imports no district or alternate-neighborhood files. */
+export const guideMapData = {
+    map: {
+        coast: coast.features[0].geometry,
+        neighborhoods: neighborhoodData.features.map((feature) => ({
+            name: feature.properties.canonicalName,
+            geometry: feature.geometry,
+        })),
+        highways: highwayData.features.map((feature) => ({
+            route: String(feature.properties.route),
+            geometry: feature.geometry,
+        })),
+        landmarks: parkData.features.map(({ id, properties, geometry }) => ({
+            id,
+            ...properties,
+            geometry,
+        })),
+        keyRoads: roadData.features.map(({ id, properties, geometry }) => ({
+            id,
+            ...properties,
+            sourceNames: properties.sourceNames ?? [],
+            segmentIds: properties.segmentIds ?? [],
+            geometry,
+        })),
+        bartStations: stationData.features.flatMap(({ id, properties, geometry }) => geometry.type === 'Point'
+            ? [{ id, name: properties.name, coordinates: geometry.coordinates }]
+            : []),
+    },
+    neighborhoods: { realtor: neighborhoodData },
+};
+/** Guide map preset: SFAR neighborhoods, major parks, BART, and curated roads. */
+export function createGuideMap(options = {}) {
+    return createInteractiveSFMapWithData(guideMapData, {
+        mode: 'neighborhoods',
+        ...options,
+        layers: {
+            districtFills: false,
+            districtLines: false,
+            districtLabels: false,
+            neighborhoodLines: true,
+            neighborhoodLabels: true,
+            landmarks: true,
+            bartStations: true,
+            highways: true,
+            keyRoads: true,
+            roadLabels: true,
+            ...options.layers,
+        },
+    });
+}
+/** Load the detailed versions of the guide's selected geography on explicit request. */
+export async function loadGuideDetailedData() {
+    const [coastData, neighborhoodData, parkData, highwayData, roadData, bartData] = await Promise.all([
+        import('../data/coast.json', { with: { type: 'json' } }),
+        import('../data/neighborhoods-realtor.json', { with: { type: 'json' } }),
+        import('../data/landmarks.json', { with: { type: 'json' } }),
+        import('../data/guide/highways-detailed.json', { with: { type: 'json' } }),
+        import('../data/key-roads.json', { with: { type: 'json' } }),
+        import('../data/bart-stations.json', { with: { type: 'json' } }),
+    ]);
+    const detailedNeighborhoods = neighborhoodData.default;
+    const detailedRoads = roadData.default;
+    const detailedHighways = highwayData.default;
+    const detailedParks = parkData.default;
+    const detailedStations = bartData.default;
+    return {
+        map: {
+            coast: coastData.default.features[0].geometry,
+            neighborhoods: detailedNeighborhoods.features.map((feature) => ({
+                name: feature.properties.canonicalName,
+                geometry: feature.geometry,
+            })),
+            highways: detailedHighways.features
+                .filter((feature) => ['1', '101', '280'].includes(String(feature.properties.route)))
+                .map((feature) => ({
+                route: String(feature.properties.route),
+                geometry: feature.geometry,
+            })),
+            landmarks: detailedParks.features.map(({ id, properties, geometry }) => ({
+                id,
+                ...properties,
+                geometry,
+            })),
+            keyRoads: detailedRoads.features.map(({ id, properties, geometry }) => ({
+                id,
+                ...properties,
+                geometry,
+            })),
+            bartStations: detailedStations.features.flatMap(({ id, properties, geometry }) => geometry.type === 'Point'
+                ? [{ id, name: properties.name, coordinates: geometry.coordinates }]
+                : []),
+        },
+        neighborhoods: { realtor: detailedNeighborhoods },
+    };
+}

package/dist/src/interactive-data.d.ts

@@ -0,0 +1,6 @@
+import type { InteractiveSFMapData } from './explorer-data.js';
+import type { NeighborhoodExplorerOptions } from './types.js';
+export type { InteractiveSFMapData } from './explorer-data.js';
+export type { InteractiveLayers, MapPadding, MapViewport, NeighborhoodExplorerElement as InteractiveSFMapElement, NeighborhoodExplorerOptions as InteractiveSFMapOptions, NeighborhoodSelection, } from './types.js';
+/** Browser map shell that bundles only the geography supplied by the caller. */
+export declare function createInteractiveSFMapWithData(data: InteractiveSFMapData, options?: NeighborhoodExplorerOptions): import("./types.js").NeighborhoodExplorerElement;

package/dist/src/interactive-data.js

@@ -0,0 +1,5 @@
+import { createNeighborhoodExplorerCore } from './explorer-core.js';
+/** Browser map shell that bundles only the geography supplied by the caller. */
+export function createInteractiveSFMapWithData(data, options = {}) {
+    return createNeighborhoodExplorerCore({ mode: 'basemap', ...options, interface: 'map' }, data);
+}

package/dist/src/layers.js

@@ -52,7 +52,12 @@ export function markers(items, { project, colors }) {
         .join('')}</g>`;
 }
 export function keyRoads(items, { idPrefix, path, colors }) {
-    return `<g data-layer="key-roads" clip-path="url(#${idPrefix}-coast)">${items.map((road) => `<path data-key-road="${escapeXml(road.id)}" d="${path(road.geometry)}" ${stroke(colors.road, 1)}><title>${escapeXml(road.name)}</title></path>`).join('')}</g>`;
+    return `<g data-layer="key-roads" clip-path="url(#${idPrefix}-coast)">${items
+        .map((road) => {
+        const level = road.level === 'secondary' ? 'secondary' : 'primary';
+        return `<path data-key-road="${escapeXml(road.id)}" data-key-road-level="${level}" d="${path(road.geometry)}" ${stroke(colors.road, 1)}><title>${escapeXml(road.name)}</title></path>`;
+    })
+        .join('')}</g>`;
 }
 export function keyRoadLabels(items, { project }) {
     return `<g data-layer="key-road-labels" ${overlayLabel} fill="#77736b">${items

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

@@ -34,6 +34,7 @@ export interface LandmarkData {
 export interface KeyRoadData {
     id: string;
     name: string;
+    level?: 'primary' | 'secondary';
     sourceNames: readonly string[];
     label: Position;
     segmentIds: readonly string[];

package/dist/src/map-core.js

@@ -46,6 +46,7 @@ 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;
+    const roadLabels = options.roadLabels ?? keyRoads;
     if (![width, height, padding].every(Number.isFinite) ||
         width <= 0 ||
         height <= 0 ||
@@ -87,7 +88,7 @@ export function createSFMapWithData(options, data) {
         }))
         : [];
     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"/>`,
+        `<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 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)
@@ -107,13 +108,19 @@ export function createSFMapWithData(options, data) {
         parts.push(layers.districtLabels(districts, context));
     if (labels && landmarks)
         parts.push(layers.landmarkLabels(landmarkData, context));
-    if (labels && keyRoads)
+    if (labels && roadLabels)
         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.');
+        if (overlay.strokeWidth !== undefined &&
+            (!Number.isFinite(overlay.strokeWidth) || overlay.strokeWidth < 0))
+            throw new RangeError('Overlay strokeWidth must be a finite nonnegative number.');
+        if (overlay.fillOpacity !== undefined &&
+            (!Number.isFinite(overlay.fillOpacity) || overlay.fillOpacity < 0 || overlay.fillOpacity > 1))
+            throw new RangeError('Overlay fillOpacity must be a finite number from 0 to 1.');
         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>');

package/dist/src/overlays.d.ts

@@ -16,6 +16,7 @@ export type Landmark = (typeof landmarks)[number];
 export type BartStation = (typeof bartStations)[number];
 export declare const keyRoads: {
     name: string;
+    level?: 'primary' | 'secondary';
     sourceNames: readonly string[];
     label: Position;
     segmentIds: readonly string[];

package/dist/src/types.d.ts

@@ -34,6 +34,7 @@ export interface SFMapOptions {
     labels?: boolean;
     highways?: boolean;
     keyRoads?: boolean;
+    roadLabels?: boolean;
     landmarks?: boolean;
     bartStations?: boolean;
     markers?: MapMarker[];
@@ -61,6 +62,7 @@ export interface InteractiveLayers {
     bartStations?: boolean;
     highways?: boolean;
     keyRoads?: boolean;
+    roadLabels?: boolean;
 }
 export interface NeighborhoodSelection {
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahwee/sf-map-svg",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "Offline SVG maps of San Francisco with district boundaries, parks, landmarks, and BART stations.",
   "type": "module",
   "main": "./dist/src/index.js",
@@ -31,6 +31,14 @@
       "types": "./dist/src/interactive.d.ts",
       "import": "./dist/src/interactive.js"
     },
+    "./interactive-data": {
+      "types": "./dist/src/interactive-data.d.ts",
+      "import": "./dist/src/interactive-data.js"
+    },
+    "./guide": {
+      "types": "./dist/src/guide.d.ts",
+      "import": "./dist/src/guide.js"
+    },
     "./transit": {
       "types": "./dist/src/transit.d.ts",
       "import": "./dist/src/transit.js"
@@ -88,6 +96,8 @@
     "data:check": "node scripts/build-data-catalog.mjs --check",
     "typecheck": "pnpm build && tsc -p tsconfig.json",
     "data:normalize-realtor": "node scripts/normalize-realtor.mjs",
+    "data:guide": "node scripts/build-guide-data.mjs",
+    "report:guide": "node scripts/report-guide-bundle.mjs",
     "test:package": "node scripts/smoke-package.mjs",
     "build": "node scripts/build.mjs",
     "lint": "biome check .",