@fusion.dev/helix-map 0.110.1 → 0.110.3

package/dist/connect-map/connect-map.d.ts

@@ -248,6 +248,23 @@ export interface MapLayerSpec {
      */
     points: MapPlace[];
 }
+/**
+ * The stretch of the world some places cover, and their middle.
+ *
+ * **One pass rather than `Math.max(...lats)`**, which spreads every place into
+ * an argument list and throws past about 65,000 of them in Safari: a points
+ * layer of that size made `fit()` throw.
+ *
+ * **Measured the short way round.** Longitudes are taken within 180 degrees of
+ * the first place, so two places either side of the antimeridian are a degree
+ * apart and not the whole world: framed naively, 179.5 and -179.5 zoomed out
+ * to the globe, and their middle landed at 0. The bounds may run past 180 as
+ * a result, which both renderers draw.
+ */
+export declare const reachOf: (places: readonly MapPlace[]) => {
+    bounds: MapBounds;
+    middle: MapPlace;
+};
 /**
  * How far along a line each of its points is, in meters from the first:
  * degrees with longitude narrowed by the latitude, which is a flat map's idea

package/dist/connect-map/connect-map.js

@@ -28,6 +28,37 @@ const sameNames = (had, names) => (had?.length ?? 0) === names.length && names.e
 const isMarker = (node) => node?.isMapMarker === true;
 const isPosition = (node) => node?.isMapPosition === true;
 const METERS_PER_DEGREE = 111_320;
+const LEAST_REACH = 0.005;
+export const reachOf = (places) => {
+    const first = places[0]?.lng ?? 0;
+    let north = -90;
+    let south = 90;
+    let east = -Infinity;
+    let west = Infinity;
+    let lats = 0;
+    let lngs = 0;
+    for (const place of places) {
+        const lng = place.lng + 360 * Math.round((first - place.lng) / 360);
+        north = Math.max(north, place.lat);
+        south = Math.min(south, place.lat);
+        east = Math.max(east, lng);
+        west = Math.min(west, lng);
+        lats += place.lat;
+        lngs += lng;
+    }
+    const count = Math.max(places.length, 1);
+    const across = ((lngs / count + 540) % 360) - 180;
+    if (north - south < LEAST_REACH && east - west < LEAST_REACH) {
+        north += LEAST_REACH;
+        south -= LEAST_REACH;
+        east += LEAST_REACH;
+        west -= LEAST_REACH;
+    }
+    return {
+        bounds: { northEast: { lat: north, lng: east }, southWest: { lat: south, lng: west } },
+        middle: { lat: lats / count, lng: across },
+    };
+};
 const AHEAD = 10;
 export const distancesAlong = (points) => {
     let total = 0;
@@ -63,6 +94,9 @@ const cut = (points, fraction) => {
     return [points, []];
 };
 const WALKED = 100;
+const WALK_LINE = 24;
+const WALK_SETTLES = 250;
+const DRAGGED = 4;
 const sameWalk = (had, walk) => (had?.length ?? 0) === walk.length &&
     walk.every((one, at) => {
         const was = had?.[at];
@@ -70,6 +104,7 @@ const sameWalk = (had, walk) => (had?.length ?? 0) === walk.length &&
             Math.round(was.x) === Math.round(one.x) &&
             Math.round(was.y) === Math.round(one.y) &&
             was.label === one.label &&
+            was.value === one.value &&
             was.count === one.count);
     });
 const isLayer = (node) => node?.isMapLayer === true;
@@ -169,8 +204,10 @@ export const connectMap = (frame, driver, options = {}) => {
             types: ['standard', 'hybrid', 'satellite'],
         })
             .then((previews) => {
-            ;
-            frame.mapPreviews = previews;
+            if (live) {
+                ;
+                frame.mapPreviews = previews;
+            }
         })
             .catch(() => {
             stale = true;
@@ -180,9 +217,18 @@ export const connectMap = (frame, driver, options = {}) => {
         });
     };
     const restoreKeyboard = options.keyboard === 'renderer' ? undefined : driver.silenceKeyboard?.();
-    const restoreZoom = frame.shadowRoot?.querySelector('[part~="zoom-in"]')
-        ? driver.replaceZoom?.()
-        : undefined;
+    let restoreZoom;
+    const replaceZoom = () => {
+        if (!restoreZoom && frame.shadowRoot?.querySelector('[part~="zoom-in"]')) {
+            restoreZoom = driver.replaceZoom?.();
+        }
+    };
+    replaceZoom();
+    void frame.updateComplete?.then(() => {
+        if (live) {
+            replaceZoom();
+        }
+    });
     const focusable = options.keyboard === 'renderer' ? null : (driver.focusTarget?.() ?? null);
     const tabindex = focusable?.getAttribute('tabindex') ?? null;
     focusable?.setAttribute('tabindex', '-1');
@@ -190,6 +236,19 @@ export const connectMap = (frame, driver, options = {}) => {
     let credit;
     let listening;
     let written;
+    let crediting = false;
+    const creditSoon = () => {
+        if (crediting) {
+            return;
+        }
+        crediting = true;
+        queueMicrotask(() => {
+            crediting = false;
+            if (live) {
+                writeCredit();
+            }
+        });
+    };
     const writeCredit = () => {
         if (!listening || !credit) {
             return;
@@ -224,7 +283,7 @@ export const connectMap = (frame, driver, options = {}) => {
         credit = document.createElement('span');
         credit.setAttribute('slot', 'attribution');
         credit.setAttribute(CREDIT, '');
-        listening = driver.credits(writeCredit);
+        listening = driver.credits(creditSoon);
         writeCredit();
     }
     const markers = () => [...frame.children].filter(isMarker);
@@ -290,7 +349,8 @@ export const connectMap = (frame, driver, options = {}) => {
             }
             const { names, values } = pointsOf(layer);
             const found = drawn.inView(id).map((one) => ({ at: project(one.place), one }));
-            found.sort((a, b) => a.at.y - b.at.y || (rtl ? b.at.x - a.at.x : a.at.x - b.at.x));
+            found.sort((a, b) => Math.floor(a.at.y / WALK_LINE) - Math.floor(b.at.y / WALK_LINE) ||
+                (rtl ? b.at.x - a.at.x : a.at.x - b.at.x));
             next.set(layer, found.slice(0, WALKED).map(({ one }) => one.cluster !== undefined
                 ? { count: one.count ?? 0, key: `c:${one.cluster}`, place: one.place }
                 : {
@@ -308,9 +368,14 @@ export const connectMap = (frame, driver, options = {}) => {
         seen = next;
         place();
     };
-    const readLayers = () => [...frame.children]
+    const readLayers = () => {
+        pointLayers.clear();
+        return readShown();
+    };
+    const readShown = () => [...frame.children]
         .filter(isLayer)
         .filter((layer) => !layer.hidden)
+        .filter((layer) => !(layer.layerKind === 'raster' && layer.ground === true && !frame.mapType))
         .flatMap((layer) => {
         const color = settledColor(layer);
         if (layer.layerKind === 'contours') {
@@ -478,9 +543,10 @@ export const connectMap = (frame, driver, options = {}) => {
             }
         }
         const standing = everywhere.filter((one) => !one.behind);
+        const stood = new Map(standing.map((one) => [one.marker, one]));
         const gathering = frame.cluster === true;
         for (const marker of markers()) {
-            if (!standing.some((one) => one.marker === marker) && marker.gatheredBy !== undefined) {
+            if (!stood.has(marker) && marker.gatheredBy !== undefined) {
                 marker.gatheredBy = undefined;
             }
         }
@@ -488,8 +554,10 @@ export const connectMap = (frame, driver, options = {}) => {
         if (fanned) {
             const scale = scaleOf(fanned.place);
             const members = fanned.members;
-            if (Math.abs(scale - fanned.scale) > fanned.scale * 0.02 ||
-                !members.every((member) => standing.some((one) => one.marker === member))) {
+            const zoomed = fanned.zoom !== undefined && driver.zoom
+                ? Math.abs(driver.zoom() - fanned.zoom) > 0.01
+                : Math.abs(scale - fanned.scale) > fanned.scale * 0.02;
+            if (zoomed || !members.every((member) => stood.has(member))) {
                 fanned = undefined;
             }
         }
@@ -516,7 +584,7 @@ export const connectMap = (frame, driver, options = {}) => {
                 placing.push({
                     at: { x: center.x + offset.x, y: center.y + offset.y },
                     marker: member,
-                    reach: standing.find((one) => one.marker === member)?.reach,
+                    reach: stood.get(member)?.reach,
                 });
             });
         }
@@ -626,7 +694,12 @@ export const connectMap = (frame, driver, options = {}) => {
             }
         }
     };
-    const stopViewing = driver.onView?.(place);
+    let looking;
+    const stopViewing = driver.onView?.(() => {
+        place();
+        clearTimeout(looking);
+        looking = setTimeout(look, WALK_SETTLES);
+    });
     const away = (snapshot) => {
         snapshot.hidden = true;
         snapshot.style.display = 'none';
@@ -734,22 +807,19 @@ export const connectMap = (frame, driver, options = {}) => {
         if (!members || options.clusterZoom === false) {
             return;
         }
-        const lats = members.map((one) => one.lat);
-        const lngs = members.map((one) => one.lng);
-        const middle = {
-            lat: lats.reduce((sum, lat) => sum + lat, 0) / lats.length,
-            lng: lngs.reduce((sum, lng) => sum + lng, 0) / lngs.length,
-        };
-        const spread = Math.max(...members.map((one) => Math.hypot(one.lat - middle.lat, (one.lng - middle.lng) * Math.cos((middle.lat * Math.PI) / 180)) * METERS_PER_DEGREE));
+        const { bounds, middle } = reachOf(members.map((one) => ({ lat: one.lat, lng: one.lng })));
+        let spread = 0;
+        for (const one of members) {
+            const across = (((one.lng - middle.lng + 540) % 360) - 180) *
+                Math.cos((middle.lat * Math.PI) / 180);
+            spread = Math.max(spread, Math.hypot(one.lat - middle.lat, across) * METERS_PER_DEGREE);
+        }
         if (spread <= SAME_SPOT || !driver.fit) {
-            fanned = { members, place: middle, scale: scaleOf(middle) };
+            fanned = { members, place: middle, scale: scaleOf(middle), zoom: driver.zoom?.() };
             place();
             return;
         }
-        driver.fit({
-            northEast: { lat: Math.max(...lats), lng: Math.max(...lngs) },
-            southWest: { lat: Math.min(...lats), lng: Math.min(...lngs) },
-        }, 96, motionOf(frame, 'travel'));
+        driver.fit(bounds, 96, motionOf(frame, 'travel'));
     };
     frame.addEventListener(HelixMapClusterEvent.eventName, handleCluster);
     const closeFan = () => {
@@ -764,18 +834,26 @@ export const connectMap = (frame, driver, options = {}) => {
             closeFan()?.focus();
         }
     };
+    let pressedAt;
+    const handleFanDown = (event) => {
+        pressedAt = { x: event.clientX, y: event.clientY };
+    };
     const handleFanPress = (event) => {
-        if (fanned && !event.composedPath().some(isMarker)) {
+        const dragged = pressedAt !== undefined &&
+            Math.hypot(event.clientX - pressedAt.x, event.clientY - pressedAt.y) > DRAGGED;
+        if (fanned && !dragged && !event.composedPath().some(isMarker)) {
             closeFan();
         }
     };
     frame.addEventListener('keydown', handleFanKey);
+    frame.addEventListener('pointerdown', handleFanDown);
     frame.addEventListener('click', handleFanPress);
     return {
         disconnect() {
             live = false;
             drawn?.stop();
             stopViewing?.();
+            clearTimeout(looking);
             stopWaiting?.();
             stopTheming?.();
             styled.disconnect();
@@ -784,6 +862,7 @@ export const connectMap = (frame, driver, options = {}) => {
             frame.removeEventListener('focusin', reveal);
             frame.removeEventListener(HelixMapClusterEvent.eventName, handleCluster);
             frame.removeEventListener('keydown', handleFanKey);
+            frame.removeEventListener('pointerdown', handleFanDown);
             frame.removeEventListener('click', handleFanPress);
             for (const marker of markers()) {
                 marker.style.removeProperty('--_map-marker-x');
@@ -797,6 +876,12 @@ export const connectMap = (frame, driver, options = {}) => {
                 if (marker.fanned === true) {
                     marker.fanned = false;
                 }
+                if (marker.behind === true) {
+                    marker.behind = false;
+                }
+                if (marker.side === 'start') {
+                    marker.side = 'end';
+                }
                 marker.style.removeProperty('--_map-marker-leg');
                 marker.style.removeProperty('--_map-marker-leg-angle');
             }
@@ -846,12 +931,7 @@ export const connectMap = (frame, driver, options = {}) => {
             if (places.length === 0) {
                 return;
             }
-            const lats = places.map((place) => place.lat);
-            const lngs = places.map((place) => place.lng);
-            driver.fit({
-                northEast: { lat: Math.max(...lats), lng: Math.max(...lngs) },
-                southWest: { lat: Math.min(...lats), lng: Math.min(...lngs) },
-            }, options.padding ?? 48, options.animate === false ? null : motionOf(frame, 'travel'));
+            driver.fit(reachOf(places).bounds, options.padding ?? 48, options.animate === false ? null : motionOf(frame, 'travel'));
         },
     };
 };

package/dist/leaflet/leaflet-driver.d.ts

@@ -43,8 +43,8 @@ export interface LeafletMap {
         x: number;
         y: number;
     };
-    off(type: 'layeradd layerremove' | 'move zoom resize', listener: () => void): unknown;
-    on(type: 'layeradd layerremove' | 'move zoom resize', listener: () => void): unknown;
+    off(type: 'layeradd layerremove' | 'move zoom resize' | 'moveend', listener: () => void): unknown;
+    on(type: 'layeradd layerremove' | 'move zoom resize' | 'moveend', listener: () => void): unknown;
     fitBounds(bounds: [[number, number], [number, number]], options?: LeafletAnimation & {
         paddingBottomRight?: [number, number];
         paddingTopLeft?: [number, number];

package/dist/leaflet/leaflet-driver.js

@@ -75,6 +75,8 @@ export const leafletDriver = (map, shapes) => ({
         ? {
             layers: (read, events) => {
                 let drawn = [];
+                const circles = new Map();
+                let placed = new Map();
                 const rasters = new Map();
                 const drawRasters = (specs) => {
                     const make = shapes.tileLayer;
@@ -122,6 +124,8 @@ export const leafletDriver = (map, shapes) => ({
                         shape.remove();
                     }
                     const specs = read();
+                    const kept = new Set();
+                    placed = new Map();
                     drawRasters(specs.filter((spec) => spec.kind === 'raster'));
                     drawn = specs.flatMap((layer) => {
                         if (layer.kind === 'buildings' ||
@@ -137,7 +141,19 @@ export const leafletDriver = (map, shapes) => ({
                             if (!circle) {
                                 return [];
                             }
-                            return latlngs.map((latlng, at) => {
+                            kept.add(layer.id);
+                            placed.set(layer.id, layer.points);
+                            const had = circles.get(layer.id);
+                            if (had &&
+                                had.points === layer.points &&
+                                had.color === layer.color &&
+                                had.casing === layer.casing) {
+                                return [];
+                            }
+                            for (const shape of had?.shapes ?? []) {
+                                shape.remove();
+                            }
+                            const made = latlngs.map((latlng, at) => {
                                 const point = circle(latlng, {
                                     color: layer.casing ?? layer.color,
                                     fillColor: layer.color,
@@ -150,6 +166,13 @@ export const leafletDriver = (map, shapes) => ({
                                 point.addTo(map);
                                 return point;
                             });
+                            circles.set(layer.id, {
+                                casing: layer.casing,
+                                color: layer.color,
+                                points: layer.points,
+                                shapes: made,
+                            });
+                            return [];
                         }
                         const casing = layer.kind === 'route' && layer.casing
                             ? [
@@ -185,14 +208,41 @@ export const leafletDriver = (map, shapes) => ({
                         }
                         return [...casing, shape];
                     });
+                    for (const [id, had] of [...circles]) {
+                        if (!kept.has(id)) {
+                            for (const shape of had.shapes) {
+                                shape.remove();
+                            }
+                            circles.delete(id);
+                        }
+                    }
+                    events?.settled?.();
                 };
+                const settled = () => events?.settled?.();
+                map.on('moveend', settled);
                 draw();
                 return {
+                    inView: (id) => {
+                        const box = map.getContainer();
+                        const width = box.clientWidth;
+                        const height = box.clientHeight;
+                        return (placed.get(id) ?? []).flatMap((place, at) => {
+                            const { x, y } = map.latLngToContainerPoint([place.lat, place.lng]);
+                            return x >= 0 && y >= 0 && x <= width && y <= height ? [{ at, place }] : [];
+                        });
+                    },
                     stop: () => {
+                        map.off('moveend', settled);
                         for (const shape of drawn) {
                             shape.remove();
                         }
                         drawn = [];
+                        for (const had of circles.values()) {
+                            for (const shape of had.shapes) {
+                                shape.remove();
+                            }
+                        }
+                        circles.clear();
                         drawRasters([]);
                     },
                     update: draw,

package/dist/maplibre/maplibre-driver.d.ts

@@ -97,8 +97,10 @@ interface MapLibreAnimation {
 export interface MapLibreMap {
     /** Whether every tile the view needs has loaded. */
     areTilesLoaded?(): boolean;
