@kahwee/sf-map-svg 4.1.0 → 4.3.0

package/dist/src/explorer-core.js

@@ -1,3 +1,4 @@
+import { copyAppearance } from './appearance.js';
 import { createCamera, validateCameraOptions } from './camera.js';
 import { clusterPoints } from './clusters.js';
 import { renderDistrictAppearance } from './district-layer.js';
@@ -11,7 +12,7 @@ import { createFrameScheduler } from './frame-scheduler.js';
 import { geometryPath } from './geometry.js';
 import { createLabelRenderer } from './label-renderer.js';
 import { createLayerTransitions } from './layer-transition.js';
-import { createSFMapWithData, districtColors, getLayerPathsWithData } from './map-core.js';
+import { createSFMapWithData, districtColors, getLayerPathsWithData, resolveMapColors, } from './map-core.js';
 import { createMarkerLayer } from './marker-layer.js';
 import { attachNavigation } from './navigation.js';
 import { validateExplorerOptions, validateMarkers, validateOverlays } from './validation.js';
@@ -37,7 +38,7 @@ export function createNeighborhoodExplorerCore(options = {}, data) {
         throw new RangeError(`Unknown map mode: ${mode}`);
     if (chrome !== 'explorer' && chrome !== 'map')
         throw new RangeError('Unknown interface.');
-    const minLabelSize = labelSize.min ?? 11, maxLabelSize = labelSize.max ?? 12;
+    let minLabelSize = labelSize.min ?? 11, maxLabelSize = labelSize.max ?? 12;
     if (![minLabelSize, maxLabelSize, markerRadius, markerHitSize].every(Number.isFinite) ||
         minLabelSize < 8 ||
         maxLabelSize < minLabelSize ||
@@ -464,7 +465,7 @@ export function createNeighborhoodExplorerCore(options = {}, data) {
             districtTransition.fade(fills, fade);
         updateDistrictAppearance();
     }
-    function setDistrictYear(next, options = {}) {
+    function setDistrictYear(next, options = {}, preparedStyles) {
         if (destroyed)
             return;
         validateCameraOptions(options);
@@ -475,7 +476,7 @@ export function createNeighborhoodExplorerCore(options = {}, data) {
         if (next === year)
             return;
         const revision = districtRevision;
-        const prepared = prepareDistrictStyles(data.map.districts[next], districtStyle);
+        const prepared = preparedStyles ?? prepareDistrictStyles(data.map.districts[next], districtStyle);
         if (destroyed || revision !== districtRevision)
             return;
         const committedRevision = ++districtRevision;
@@ -1063,7 +1064,10 @@ export function createNeighborhoodExplorerCore(options = {}, data) {
     function selectNeighborhood(name, options = {}) {
         if (destroyed)
             return false;
-        const feature = name === null ? undefined : getNeighborhood(name, source);
+        const feature = name === null
+            ? undefined
+            : (collections[source]?.features.find((entry) => entry.id === name) ??
+                getNeighborhood(name, source));
         if (name !== null && !feature)
             return false;
         validateCameraOptions(options);
@@ -1118,9 +1122,7 @@ export function createNeighborhoodExplorerCore(options = {}, data) {
             moveView(target, options);
         return true;
     }
-    function setSource(next) {
-        if (destroyed)
-            return;
+    function prepareSource(next, reset = true) {
         if (!Object.hasOwn(collections, next))
             throw new RangeError(`Unknown neighborhood source: ${next}`);
         const collection = collections[next];
@@ -1191,36 +1193,42 @@ export function createNeighborhoodExplorerCore(options = {}, data) {
                 area: (bounds[2] - bounds[0]) * (bounds[3] - bounds[1]),
             };
         });
-        const hadSelection = !!selected;
-        source = next;
-        sourceSelect.value = source;
-        selected = undefined;
-        const revision = ++neighborhoodRevision;
-        delete root.dataset.selectedNeighborhood;
-        root.dataset.source = source;
-        layerFades.crossfade(areas, () => areas.replaceChildren(...nextItems.map((item) => item.node)));
-        neighborhoodSelect.replaceChildren(element('option', 'No neighborhood selected'));
-        neighborhoodSelect.options[0].value = '';
-        neighborhoodSelect.append(...nextOptions);
-        items = nextItems;
-        if (items[0])
-            items[0].node.setAttribute('tabindex', '0');
-        updateResults();
-        updateDetail();
-        updateComposition();
-        status.textContent =
-            mode === 'basemap'
-                ? 'San Francisco basemap.'
-                : mode === 'districts'
-                    ? `${year} supervisorial districts. Numbers identify each district.`
-                    : `${formatSourceLabel(source)}. Select a neighborhood to begin.`;
-        if (hadSelection)
-            root.dispatchEvent(new CustomEvent('neighborhoodchange', {
-                bubbles: true,
-                detail: { feature: null, source, id: null, name: null },
-            }));
-        if (!destroyed && neighborhoodRevision === revision)
-            resetView();
+        return () => {
+            const hadSelection = !!selected;
+            source = next;
+            sourceSelect.value = source;
+            selected = undefined;
+            const revision = ++neighborhoodRevision;
+            delete root.dataset.selectedNeighborhood;
+            root.dataset.source = source;
+            layerFades.crossfade(areas, () => areas.replaceChildren(...nextItems.map((item) => item.node)));
+            neighborhoodSelect.replaceChildren(element('option', 'No neighborhood selected'));
+            neighborhoodSelect.options[0].value = '';
+            neighborhoodSelect.append(...nextOptions);
+            items = nextItems;
+            if (items[0])
+                items[0].node.setAttribute('tabindex', '0');
+            updateResults();
+            updateDetail();
+            updateComposition();
+            status.textContent =
+                mode === 'basemap'
+                    ? 'San Francisco basemap.'
+                    : mode === 'districts'
+                        ? `${year} supervisorial districts. Numbers identify each district.`
+                        : `${formatSourceLabel(source)}. Select a neighborhood to begin.`;
+            if (hadSelection)
+                root.dispatchEvent(new CustomEvent('neighborhoodchange', {
+                    bubbles: true,
+                    detail: { feature: null, source, id: null, name: null },
+                }));
+            if (reset && !destroyed && neighborhoodRevision === revision)
+                resetView();
+        };
+    }
+    function setSource(next) {
+        if (!destroyed)
+            prepareSource(next)();
     }
     function syncFeatureControls() {
         featureControls.hidden = neighborhoodLabel.hidden && markerLabel.hidden;
@@ -1653,7 +1661,135 @@ export function createNeighborhoodExplorerCore(options = {}, data) {
         scheduleLabels();
         root.dispatchEvent(new CustomEvent('mapresize', { bubbles: true }));
     };
+    let presentationRevision = 0;
+    function applyPresentation(patch, onCommit, isCurrent = () => true) {
+        const revision = ++presentationRevision;
+        const nextYear = patch.year ?? year;
+        const nextMode = patch.mode ?? mode;
+        if ((patch.year !== undefined || nextMode === 'districts') &&
+            (!data.map.districts?.[nextYear] || !data.districts?.[nextYear]))
+            throw new RangeError(`No ${nextYear} district dataset was supplied.`);
+        if (nextMode === 'neighborhoods' && !sources.length)
+            throw new RangeError('No neighborhood dataset was supplied.');
+        if (patch.source !== undefined && !Object.hasOwn(collections, patch.source))
+            throw new RangeError(`Unknown neighborhood source: ${patch.source}`);
+        const commitSource = patch.source !== undefined && patch.source !== source
+            ? prepareSource(patch.source, false)
+            : undefined;
+        const appearance = patch.appearance;
+        const nextStyle = appearance ? appearance.districtStyle : districtStyle;
+        const districtVersion = districtRevision;
+        const prepared = appearance || nextYear !== year
+            ? prepareDistrictStyles(data.map.districts?.[nextYear] ?? [], nextStyle)
+            : districtStyles;
+        if (destroyed ||
+            !isCurrent() ||
+            revision !== presentationRevision ||
+            districtVersion !== districtRevision)
+            return false;
+        if (nextYear !== year) {
+            // Validate target paths and label coordinates before any presentation group commits.
+            getLayerPathsWithData({ year: nextYear }, data.map, false);
+            for (const feature of data.districts?.[nextYear]?.features ?? [])
+                for (const point of feature.properties.labelPoints)
+                    map.project(point);
+        }
+        onCommit?.();
+        if (appearance) {
+            districtRevision++;
+            const next = copyAppearance(appearance);
+            theme = next.theme ?? 'transit';
+            colors = next.colors ?? {};
+            labelStyle = next.labelStyle ?? {};
+            areaStyle = next.areaStyle ?? {};
+            styleOptions = next.style ?? {};
+            minLabelSize = next.labelSize?.min ?? 11;
+            maxLabelSize = next.labelSize?.max ?? 12;
+            markerRadius = next.markerRadius ?? 6;
+            markerHitSize = next.markerHitSize ?? 44;
+            markerColor = next.markerColor ?? colors.marker ?? '#245b61';
+            selectedMarkerColor = next.selectedMarkerColor ?? colors.selected ?? '#f04f32';
+            districtTransition.cancel();
+            const fills = districtLayers.find((layer) => layer.dataset.layer === 'district-fills');
+            const fade = layerFades.duration();
+            const stylesChanged = nextStyle !== districtStyle ||
+                [...prepared].some(([id, value]) => ['fill', 'stroke', 'opacity'].some((key) => value[key] !== districtStyles.get(id)?.[key]));
+            if (fills && fade && enabled('districtFills') && nextYear === year && stylesChanged)
+                districtTransition.fade(fills, fade);
+            districtStyle = nextStyle;
+            districtStyles = prepared;
+            const palette = resolveMapColors(theme, colors);
+            svg.querySelector('rect')?.setAttribute('fill', palette.water);
+            svg.querySelector('[data-layer="coast"]')?.setAttribute('fill', palette.land);
+            svg.querySelector('[data-layer="coastline"]')?.setAttribute('stroke', palette.district);
+            for (const [layer, color] of [
+                ['landmarks', palette.park],
+                ['highways', palette.highway],
+                ['key-roads', palette.road],
+            ])
+                for (const node of svg.querySelectorAll(`[data-layer="${layer}"] path`)) {
+                    node.setAttribute(layer === 'landmarks' ? 'fill' : 'stroke', color);
+                    if (layer === 'highways')
+                        node.setAttribute('stroke-width', theme === 'transit' ? '2' : '1.4');
+                }
+            for (const [token, fallback, name] of [
+                ['ink', '#18364f', 'ink'],
+                ['surface', '#fff', 'surface'],
+                ['accent', '#163d61', 'accent'],
+                ['border', '#cedae3', 'border'],
+                ['focus', '#1676b8', 'focus'],
+                ['controlGap', '6px', 'control-gap'],
+                ['font', 'system-ui,sans-serif', 'font'],
+            ])
+                root.style.setProperty(`--sf-map-${name}`, styleOptions[token] ?? fallback);
+            labelLayer.setAttribute('font-family', labelStyle.fontFamily ?? styleOptions.font ?? 'system-ui,sans-serif');
+            labelRenderer.invalidateMetrics();
+            for (const station of stationItems)
+                station.node.setAttribute('stroke', colors.bart ?? '#0073ae');
+            for (const kind of ['bart', 'park', 'highway', 'road']) {
+                const symbol = legend.querySelector(`.sf-explorer-legend-${kind}`);
+                if (symbol) {
+                    symbol.style.removeProperty(kind === 'bart' ? 'border-color' : 'background-color');
+                    if (colors[kind])
+                        symbol.style.setProperty(kind === 'bart' ? 'border-color' : 'background-color', colors[kind]);
+                }
+            }
+            for (const item of items) {
+                const active = item.feature === selected;
+                item.node.setAttribute('fill', active ? (areaStyle.selectedFill ?? '#408dbe') : 'transparent');
+                item.node.setAttribute('stroke', active ? (areaStyle.selectedStroke ?? '#176ba2') : (colors.neighborhood ?? '#9caebc'));
+            }
+            for (const item of markerItems) {
+                item.dot.setAttribute('fill', item.marker.id === selectedMarker
+                    ? selectedMarkerColor
+                    : (item.marker.color ?? markerColor));
+                item.ring.setAttribute('stroke', features.selectedMarkerRing
+                    ? (features.selectedMarkerRing.color ?? selectedMarkerColor)
+                    : selectedMarkerColor);
+            }
+            invalidateClusters();
+            updateDistrictAppearance();
+        }
+        if (nextYear !== year)
+            setDistrictYear(nextYear, {}, prepared);
+        if (destroyed || revision !== presentationRevision || !isCurrent())
+            return false;
+        commitSource?.();
+        if (destroyed || revision !== presentationRevision || !isCurrent())
+            return false;
+        if (commitSource && appearance)
+            for (const item of items)
+                item.node.setAttribute('stroke', colors.neighborhood ?? '#9caebc');
+        if (patch.mode !== undefined)
+            setMode(patch.mode, false);
+        if (patch.labels !== undefined)
+            setLabels(patch.labels);
+        scheduleLabels();
+        return true;
+    }
     const explorer = Object.assign(root, {
+        applyPresentation,
+        getMapState: () => ({ mode, source, year, labels }),
         selectNeighborhood,
         getSelection,
         selectDistrict,

package/dist/src/guide-map.js

@@ -6,7 +6,7 @@ import { guideOptions } from './presets.js';
 import { validateExplorerOptions } from './validation.js';
 function controllerOptions(options) {
     expandMapOptions(options);
-    const config = prepareConfiguration({ features: {}, layers: guideOptions.layers ?? {}, controls: {} }, {
+    const config = prepareConfiguration({ features: {}, layers: guideOptions.layers ?? {}, controls: {}, appearance: {} }, {
         features: options.features,
         layers: options.layers === undefined ? {} : options.layers,
         controls: options.controls,

package/dist/src/guide-static.js

@@ -1,9 +1,9 @@
 import { guideMapData } from './guide-data.js';
 import { guideShellCSS } from './guide-shell.js';
-import { createSFMapWithData } from './map-core.js';
+import { renderMap } from './static.js';
 /** Server-safe overview using exactly the guide browser geography. */
 export function createGuideSVG(options = {}) {
-    return createSFMapWithData({
+    return renderMap(guideMapData.map, {
         theme: 'transit',
         districtFills: false,
         districtLines: false,
@@ -14,7 +14,7 @@ export function createGuideSVG(options = {}) {
         keyRoads: true,
         bartStations: true,
         ...options,
-    }, guideMapData.map);
+    });
 }
 /** Stable compact frame, progressively enhanced with mountGuideMap(). No browser globals. */
 export function createGuideShell(options = {}) {

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

@@ -80,6 +80,20 @@ export declare function getLayerPathsWithData(options: SFMapOptions, data: SFMap
         point: [number, number];
     }[];
 };
+export declare function resolveMapColors(theme: SFMapOptions['theme'], colors?: SFMapOptions['colors']): {
+    water: string;
+    land: string;
+    district: string;
+    neighborhood: string;
+    highway: string;
+    road: string;
+    park: string;
+    landmark: string;
+    bart: string;
+    label: string;
+    marker: string;
+    selected: string;
+};
 /** Make an offline SVG and the matching longitude/latitude projection. */
 export declare function createSFMapWithData(options: SFMapOptions, data: SFMapData): {
     svg: string;

package/dist/src/map-core.js

@@ -104,6 +104,9 @@ const transitColors = {
     marker: '#0073ae',
     selected: '#0073ae',
 };
+export function resolveMapColors(theme, colors = {}) {
+    return { ...defaults, ...(theme === 'transit' ? transitColors : {}), ...colors };
+}
 let sequence = 0;
 /** Make an offline SVG and the matching longitude/latitude projection. */
 export function createSFMapWithData(options, data) {
@@ -115,7 +118,7 @@ export function createSFMapWithData(options, data) {
         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 colors = resolveMapColors(theme, options.colors);
     const animation = normalizeStaticAnimation(options.animation);
     const animated = animation !== null;
     const geometry = getLayerPathsWithData(options, data, false);

package/dist/src/map.js

@@ -1,3 +1,4 @@
+import { copyAppearance } from './appearance.js';
 import { validateCameraOptions } from './camera.js';
 import { expandMapOptions, prepareConfiguration } from './configuration.js';
 import { createNeighborhoodExplorerCore } from './explorer-core.js';
@@ -6,10 +7,11 @@ import { assertOptions } from './validation.js';
 /** No geography is imported. Supply a preset or your own immutable data. */
 export function createMap(data, options = {}) {
     const expanded = expandMapOptions(options);
-    let config = prepareConfiguration({ features: {}, layers: {}, controls: {} }, {
+    let config = prepareConfiguration({ features: {}, layers: {}, controls: {}, appearance: {} }, {
         features: options.features,
         layers: options.layers,
         controls: options.controls,
+        appearance: options.appearance,
     });
     const element = createNeighborhoodExplorerCore({
         mode: 'basemap',
@@ -18,6 +20,81 @@ export function createMap(data, options = {}) {
         onOverlayActivate: () => { },
     }, data);
     const subscriptions = new Set();
+    let configurationRevision = 0;
+    const sourceList = ['realtor', 'sf-find', 'analysis'].filter((source) => !!data.neighborhoods[source]);
+    const yearList = [2002, 2012, 2022].filter((year) => !!data.map.districts?.[year] && !!data.districts?.[year]);
+    const capabilities = () => ({
+        sources: [...sourceList],
+        years: [...yearList],
+        layers: Object.fromEntries(layerKeys.map((key) => [
+            key,
+            key.startsWith('district')
+                ? !!data.map.districts?.[element.getMapState().year]?.length &&
+                    yearList.includes(element.getMapState().year)
+                : key.startsWith('neighborhood')
+                    ? !!data.neighborhoods[element.getMapState().source]?.features.length
+                    : key === 'roadLabels'
+                        ? !!data.map.keyRoads?.length
+                        : !!data.map[key]?.length,
+        ])),
+    });
+    const snapshot = () => ({
+        ...element.getMapState(),
+        ...structuredClone({
+            features: config.features,
+            layers: config.layers,
+            controls: config.controls,
+        }),
+        appearance: copyAppearance(config.appearance),
+    });
+    const resolved = () => {
+        const state = element.getMapState();
+        const supplied = capabilities().layers;
+        return {
+            ...snapshot(),
+            ...state,
+            layers: Object.fromEntries(layerKeys.map((key) => [
+                key,
+                supplied[key] &&
+                    (!key.endsWith('Labels') || state.labels) &&
+                    (config.layers[key] ??
+                        (key.startsWith('district')
+                            ? state.mode === 'districts'
+                            : key.startsWith('neighborhood')
+                                ? state.mode === 'neighborhoods'
+                                : true)),
+            ])),
+        };
+    };
+    let previousMarker = element.getSelectedMarker();
+    let previousNeighborhood = element.getSelection();
+    let previousDistrict = element.getSelectedDistrict();
+    const selectionListeners = [];
+    for (const type of ['markerchange', 'neighborhoodchange', 'districtchange']) {
+        const handle = (event) => {
+            if (event.target !== element)
+                return;
+            let detail;
+            if (type === 'markerchange') {
+                const current = element.getSelectedMarker();
+                detail = { kind: 'marker', current, previous: previousMarker };
+                previousMarker = current;
+            }
+            else if (type === 'neighborhoodchange') {
+                const current = element.getSelection();
+                detail = { kind: 'neighborhood', current, previous: previousNeighborhood };
+                previousNeighborhood = current;
+            }
+            else {
+                const current = element.getSelectedDistrict();
+                detail = { kind: 'district', current, previous: previousDistrict };
+                previousDistrict = current;
+            }
+            element.dispatchEvent(new CustomEvent('selectionchange', { detail: structuredClone(detail) }));
+        };
+        element.addEventListener(type, handle);
+        selectionListeners.push(() => element.removeEventListener(type, handle));
+    }
     let destroyed = false;
     function active() {
         if (destroyed)
@@ -41,6 +118,38 @@ export function createMap(data, options = {}) {
             element.fitGeometry(geometry, padding, motion);
         }),
     });
+    function configure(patch) {
+        const revision = ++configurationRevision;
+        const next = prepareConfiguration(config, patch);
+        const hasFeatures = 'features' in patch, hasLayers = 'layers' in patch, hasControls = 'controls' in patch;
+        const layers = Object.fromEntries(layerKeys.map((key) => [key, next.layers[key]]));
+        const controls = Object.fromEntries(controlKeys.map((key) => [key, next.controls[key]]));
+        const features = patch.features === undefined
+            ? next.features
+            : Object.fromEntries(Object.keys(patch.features).map((key) => [
+                key,
+                next.features[key],
+            ]));
+        let committed = false;
+        element.applyPresentation({ ...patch, ...('appearance' in patch ? { appearance: next.appearance } : {}) }, () => {
+            committed = true;
+            config = next;
+            if (hasFeatures)
+                element.setFeatures(features);
+            if (hasLayers)
+                element.setLayers(layers);
+            if (hasControls)
+                element.setControls(controls);
+        }, () => !destroyed && revision === configurationRevision);
+        return committed && !destroyed && revision === configurationRevision;
+    }
+    function updateView(patch, options = {}) {
+        assertOptions(options, 'view update', ['resetView']);
+        if (options.resetView !== undefined && typeof options.resetView !== 'boolean')
+            throw new TypeError('resetView must be a boolean.');
+        if (configure(patch) && options.resetView !== false)
+            element.resetView();
+    }
     return Object.freeze({
         element,
         overlayElement: element.overlayElement,
@@ -49,21 +158,14 @@ export function createMap(data, options = {}) {
             return destroyed;
         },
         configure: use((patch) => {
-            const next = prepareConfiguration(config, patch);
-            // Full switch patches are needed so removed overrides reset engine defaults.
-            const layers = Object.fromEntries(layerKeys.map((key) => [key, next.layers[key]]));
-            const controls = Object.fromEntries(controlKeys.map((key) => [key, next.controls[key]]));
-            if ('features' in patch)
-                element.setFeatures(patch.features ?? next.features);
-            if ('layers' in patch)
-                element.setLayers(layers);
-            if ('controls' in patch)
-                element.setControls(controls);
-            config = next;
+            configure(patch);
         }),
-        getConfiguration: use(() => structuredClone(config)),
+        getConfiguration: use(snapshot),
+        getResolvedConfiguration: use(resolved),
+        getCapabilities: use(capabilities),
         on: use((type, listener) => {
             if (![
+                'selectionchange',
                 'markerchange',
                 'districtchange',
                 'districthover',
@@ -91,17 +193,59 @@ export function createMap(data, options = {}) {
         }),
         setMarkers: use(element.setMarkers),
         setOverlays: use(element.setOverlays),
+        selectFeature: use((reference, options) => {
+            assertOptions(reference, 'feature reference');
+            if (!['marker', 'neighborhood', 'district'].includes(reference.kind))
+                throw new TypeError('Unknown feature kind.');
+            assertOptions(reference, 'feature reference', reference.kind === 'marker'
+                ? ['kind', 'id']
+                : reference.kind === 'neighborhood'
+                    ? ['kind', 'id', 'source']
+                    : ['kind', 'id', 'year']);
+            if (reference.kind === 'district') {
+                if (reference.id !== null &&
+                    (typeof reference.id !== 'number' || !Number.isFinite(reference.id)))
+                    throw new TypeError('District IDs must be finite numbers or null.');
+                if (![2002, 2012, 2022].includes(reference.year))
+                    throw new RangeError('Unknown district year.');
+                if (reference.year !== element.getMapState().year || !yearList.includes(reference.year))
+                    return false;
+                return element.selectDistrict(reference.id, options);
+            }
+            if (reference.id !== null && (typeof reference.id !== 'string' || !reference.id))
+                throw new TypeError('Feature IDs must be nonempty strings or null.');
+            if (reference.kind === 'marker')
+                return element.selectMarker(reference.id, options);
+            if (!['realtor', 'sf-find', 'analysis'].includes(reference.source))
+                throw new RangeError('Unknown neighborhood source.');
+            if (reference.source !== element.getMapState().source ||
+                !sourceList.includes(reference.source))
+                return false;
+            const feature = reference.id === null
+                ? null
+                : data.neighborhoods[reference.source]?.features.find((entry) => entry.id === reference.id);
+            if (reference.id !== null && !feature)
+                return false;
+            return element.selectNeighborhood(feature?.id ?? null, options);
+        }),
         selectMarker: use(element.selectMarker),
         getSelectedMarker: use(element.getSelectedMarker),
         selectNeighborhood: use(element.selectNeighborhood),
         getSelectedNeighborhood: use(element.getSelection),
         selectDistrict: use(element.selectDistrict),
         getSelectedDistrict: use(element.getSelectedDistrict),
-        setDistrictYear: use(element.setDistrictYear),
-        setDistrictStyle: use(element.setDistrictStyle),
-        setSource: use(element.setSource),
-        setMode: use(element.setMode),
-        setLabels: use(element.setLabels),
+        setDistrictYear: use((...args) => {
+            configurationRevision++;
+            element.setDistrictYear(...args);
+        }),
+        setDistrictStyle: use((style) => {
+            configure({ appearance: { districtStyle: style } });
+        }),
+        setSource: use((source, options) => updateView({ source }, options)),
+        setMode: use((mode, options) => updateView({ mode }, options)),
+        setLabels: use((labels) => {
+            configure({ labels });
+        }),
         setTouchNavigation: use(element.setTouchNavigation),
         projectToScreen: use(element.projectToScreen),
         destroy() {
@@ -110,6 +254,8 @@ export function createMap(data, options = {}) {
             destroyed = true;
             for (const unsubscribe of subscriptions)
                 unsubscribe();
+            for (const unsubscribe of selectionListeners)
+                unsubscribe();
             element.destroy();
         },
     });

package/dist/src/static.d.ts

@@ -1,15 +1,18 @@
+import type { InteractiveSFMapData } from './explorer-data.js';
 import { type SFMapData } from './map-core.js';
 import type { SFMapOptions } from './types.js';
+/** Either compact static geography or the same source-aware geography used by createMap. */
+export type StaticMapInput = SFMapData | InteractiveSFMapData;
 export type { DistrictRowData, SFMapData as StaticMapData } from './map-core.js';
-export type { DistrictStyle, DistrictYear, SFMapOptions as StaticMapOptions } from './types.js';
+export type { DistrictStyle, DistrictYear, SFMapOptions as StaticMapOptions, StaticMapAppearance, StaticMapLayers, } from './types.js';
 /** Server-safe SVG rendering with explicit data; returns SVG plus projection helpers. */
-export declare function renderMap(data: SFMapData, options?: SFMapOptions): {
+export declare function renderMap(data: StaticMapInput, options?: SFMapOptions): {
     svg: string;
     project: (coordinates: import("../data/types.js").Position) => [number, number];
     viewBox: [number, number, number, number];
 };
 /** Project canonical layer geometry without constructing an SVG string. */
-export declare function getLayerPaths(data: SFMapData, options?: SFMapOptions): {
+export declare function getLayerPaths(data: StaticMapInput, options?: SFMapOptions): {
     year: import("./types.js").DistrictYear;
     viewBox: [number, number, number, number];
     project: (coordinates: import("../data/types.js").Position) => [number, number];