@kahwee/sf-map-svg 5.0.0 → 5.1.1

package/dist/data/precincts.d.ts

@@ -0,0 +1,2 @@
+import type { FeatureCollection, PrecinctProperties } from './types.js';
+export declare const precinctMaps: Readonly<Record<2022, FeatureCollection<PrecinctProperties>>>;

package/dist/data/precincts.js

@@ -0,0 +1,5 @@
+import { deepFreeze } from '../src/immutable.js';
+import precincts2022 from './precincts-2022.json' with { type: 'json' };
+export const precinctMaps = deepFreeze({
+    2022: precincts2022,
+});

package/dist/data/types.d.ts

@@ -93,6 +93,11 @@ export interface DistrictProperties {
     readonly labelPoints: readonly Position[];
     readonly displayExtras: Geometry | null;
 }
+export interface PrecinctProperties {
+    /** Four-digit Department of Elections precinct number, such as "1101". */
+    readonly precinct: string;
+    readonly year: 2022;
+}
 export interface Catalog {
     readonly schemaVersion: 1;
     readonly description: string;

package/dist/src/district-controller.d.ts

@@ -0,0 +1,64 @@
+import type { Geometry, Position } from '../data/types.js';
+import { prepareDistrictStyles } from './district-style.js';
+import type { InteractiveSFMapData } from './explorer-data.js';
+import type { normalizeFeatures } from './features.js';
+import type { LabelItem } from './label-candidates.js';
+import type { CameraOptions, DistrictSelection, DistrictYear, NeighborhoodExplorerOptions } from './types.js';
+type Host = {
+    root: HTMLElement;
+    svg: SVGSVGElement;
+    status: HTMLElement;
+    data: InteractiveSFMapData;
+    districtLayers: SVGGElement[];
+    get year(): DistrictYear;
+    set year(value: DistrictYear);
+    get theme(): NeighborhoodExplorerOptions['theme'];
+    get colors(): NonNullable<NeighborhoodExplorerOptions['colors']>;
+    get features(): ReturnType<typeof normalizeFeatures>;
+    get destroyed(): boolean;
+    get initialized(): boolean;
+    reducedMotion: MediaQueryList;
+    enabled(layer: 'districtFills' | 'districtLines'): boolean;
+    fadeDuration(): number;
+    fitGeometry(geometry: Geometry, padding: undefined, options: CameraOptions): void;
+    project(point: Position): [number, number];
+    setLabels(items: LabelItem[]): void;
+    updateComposition(): void;
+    scheduleLabels(): void;
+};
+/** Owns district selection, styles, revisions and cancellable motion. */
+export declare function createDistrictController(host: Host, initialDistrictStyle: NeighborhoodExplorerOptions['districtStyle']): {
+    districtRow: (id: number) => import("./map-core.js").DistrictRowData | undefined;
+    districtSelection: (id: number | null) => DistrictSelection | {
+        id: null;
+        year: DistrictYear;
+        district: null;
+    };
+    getSelectedDistrict: () => DistrictSelection | null;
+    updateDistrictAppearance: () => void;
+    selectDistrict: (id: number | null, options?: {
+        fit?: boolean;
+    } & CameraOptions) => boolean;
+    activateDistrict: (id: number) => boolean;
+    setDistrictStyle: (style: ((district: import('./map-core.js').DistrictRowData) => import("./types.js").DistrictStyle) | undefined) => void;
+    setDistrictYear: (next: DistrictYear, options?: CameraOptions, preparedStyles?: ReturnType<typeof prepareDistrictStyles>) => void;
+    transition: {
+        cancel(): void;
+        fade(layer: SVGGElement, duration: number): void;
+    };
+    morph: {
+        stop: () => void;
+        start(layer: SVGGElement, previous: ReadonlyMap<string, string>, { duration, stroke }: {
+            duration: number;
+            stroke: string;
+        }): void;
+        readonly active: boolean;
+    };
+    readonly revision: number;
+    invalidate(): void;
+    readonly style: ((district: import('./map-core.js').DistrictRowData) => import("./types.js").DistrictStyle) | undefined;
+    readonly styles: ReadonlyMap<number, import("./types.js").DistrictStyle>;
+    commitStyles(style: ((district: import('./map-core.js').DistrictRowData) => import("./types.js").DistrictStyle) | undefined, styles: ReadonlyMap<number, import("./types.js").DistrictStyle>): void;
+    hovered: number | null;
+};
+export {};

package/dist/src/district-controller.js

@@ -0,0 +1,215 @@
+import { validateCameraOptions } from './camera.js';
+import { renderDistrictAppearance } from './district-layer.js';
+import { createDistrictMorph } from './district-morph.js';
+import { prepareDistrictStyles } from './district-style.js';
+import { createDistrictTransition } from './district-transition.js';
+import { svgElement } from './dom.js';
+import { getLayerPathsWithData } from './map-core.js';
+/** Owns district selection, styles, revisions and cancellable motion. */
+export function createDistrictController(host, initialDistrictStyle) {
+    const { root, svg, status, data, districtLayers, reducedMotion, enabled, fitGeometry, updateComposition, scheduleLabels, } = host;
+    const districtMorph = createDistrictMorph();
+    let selectedDistrict = null;
+    let hoveredDistrict = null;
+    let districtStyle = initialDistrictStyle;
+    let districtStyles = prepareDistrictStyles(data.map.districts?.[host.year] ?? [], districtStyle);
+    const districtTransition = createDistrictTransition();
+    let districtRevision = 0;
+    root.dataset.year = String(host.year);
+    function districtRow(id) {
+        return data.map.districts?.[host.year]?.find((district) => district.id === id);
+    }
+    function districtSelection(id) {
+        const district = id === null ? undefined : districtRow(id);
+        return district
+            ? { id: district.id, year: host.year, district: structuredClone(district) }
+            : { id: null, year: host.year, district: null };
+    }
+    function getSelectedDistrict() {
+        return selectedDistrict === null
+            ? null
+            : districtSelection(selectedDistrict);
+    }
+    function updateDistrictAppearance() {
+        renderDistrictAppearance({
+            svg,
+            rows: data.map.districts?.[host.year] ?? [],
+            styles: districtStyles,
+            selectedDistrict,
+            hoveredDistrict,
+            year: host.year,
+            theme: host.theme,
+            colors: host.colors,
+            fills: enabled('districtFills'),
+            lines: enabled('districtLines'),
+        });
+    }
+    function selectDistrict(id, options = {}) {
+        if (host.destroyed)
+            return false;
+        validateCameraOptions(options);
+        if (id !== null && (!Number.isInteger(id) || !districtRow(id)))
+            return false;
+        const changed = selectedDistrict !== id;
+        const revision = ++districtRevision;
+        selectedDistrict = id;
+        if (id === null)
+            delete root.dataset.selectedDistrict;
+        else
+            root.dataset.selectedDistrict = String(id);
+        updateDistrictAppearance();
+        const selectedRow = id === null ? undefined : districtRow(id);
+        if (selectedRow && options.fit)
+            fitGeometry(selectedRow.geometry, undefined, options);
+        if (host.destroyed || revision !== districtRevision)
+            return true;
+        status.textContent =
+            id === null
+                ? 'District selection cleared.'
+                : `District ${id} selected, ${host.year} boundaries.`;
+        if (changed)
+            root.dispatchEvent(new CustomEvent('districtchange', { bubbles: true, detail: districtSelection(id) }));
+        return true;
+    }
+    function activateDistrict(id) {
+        const revision = districtRevision + 1;
+        if (!selectDistrict(id) || host.destroyed || revision !== districtRevision)
+            return false;
+        root.dispatchEvent(new CustomEvent('districtactivate', { bubbles: true, detail: districtSelection(id) }));
+        return !host.destroyed && revision === districtRevision;
+    }
+    function setDistrictStyle(style) {
+        if (host.destroyed)
+            return;
+        const revision = districtRevision;
+        const prepared = prepareDistrictStyles(data.map.districts?.[host.year] ?? [], style);
+        if (host.destroyed || revision !== districtRevision)
+            return;
+        districtRevision++;
+        districtStyle = style;
+        districtStyles = prepared;
+        const fills = districtLayers.find((layer) => layer.dataset.layer === 'district-fills');
+        const fade = host.fadeDuration();
+        // A new style settles any fill crossfade still running from an earlier change.
+        districtTransition.cancel();
+        if (fills && fade && enabled('districtFills'))
+            districtTransition.fade(fills, fade);
+        updateDistrictAppearance();
+    }
+    function setDistrictYear(next, options = {}, preparedStyles) {
+        if (host.destroyed)
+            return;
+        validateCameraOptions(options);
+        if (![2002, 2012, 2022].includes(next))
+            throw new RangeError('District year must be 2002, 2012, or 2022.');
+        if (!data.map.districts?.[next] || !data.districts?.[next])
+            throw new RangeError(`No ${next} district dataset was supplied.`);
+        if (next === host.year)
+            return;
+        const revision = districtRevision;
+        const prepared = preparedStyles ?? prepareDistrictStyles(data.map.districts[next], districtStyle);
+        if (host.destroyed || revision !== districtRevision)
+            return;
+        const committedRevision = ++districtRevision;
+        const geometry = getLayerPathsWithData({ year: next }, data.map, false);
+        const previousYear = host.year;
+        districtTransition.cancel();
+        districtMorph.stop();
+        const lineLayer = districtLayers.find((layer) => layer.dataset.layer === 'district-lines');
+        const morph = host.features.districtMorph &&
+            options.animate !== false &&
+            host.initialized &&
+            !reducedMotion.matches &&
+            (enabled('districtLines') || enabled('districtFills'))
+            ? host.features.districtMorph
+            : false;
+        const previousOutlines = morph && lineLayer
+            ? new Map([...lineLayer.querySelectorAll('path[data-district]')].map((path) => [
+                path.dataset.district ?? '',
+                path.getAttribute('d') ?? '',
+            ]))
+            : undefined;
+        for (const layer of districtLayers) {
+            if (morph) {
+                // The morph replaces the line crossfade; fills fade across the whole morph.
+                if (layer !== lineLayer)
+                    districtTransition.fade(layer, morph.duration);
+            }
+            else if (options.animate && !reducedMotion.matches)
+                districtTransition.fade(layer, options.duration ?? 280);
+            layer.replaceChildren(...geometry.districts.map((district) => svgElement('path', {
+                'data-district': district.id,
+                d: district.path,
+                ...(layer.dataset.layer === 'district-fills'
+                    ? { 'fill-rule': 'evenodd' }
+                    : { fill: 'none', 'stroke-width': 1.1 }),
+            })));
+        }
+        host.year = next;
+        districtStyles = prepared;
+        hoveredDistrict = null;
+        root.dataset.year = String(host.year);
+        svg.dataset.year = String(host.year);
+        host.setLabels((data.districts[next]?.features ?? []).flatMap((feature) => feature.properties.labelPoints.map((point) => ({
+            point: host.project(point),
+            name: String(feature.properties.district),
+            kind: 'district',
+        }))));
+        if (selectedDistrict !== null && !districtRow(selectedDistrict))
+            selectedDistrict = null;
+        if (selectedDistrict === null)
+            delete root.dataset.selectedDistrict;
+        updateDistrictAppearance();
+        updateComposition();
+        if (morph && lineLayer && previousOutlines)
+            districtMorph.start(lineLayer, previousOutlines, {
+                duration: morph.duration,
+                stroke: host.colors.district ?? '#71838a',
+            });
+        scheduleLabels();
+        status.textContent = `${host.year} supervisorial districts.`;
+        root.dispatchEvent(new CustomEvent('districtyearchange', {
+            bubbles: true,
+            detail: { year: host.year, previousYear },
+        }));
+        if (!host.destroyed && committedRevision === districtRevision && selectedDistrict !== null)
+            root.dispatchEvent(new CustomEvent('districtchange', {
+                bubbles: true,
+                detail: districtSelection(selectedDistrict),
+            }));
+    }
+    return {
+        districtRow,
+        districtSelection,
+        getSelectedDistrict,
+        updateDistrictAppearance,
+        selectDistrict,
+        activateDistrict,
+        setDistrictStyle,
+        setDistrictYear,
+        transition: districtTransition,
+        morph: districtMorph,
+        get revision() {
+            return districtRevision;
+        },
+        invalidate() {
+            districtRevision++;
+        },
+        get style() {
+            return districtStyle;
+        },
+        get styles() {
+            return districtStyles;
+        },
+        commitStyles(style, styles) {
+            districtStyle = style;
+            districtStyles = styles;
+        },
+        get hovered() {
+            return hoveredDistrict;
+        },
+        set hovered(id) {
+            hoveredDistrict = id;
+        },
+    };
+}

package/dist/src/explorer-core.js

@@ -2,10 +2,8 @@ import { copyAppearance } from './appearance.js';
 import { createCamera, validateCameraOptions } from './camera.js';
 import { createClusterLayer } from './cluster-layer.js';
 import { clusterPoints } from './clusters.js';
-import { renderDistrictAppearance } from './district-layer.js';
-import { createDistrictMorph } from './district-morph.js';
+import { createDistrictController } from './district-controller.js';
 import { prepareDistrictStyles } from './district-style.js';
-import { createDistrictTransition } from './district-transition.js';
 import { element, setAttributeIfChanged, svgElement } from './dom.js';
 import { createExplorerControls } from './explorer-controls.js';
 import { fitBounds, projectedBounds } from './explorer-layout.js';
@@ -182,177 +180,51 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
     const labelRenderer = createLabelRenderer(labelLayer);
     geography.append(areas, stations, labelLayer, overlayLayer, markerLayer);
     let view = [0, 0, 800];
-    let selectedDistrict = null;
-    let hoveredDistrict = null;
-    let districtStyle = initialDistrictStyle;
-    let districtStyles = prepareDistrictStyles(data.map.districts?.[year] ?? [], districtStyle);
-    const districtTransition = createDistrictTransition();
-    let districtRevision = 0;
-    root.dataset.year = String(year);
-    function districtRow(id) {
-        return data.map.districts?.[year]?.find((district) => district.id === id);
-    }
-    function districtSelection(id) {
-        const district = id === null ? undefined : districtRow(id);
-        return district
-            ? { id: district.id, year, district: structuredClone(district) }
-            : { id: null, year, district: null };
-    }
-    function getSelectedDistrict() {
-        return selectedDistrict === null
-            ? null
-            : districtSelection(selectedDistrict);
-    }
-    function updateDistrictAppearance() {
-        renderDistrictAppearance({
-            svg,
-            rows: data.map.districts?.[year] ?? [],
-            styles: districtStyles,
-            selectedDistrict,
-            hoveredDistrict,
-            year,
-            theme,
-            colors,
-            fills: enabled('districtFills'),
-            lines: enabled('districtLines'),
-        });
-    }
-    function selectDistrict(id, options = {}) {
-        if (destroyed)
-            return false;
-        validateCameraOptions(options);
-        if (id !== null && (!Number.isInteger(id) || !districtRow(id)))
-            return false;
-        const changed = selectedDistrict !== id;
-        const revision = ++districtRevision;
-        selectedDistrict = id;
-        if (id === null)
-            delete root.dataset.selectedDistrict;
-        else
-            root.dataset.selectedDistrict = String(id);
-        updateDistrictAppearance();
-        const selectedRow = id === null ? undefined : districtRow(id);
-        if (selectedRow && options.fit)
-            fitGeometry(selectedRow.geometry, undefined, options);
-        if (destroyed || revision !== districtRevision)
-            return true;
-        status.textContent =
-            id === null ? 'District selection cleared.' : `District ${id} selected, ${year} boundaries.`;
-        if (changed)
-            root.dispatchEvent(new CustomEvent('districtchange', { bubbles: true, detail: districtSelection(id) }));
-        return true;
-    }
-    function activateDistrict(id) {
-        const revision = districtRevision + 1;
-        if (!selectDistrict(id) || destroyed || revision !== districtRevision)
-            return false;
-        root.dispatchEvent(new CustomEvent('districtactivate', { bubbles: true, detail: districtSelection(id) }));
-        return !destroyed && revision === districtRevision;
-    }
-    function setDistrictStyle(style) {
-        if (destroyed)
-            return;
-        const revision = districtRevision;
-        const prepared = prepareDistrictStyles(data.map.districts?.[year] ?? [], style);
-        if (destroyed || revision !== districtRevision)
-            return;
-        districtRevision++;
-        districtStyle = style;
-        districtStyles = prepared;
-        const fills = districtLayers.find((layer) => layer.dataset.layer === 'district-fills');
-        const fade = layerFades.duration();
-        // A new style settles any fill crossfade still running from an earlier change.
-        districtTransition.cancel();
-        if (fills && fade && enabled('districtFills'))
-            districtTransition.fade(fills, fade);
-        updateDistrictAppearance();
-    }
-    function setDistrictYear(next, options = {}, preparedStyles) {
-        if (destroyed)
-            return;
-        validateCameraOptions(options);
-        if (![2002, 2012, 2022].includes(next))
-            throw new RangeError('District year must be 2002, 2012, or 2022.');
-        if (!data.map.districts?.[next] || !data.districts?.[next])
-            throw new RangeError(`No ${next} district dataset was supplied.`);
-        if (next === year)
-            return;
-        const revision = districtRevision;
-        const prepared = preparedStyles ?? prepareDistrictStyles(data.map.districts[next], districtStyle);
-        if (destroyed || revision !== districtRevision)
-            return;
-        const committedRevision = ++districtRevision;
-        const geometry = getLayerPathsWithData({ year: next }, data.map, false);
-        const previousYear = year;
-        districtTransition.cancel();
-        districtMorph.stop();
-        const lineLayer = districtLayers.find((layer) => layer.dataset.layer === 'district-lines');
-        const morph = features.districtMorph &&
-            options.animate !== false &&
-            initialized &&
-            !reducedMotion.matches &&
-            (enabled('districtLines') || enabled('districtFills'))
-            ? features.districtMorph
-            : false;
-        const previousOutlines = morph && lineLayer
-            ? new Map([...lineLayer.querySelectorAll('path[data-district]')].map((path) => [
-                path.dataset.district ?? '',
-                path.getAttribute('d') ?? '',
-            ]))
-            : undefined;
-        for (const layer of districtLayers) {
-            if (morph) {
-                // The morph replaces the line crossfade; fills fade across the whole morph.
-                if (layer !== lineLayer)
-                    districtTransition.fade(layer, morph.duration);
-            }
-            else if (options.animate && !reducedMotion.matches)
-                districtTransition.fade(layer, options.duration ?? 280);
-            layer.replaceChildren(...geometry.districts.map((district) => svgElement('path', {
-                'data-district': district.id,
-                d: district.path,
-                ...(layer.dataset.layer === 'district-fills'
-                    ? { 'fill-rule': 'evenodd' }
-                    : { fill: 'none', 'stroke-width': 1.1 }),
-            })));
-        }
-        year = next;
-        districtStyles = prepared;
-        hoveredDistrict = null;
-        root.dataset.year = String(year);
-        svg.dataset.year = String(year);
-        districtItems = (data.districts[next]?.features ?? []).flatMap((feature) => feature.properties.labelPoints.map((point) => ({
-            point: map.project(point),
-            name: String(feature.properties.district),
-            kind: 'district',
-        })));
-        if (selectedDistrict !== null && !districtRow(selectedDistrict))
-            selectedDistrict = null;
-        if (selectedDistrict === null)
-            delete root.dataset.selectedDistrict;
-        updateDistrictAppearance();
-        updateComposition();
-        if (morph && lineLayer && previousOutlines)
-            districtMorph.start(lineLayer, previousOutlines, {
-                duration: morph.duration,
-                stroke: colors.district ?? '#71838a',
-            });
-        scheduleLabels();
-        status.textContent = `${year} supervisorial districts.`;
-        root.dispatchEvent(new CustomEvent('districtyearchange', { bubbles: true, detail: { year, previousYear } }));
-        if (!destroyed && committedRevision === districtRevision && selectedDistrict !== null)
-            root.dispatchEvent(new CustomEvent('districtchange', {
-                bubbles: true,
-                detail: districtSelection(selectedDistrict),
-            }));
-    }
+    const districts = createDistrictController({
+        root,
+        svg,
+        status,
+        data,
+        districtLayers,
+        reducedMotion,
+        enabled,
+        fitGeometry,
+        updateComposition,
+        scheduleLabels,
+        get year() {
+            return year;
+        },
+        set year(value) {
+            year = value;
+        },
+        get theme() {
+            return theme;
+        },
+        get colors() {
+            return colors;
+        },
+        get features() {
+            return features;
+        },
+        get destroyed() {
+            return destroyed;
+        },
+        get initialized() {
+            return initialized;
+        },
+        fadeDuration: () => layerFades.duration(),
+        project: map.project,
+        setLabels: (items) => {
+            districtItems = items;
+        },
+    }, initialDistrictStyle);
+    const { districtRow, districtSelection, getSelectedDistrict, updateDistrictAppearance, selectDistrict, activateDistrict, setDistrictStyle, setDistrictYear, transition: districtTransition, morph: districtMorph, } = districts;
     updateDistrictAppearance();
     let destroyed = false;
     let initialized = false;
     const layerFades = createLayerTransitions(() => initialized && features.layerTransitions && !reducedMotion.matches
         ? features.layerTransitions.duration
         : 0);
-    const districtMorph = createDistrictMorph();
     const frames = createFrameScheduler({
         request: (callback) => requestAnimationFrame(callback),
         cancel: (id) => cancelAnimationFrame(id),
@@ -1098,9 +970,9 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
             ? event.target.closest('[data-layer="district-fills"] [data-district], [data-layer="district-lines"] [data-district]')
             : null;
         const id = district?.dataset.district ? Number(district.dataset.district) : null;
-        if (id === hoveredDistrict)
+        if (id === districts.hovered)
             return;
-        hoveredDistrict = id;
+        districts.hovered = id;
         updateDistrictAppearance();
         root.dispatchEvent(new CustomEvent('districthover', { bubbles: true, detail: districtSelection(id) }));
     });
@@ -1108,9 +980,9 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         if (event.relatedTarget instanceof Element &&
             event.relatedTarget.closest('[data-layer="district-fills"] [data-district], [data-layer="district-lines"] [data-district]'))
             return;
-        if (hoveredDistrict === null)
+        if (districts.hovered === null)
             return;
-        hoveredDistrict = null;
+        districts.hovered = null;
         updateDistrictAppearance();
         root.dispatchEvent(new CustomEvent('districthover', { bubbles: true, detail: districtSelection(null) }));
     });