-    /** Whether the style has loaded. */
+    /** Whether the style and every tile have loaded, and nothing is waiting to be drawn. */
     loaded?(): boolean;
+    /** Whether the style has loaded: `true`, and anything else is not yet. MapLibre 6 types it loosely. */
+    isStyleLoaded?(): unknown;
     /** The canvas, which MapLibre makes focusable. */
     getCanvas(): HTMLElement;
     /** The middle of the view, which a map-type picture is drawn around. */
@@ -186,8 +188,8 @@ export interface MapLibreMap {
         enable(): void;
         isEnabled(): boolean;
     };
-    off(type: 'click' | 'idle' | 'load' | 'mousemove' | 'move' | 'resize' | 'sourcedata' | 'moveend' | 'styledata' | 'styleimagemissing', listener: (event?: MapLibreEvent) => void): unknown;
-    on(type: 'click' | 'idle' | 'load' | 'mousemove' | 'move' | 'resize' | 'sourcedata' | 'moveend' | 'styledata' | 'styleimagemissing', listener: (event?: MapLibreEvent) => void): unknown;
+    off(type: 'click' | 'idle' | 'load' | 'mousemove' | 'move' | 'resize' | 'sourcedata' | 'moveend' | 'render' | 'styledata' | 'styleimagemissing', listener: (event?: MapLibreEvent) => void): unknown;
+    on(type: 'click' | 'idle' | 'load' | 'mousemove' | 'move' | 'resize' | 'sourcedata' | 'moveend' | 'render' | 'styledata' | 'styleimagemissing', listener: (event?: MapLibreEvent) => void): unknown;
     removeLayer(id: string): unknown;
     removeSource(id: string): unknown;
     panBy(offset: [number, number], options?: MapLibreAnimation): unknown;