@@ -1137,15 +1009,15 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
             ? prepareSource(patch.source, false)
             : undefined;
         const appearance = patch.appearance;
-        const nextStyle = appearance ? appearance.districtStyle : districtStyle;
-        const districtVersion = districtRevision;
+        const nextStyle = appearance ? appearance.districtStyle : districts.style;
+        const districtVersion = districts.revision;
         const prepared = appearance || nextYear !== year
             ? prepareDistrictStyles(data.map.districts?.[nextYear] ?? [], nextStyle)
-            : districtStyles;
+            : districts.styles;
         if (destroyed ||
             !isCurrent() ||
             revision !== presentationRevision ||
-            districtVersion !== districtRevision)
+            districtVersion !== districts.revision)
             return false;
         if (nextYear !== year) {
             // Validate target paths and label coordinates before any presentation group commits.
@@ -1156,7 +1028,7 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
         }
         onCommit?.();
         if (appearance) {
-            districtRevision++;
+            districts.invalidate();
             const next = copyAppearance(appearance);
             theme = next.theme ?? 'transit';
             colors = next.colors ?? {};
@@ -1172,12 +1044,11 @@ export function createNeighborhoodExplorerCore(options = {}, data, ui) {
             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]));
+            const stylesChanged = nextStyle !== districts.style ||
+                [...prepared].some(([id, value]) => ['fill', 'stroke', 'opacity'].some((key) => value[key] !== districts.styles.get(id)?.[key]));
             if (fills && fade && enabled('districtFills') && nextYear === year && stylesChanged)
                 districtTransition.fade(fills, fade);
-            districtStyle = nextStyle;
-            districtStyles = prepared;
+            districts.commitStyles(nextStyle, prepared);
             const palette = resolveMapColors(theme, colors);
             svg.querySelector('rect')?.setAttribute('fill', palette.water);
             svg.querySelector('[data-layer="coast"]')?.setAttribute('fill', palette.land);