@@ -239,7 +241,7 @@ export interface MapLibreMap {
         };
     };
     /** Draws each image a style names as it is asked for. MapLibre 6. */
-    setMissingStyleImageResolver?(resolver: ((id: string) => void) | null): unknown;
+    setMissingStyleImageResolver?(resolver: ((id: string) => unknown) | null): unknown;
     /** Sets one paint property of one layer, which is how a points layer takes a new color. */
     setPaintProperty(layer: string, name: string, value: unknown): unknown;
     /** Sets one layout property of one layer, which is how the buildings are shown and hidden. */

package/dist/maplibre/maplibre-driver.js

@@ -202,11 +202,22 @@ const showLabels = (map, shown) => {
         }
     }
 };
+const described = new WeakMap();
+const describedOf = (holder) => {
+    const had = described.get(holder);
+    if (had) {
+        return had;
+    }
+    const style = (holder.getStyle() ?? {});
+    described.set(holder, style);
+    queueMicrotask(() => described.delete(holder));
+    return style;
+};
 const supplyImage = (holder, id) => {
     if (!id?.startsWith('helix-') || holder.hasImage?.(id)) {
         return;
     }
-    const style = holder.getStyle();
+    const style = describedOf(holder);
     const [named = '', text = ''] = id.split('|');
     const image = style?.metadata?.['helix:images']?.[named];
     const drawn = image ? drawMapImage(image, text) : undefined;
@@ -216,8 +227,10 @@ const supplyImage = (holder, id) => {
 };
 const answerImages = (holder) => {
     if (typeof holder.setMissingStyleImageResolver === 'function') {
-        holder.setMissingStyleImageResolver((id) => supplyImage(holder, id));
-        return () => holder.setMissingStyleImageResolver?.(null);
+        const before = holder
+            ._missingStyleImageResolver ?? null;
+        holder.setMissingStyleImageResolver((id) => id.startsWith('helix-') ? supplyImage(holder, id) : before?.(id));
+        return () => holder.setMissingStyleImageResolver?.(before);
     }
     const missing = (event) => supplyImage(holder, event?.id);
     holder.on('styleimagemissing', missing);
@@ -265,10 +278,18 @@ export const mapLibreDriver = (map) => ({
         bared.set(map, !shown);
         showLabels(map, shown);
         if (!heard) {
+            let pending = false;
             map.on('styledata', () => {
-                if (bared.get(map)) {
-                    showLabels(map, false);
+                if (!bared.get(map) || pending) {
+                    return;
                 }
+                pending = true;
+                queueMicrotask(() => {
+                    pending = false;
+                    if (bared.get(map)) {
+                        showLabels(map, false);
+                    }
+                });
             });
         }
     },
@@ -344,7 +365,8 @@ export const mapLibreDriver = (map) => ({
         const lines = new Map();
         let tracing = 0;
         const heightsOf = (url, tile, encoding) => {
-            const had = heights.get(url);
+            const key = `${url}|${encoding}`;
+            const had = heights.get(key);
             if (had) {
                 return had;
             }
@@ -366,11 +388,17 @@ export const mapLibreDriver = (map) => ({
                 const pixels = context.getImageData(0, 0, bitmap.width, bitmap.height).data;
                 return { ...tile, heights: heightsFrom(pixels, encoding), size: bitmap.width };
             })
-                .catch(() => undefined);
+                .catch(() => undefined)
+                .then((tile) => {
+                if (tile === undefined && heights.get(key) === read) {
+                    heights.delete(key);
+                }
+                return tile;
+            });
             if (heights.size >= 100) {
                 heights.delete(heights.keys().next().value);
             }
-            heights.set(url, read);
+            heights.set(key, read);
             return read;
         };
         const trace = async () => {
@@ -411,10 +439,13 @@ export const mapLibreDriver = (map) => ({
                 const known = new Map(read.filter((tile) => tile !== undefined).map((tile) => [`${tile.x}/${tile.y}`, tile]));
                 const traced = [];
                 for (const tile of known.values()) {
-                    const key = `${spec.src}|${tile.z}/${tile.x}/${tile.y}|${interval}|${unit}`;
+                    const across = 2 ** tile.z;
+                    const beside = [-1, 0, 1]
+                        .flatMap((dy) => [-1, 0, 1].map((dx) => known.has(`${(tile.x + dx + across) % across}/${tile.y + dy}`) ? '1' : '0'))
+                        .join('');
+                    const key = `${spec.src}|${spec.encoding ?? ''}|${tile.z}/${tile.x}/${tile.y}|${interval}|${unit}|${beside}`;
                     let found = lines.get(key);
                     if (!found) {
-                        const across = 2 ** tile.z;
                         found = contoursOf(tile, interval, unit, (dx, dy) => known.get(`${(tile.x + dx + across) % across}/${tile.y + dy}`));
                         if (lines.size >= 200) {
                             lines.delete(lines.keys().next().value);
@@ -1029,12 +1060,27 @@ export const mapLibreDriver = (map) => ({
             done();
             return () => undefined;
         }
-        const heard = () => {
-            map.off('load', heard);
+        let finished = false;
+        const finish = () => {
+            if (finished) {
+                return;
+            }
+            finished = true;
+            stop();
             done();
         };
-        map.on('load', heard);
-        return () => map.off('load', heard);
+        const drawn = () => {
+            if (map.isStyleLoaded?.() === true && map.areTilesLoaded?.() === true) {
+                finish();
+            }
+        };
+        const stop = () => {
+            map.off('load', finish);
+            map.off('render', drawn);
+        };
+        map.on('load', finish);
+        map.on('render', drawn);
+        return stop;
     },
     rotate: ({ by, to }, motion) => {
         const { bearing, pitch } = aimFrom(map);

package/dist/style/map-style.js

@@ -57,7 +57,13 @@ const SIGNS = {
     'us-interstate': 'interstate',
     'us-state': 'state',
 };
-const idOf = (color) => color.replace(/[^0-9a-z]/gi, '');
+const stamp = (drawn) => {
+    let hash = 0x811c9dc5;
+    for (const char of JSON.stringify(drawn)) {
+        hash = Math.imul(hash ^ (char.codePointAt(0) ?? 0), 0x01000193) >>> 0;
+    }
+    return hash.toString(36);
+};
 const widen = (from, to) => [
     'interpolate',
     ['exponential', 1.5],
@@ -147,13 +153,14 @@ export const mapLibreStyle = (colors, options = {}) => {
     const landmarkColor = ['match', ['get', 'class']];
     for (const { classes, group, hue, icon } of LANDMARKS) {
         const color = cssColor(hued(hue));
-        const id = `helix-landmark-${group}-${idOf(color)}`;
-        images[id] = {
+        const image = {
             color,
             icon: { content: icon.content, viewBox: icon.viewBox },
             ink: halo,
             kind: 'landmark',
         };
+        const id = `helix-landmark-${group}-${stamp(image)}`;
+        images[id] = image;
         landmarkImage.push([...classes], id);
         landmarkColor.push([...classes], legible(hued(hue), 0));
     }
@@ -161,27 +168,30 @@ export const mapLibreStyle = (colors, options = {}) => {
     landmarkColor.push(legible(land, 0.6));
     const classesOf = (everyday) => LANDMARKS.filter((one) => (one.everyday === true) === everyday).flatMap(({ classes }) => classes);
     const signFont = face ? `"${face}", sans-serif` : 'sans-serif';
-    images['helix-sign-interstate'] = {
+    const signs = `helix-sign-${stamp(signFont)}-`;
+    images[`${signs}interstate`] = {
         design: 'interstate',
         font: signFont,
         ink: '#ffffff',
         kind: 'sign',
     };
-    images['helix-sign-us'] = { design: 'us', font: signFont, ink: '#1a1a1a', kind: 'sign' };
-    images['helix-sign-state'] = { design: 'state', font: signFont, ink: '#1a1a1a', kind: 'sign' };
-    const plate = { edge: toward(0.5), fill: halo };
-    images[`helix-sign-plate-${idOf(plate.fill + plate.edge)}`] = {
-        ...plate,
+    images[`${signs}us`] = { design: 'us', font: signFont, ink: '#1a1a1a', kind: 'sign' };
+    images[`${signs}state`] = { design: 'state', font: signFont, ink: '#1a1a1a', kind: 'sign' };
+    const plate = {
         design: 'plate',
+        edge: toward(0.5),
+        fill: halo,
         font: signFont,
         ink: cssColor(ink),
         kind: 'sign',
     };
+    const plateShape = `plate-${stamp(plate)}`;
+    images[`${signs}${plateShape}`] = plate;
     const signShape = ['match', ['get', 'network']];
     for (const [network, shape] of Object.entries(SIGNS)) {
         signShape.push(network, shape);
     }
-    signShape.push(`plate-${idOf(plate.fill + plate.edge)}`);
+    signShape.push(plateShape);
     return {
         ...(glyphs ? { glyphs } : {}),
         layers: [
@@ -355,7 +365,7 @@ export const mapLibreStyle = (colors, options = {}) => {
                 ],
                 id: 'label-shield',
                 layout: {
-                    'icon-image': ['concat', 'helix-sign-', signShape, '|', ['get', 'ref']],
+                    'icon-image': ['concat', signs, signShape, '|', ['get', 'ref']],
                     'icon-rotation-alignment': 'viewport',
                     'symbol-placement': 'line',
                     'symbol-spacing': 320,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-map",
   "description": "Connects the Helix Map frame to a map renderer: MapLibre, Leaflet, or a driver of your own.",
-  "version": "0.110.1",
+  "version": "0.110.3",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -43,14 +43,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.110.1",
-    "@fusion.dev/helix-icons": "0.110.1",
+    "@fusion.dev/helix-core": "0.110.3",
+    "@fusion.dev/helix-icons": "0.110.3",
     "@mapbox/vector-tile": "^3.0.0",
     "pbf": "^5.1.2"
   },
   "devDependencies": {
-    "@fusion.dev/helix-headless": "0.110.1",
-    "@fusion.dev/helix-testing": "0.110.1",
+    "@fusion.dev/helix-headless": "0.110.3",
+    "@fusion.dev/helix-testing": "0.110.3",
     "@maplibre/maplibre-gl-style-spec": "^26.4.4",
     "@types/bun": "^1.3.0",
     "@types/leaflet": "^1.9.20",