@fusion.dev/helix-map 0.0.0-dev

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

@@ -0,0 +1,847 @@
+import { HelixActivateEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, isRtl, } from '@fusion.dev/helix-core';
+import { creditParts } from '../credit/credit.js';
+import { motionOf } from '../motion/motion.js';
+import { pointsFrom } from '../points/points.js';
+import { settledColor } from '../style/map-colors.js';
+import { watchTheme } from '../theme/watch-theme.js';
+const SAME_SPOT = 2;
+const fanOut = (count, spacing) => {
+    if (count <= 8) {
+        const radius = Math.max(spacing, (count * spacing) / (2 * Math.PI));
+        return Array.from({ length: count }, (_, at) => {
+            const angle = -Math.PI / 2 + (at * 2 * Math.PI) / count;
+            return { x: radius * Math.cos(angle), y: radius * Math.sin(angle) };
+        });
+    }
+    let angle = 0;
+    let length = spacing;
+    return Array.from({ length: count }, () => {
+        angle += spacing / length;
+        length = spacing + (spacing / (2 * Math.PI)) * angle;
+        return {
+            x: length * Math.cos(angle - Math.PI / 2),
+            y: length * Math.sin(angle - Math.PI / 2),
+        };
+    });
+};
+const sameNames = (had, names) => (had?.length ?? 0) === names.length && names.every((name, at) => had?.[at] === name);
+const isMarker = (node) => node?.isMapMarker === true;
+const isPosition = (node) => node?.isMapPosition === true;
+const METERS_PER_DEGREE = 111_320;
+const AHEAD = 10;
+export const distancesAlong = (points) => {
+    let total = 0;
+    return points.map((point, at) => {
+        const from = points[at - 1];
+        if (from) {
+            total +=
+                Math.hypot(point.lat - from.lat, (point.lng - from.lng) * Math.cos((from.lat * Math.PI) / 180)) * METERS_PER_DEGREE;
+        }
+        return total;
+    });
+};
+const cut = (points, fraction) => {
+    const along = distancesAlong(points);
+    const legs = along.slice(1).map((distance, at) => distance - along[at]);
+    let left = (along.at(-1) ?? 0) * fraction;
+    for (let at = 0; at < legs.length; at++) {
+        const leg = legs[at];
+        if (left <= leg) {
+            const [from, to] = [points[at], points[at + 1]];
+            const part = leg > 0 ? left / leg : 0;
+            const middle = {
+                lat: from.lat + (to.lat - from.lat) * part,
+                lng: from.lng + (to.lng - from.lng) * part,
+            };
+            return [
+                [...points.slice(0, at + 1), middle],
+                [middle, ...points.slice(at + 1)],
+            ];
+        }
+        left -= leg;
+    }
+    return [points, []];
+};
+const WALKED = 100;
+const sameWalk = (had, walk) => (had?.length ?? 0) === walk.length &&
+    walk.every((one, at) => {
+        const was = had?.[at];
+        return (was?.key === one.key &&
+            Math.round(was.x) === Math.round(one.x) &&
+            Math.round(was.y) === Math.round(one.y) &&
+            was.label === one.label &&
+            was.count === one.count);
+    });
+const isLayer = (node) => node?.isMapLayer === true;
+const ids = new WeakMap();
+let minted = 0;
+const idOf = (element) => {
+    let id = ids.get(element);
+    if (!id) {
+        minted += 1;
+        id = `helix-layer-${minted}`;
+        ids.set(element, id);
+    }
+    return id;
+};
+const CREDIT = 'data-helix-map-credit';
+const viewportOf = (frame) => {
+    const box = (frame.shadowRoot?.querySelector('[part="viewport"]') ?? frame).getBoundingClientRect();
+    return { height: box.height, width: box.width };
+};
+export const connectMap = (frame, driver, options = {}) => {
+    const handlePan = (event) => {
+        const { by, to } = event.detail;
+        const { height, width } = viewportOf(frame);
+        const inline = (to === 'end' ? 1 : to === 'start' ? -1 : 0) * (isRtl(frame) ? -1 : 1);
+        const block = to === 'down' ? 1 : to === 'up' ? -1 : 0;
+        driver.panBy(inline * width * by, block * height * by, motionOf(frame, 'step'));
+    };
+    const handleZoom = (event) => {
+        const { by } = event.detail;
+        if (by !== 0) {
+            driver.zoomBy(by > 0 ? 1 : -1, motionOf(frame, 'step'));
+        }
+    };
+    frame.addEventListener(HelixMapPanEvent.eventName, handlePan);
+    frame.addEventListener(HelixMapZoomEvent.eventName, handleZoom);
+    const handleRotate = (event) => {
+        const { by, to } = event.detail;
+        driver.rotate?.({ by, to }, motionOf(frame, 'step'));
+    };
+    const handleTilt = (event) => {
+        const { by, to } = event.detail;
+        driver.tilt?.({ by, to }, motionOf(frame, 'step'));
+    };
+    frame.addEventListener(HelixMapRotateEvent.eventName, handleRotate);
+    frame.addEventListener(HelixMapTiltEvent.eventName, handleTilt);
+    const holder = frame;
+    const syncBearing = () => {
+        const bearing = Math.round((driver.bearing?.() ?? 0) * 10) / 10;
+        if ('bearing' in holder && holder.bearing !== bearing) {
+            holder.bearing = bearing;
+        }
+        const pitch = Math.round((driver.pitch?.() ?? 0) * 10) / 10;
+        if ('pitch' in holder && holder.pitch !== pitch) {
+            holder.pitch = pitch;
+        }
+    };
+    syncBearing();
+    const stopBearing = driver.bearing || driver.pitch ? driver.onView?.(syncBearing) : undefined;
+    let bare = false;
+    const syncType = () => {
+        const next = frame.mapType === 'satellite';
+        if (next !== bare) {
+            bare = next;
+            driver.labels?.(!next);
+        }
+    };
+    syncType();
+    let stale = true;
+    const stopWatchingPreviews = driver.previews
+        ? driver.onView?.(() => {
+            stale = true;
+        })
+        : undefined;
+    let picturing;
+    const drawPreviews = () => {
+        const imagery = [...frame.children]
+            .filter(isLayer)
+            .find((layer) => layer.layerKind === 'raster' && layer.ground === true);
+        const src = imagery?.src ?? imagery?.frames?.at(-1);
+        if (!driver.previews || !src || !stale || picturing) {
+            return;
+        }
+        stale = false;
+        picturing = driver
+            .previews({
+            imagery: { maxZoom: imagery?.maxZoom, src },
+            types: ['standard', 'hybrid', 'satellite'],
+        })
+            .then((previews) => {
+            ;
+            frame.mapPreviews = previews;
+        })
+            .catch(() => {
+            stale = true;
+        })
+            .finally(() => {
+            picturing = undefined;
+        });
+    };
+    const restoreKeyboard = options.keyboard === 'renderer' ? undefined : driver.silenceKeyboard?.();
+    const restoreZoom = frame.shadowRoot?.querySelector('[part~="zoom-in"]')
+        ? driver.replaceZoom?.()
+        : undefined;
+    const focusable = options.keyboard === 'renderer' ? null : (driver.focusTarget?.() ?? null);
+    const tabindex = focusable?.getAttribute('tabindex') ?? null;
+    focusable?.setAttribute('tabindex', '-1');
+    const owned = [...frame.children].some((child) => child.getAttribute('slot') === 'attribution' && !child.hasAttribute(CREDIT));
+    let credit;
+    let listening;
+    let written;
+    const writeCredit = () => {
+        if (!listening || !credit) {
+            return;
+        }
+        const parts = creditParts(listening.read());
+        const said = JSON.stringify(parts);
+        if (said === written) {
+            return;
+        }
+        written = said;
+        const nodes = parts.map((part) => {
+            if (part.href === undefined) {
+                return document.createTextNode(part.text);
+            }
+            const link = document.createElement('a');
+            link.href = part.href;
+            link.rel = 'noopener noreferrer';
+            link.target = '_blank';
+            link.dataset.link = 'quiet';
+            link.textContent = part.text;
+            return link;
+        });
+        credit.replaceChildren(...nodes);
+        if (nodes.length === 0) {
+            credit.remove();
+        }
+        else if (credit.parentNode !== frame) {
+            frame.append(credit);
+        }
+    };
+    if (options.credit !== false && !owned && driver.credits) {
+        credit = document.createElement('span');
+        credit.setAttribute('slot', 'attribution');
+        credit.setAttribute(CREDIT, '');
+        listening = driver.credits(writeCredit);
+        writeCredit();
+    }
+    const markers = () => [...frame.children].filter(isMarker);
+    let clusters = new Map();
+    let fanned;
+    const scaleOf = (place) => {
+        if (!driver.project) {
+            return 0;
+        }
+        const at = driver.project(place);
+        const north = driver.project({ lat: place.lat + 10 / METERS_PER_DEGREE, lng: place.lng });
+        return Math.hypot(north.x - at.x, north.y - at.y);
+    };
+    const positions = () => [...frame.children].filter(isPosition);
+    const fetched = new WeakMap();
+    const read = new WeakMap();
+    const dataOf = (layer) => {
+        if (layer.data !== undefined || !layer.src) {
+            return layer.data;
+        }
+        const had = fetched.get(layer);
+        if (had?.src === layer.src) {
+            return had.data;
+        }
+        const asked = { src: layer.src };
+        fetched.set(layer, asked);
+        fetch(layer.src)
+            .then((response) => response.ok
+            ? response.json()
+            : Promise.reject(new Error(`${asked.src}: ${response.status}`)))
+            .then((data) => {
+            if (fetched.get(layer) === asked && live) {
+                asked.data = data;
+                soon({ draw: true });
+            }
+        })
+            .catch((error) => console.error(error));
+        return undefined;
+    };
+    const pointsOf = (layer) => {
+        const data = dataOf(layer);
+        const nameKey = layer.nameKey ?? 'name';
+        const had = read.get(layer);
+        if (had && had.data === data && had.nameKey === nameKey) {
+            return had.points;
+        }
+        const points = pointsFrom(data, nameKey);
+        read.set(layer, { data, nameKey, points });
+        return points;
+    };
+    const pointLayers = new Map();
+    let seen = new Map();
+    const look = () => {
+        if (!live || !drawn?.inView || !driver.project) {
+            return;
+        }
+        const project = driver.project;
+        const rtl = isRtl(frame);
+        const next = new Map();
+        for (const [id, layer] of pointLayers) {
+            if (layer.parentElement !== frame) {
+                continue;
+            }
+            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));
+            next.set(layer, found.slice(0, WALKED).map(({ one }) => one.cluster !== undefined
+                ? { count: one.count ?? 0, key: `c:${one.cluster}`, place: one.place }
+                : {
+                    key: `p:${one.at}`,
+                    label: names[one.at ?? -1] || undefined,
+                    place: one.place,
+                    value: values[one.at ?? -1],
+                }));
+        }
+        for (const layer of seen.keys()) {
+            if (!next.has(layer) && (layer.walk?.length ?? 0) > 0) {
+                layer.walk = [];
+            }
+        }
+        seen = next;
+        place();
+    };
+    const readLayers = () => [...frame.children]
+        .filter(isLayer)
+        .filter((layer) => !layer.hidden)
+        .flatMap((layer) => {
+        const color = settledColor(layer);
+        if (layer.layerKind === 'contours') {
+            if (!layer.src) {
+                return [];
+            }
+            return [
+                {
+                    ...(layer.attribution ? { attribution: layer.attribution } : {}),
+                    color,
+                    encoding: layer.encoding === 'mapbox' ? 'mapbox' : 'terrarium',
+                    id: idOf(layer),
+                    kind: 'contours',
+                    label: layer.label ?? '',
+                    ...(typeof layer.maxZoom === 'number' ? { maxZoom: layer.maxZoom } : {}),
+                    points: [],
+                    src: layer.src,
+                    unit: layer.unit === 'feet' ? 'feet' : 'meters',
+                },
+            ];
+        }
+        if (layer.layerKind === 'landcover') {
+            return [
+                { color, id: idOf(layer), kind: 'landcover', label: layer.label ?? '', points: [] },
+            ];
+        }
+        if (layer.layerKind === 'terrain') {
+            if (!layer.src) {
+                return [];
+            }
+            return [
+                {
+                    ...(layer.attribution ? { attribution: layer.attribution } : {}),
+                    color,
+                    encoding: layer.encoding === 'mapbox' ? 'mapbox' : 'terrarium',
+                    exaggeration: Math.max(0, layer.exaggeration ?? 1),
+                    highlight: settledColor(layer, 'border-top-color'),
+                    id: idOf(layer),
+                    kind: 'terrain',
+                    label: layer.label ?? '',
+                    ...(typeof layer.maxZoom === 'number' ? { maxZoom: layer.maxZoom } : {}),
+                    points: [],
+                    raised: layer.raised === true,
+                    src: layer.src,
+                },
+            ];
+        }
+        if (layer.layerKind === 'buildings') {
+            return [
+                { color, id: idOf(layer), kind: 'buildings', label: layer.label ?? '', points: [] },
+            ];
+        }
+        if (layer.layerKind === 'raster') {
+            const frames = layer.frames?.length ? [...layer.frames] : layer.src ? [layer.src] : [];
+            if (frames.length === 0) {
+                return [];
+            }
+            const last = frames.length - 1;
+            return [
+                {
+                    ...(layer.attribution ? { attribution: layer.attribution } : {}),
+                    color,
+                    frame: Math.min(Math.max(0, layer.frame ?? last), last),
+                    frames,
+                    ...(layer.ground ? { ground: true } : {}),
+                    id: idOf(layer),
+                    kind: 'raster',
+                    label: layer.label ?? '',
+                    ...(typeof layer.maxZoom === 'number' ? { maxZoom: layer.maxZoom } : {}),
+                    opacity: Math.min(Math.max(0, layer.opacity ?? 0.7), 1),
+                    points: [],
+                },
+            ];
+        }
+        if (layer.layerKind === 'points') {
+            const { points } = pointsOf(layer);
+            if (points.length === 0) {
+                return [];
+            }
+            const id = idOf(layer);
+            pointLayers.set(id, layer);
+            return [
+                {
+                    casing: settledColor(layer, 'border-top-color'),
+                    cluster: layer.cluster === true,
+                    color,
+                    id,
+                    ink: settledColor(layer, 'outline-color'),
+                    kind: 'points',
+                    label: layer.label ?? '',
+                    points,
+                },
+            ];
+        }
+        if ((layer.points?.length ?? 0) < (layer.layerKind === 'area' ? 3 : 2)) {
+            return [];
+        }
+        const edge = layer.layerKind === 'route' ? settledColor(layer, 'border-top-color') : color;
+        const dotted = layer.layerKind === 'route' && layer.variant === 'dotted';
+        const spec = {
+            ...(edge && edge !== color && !dotted ? { casing: edge } : {}),
+            color,
+            id: idOf(layer),
+            kind: layer.layerKind,
+            label: layer.label ?? '',
+            ...(dotted ? { pattern: 'dotted' } : {}),
+            points: (layer.points ?? []).map(({ lat, lng }) => ({ lat, lng })),
+        };
+        const progress = layer.layerKind === 'route' ? layer.progress : undefined;
+        if (typeof progress !== 'number' || progress <= 0) {
+            return [spec];
+        }
+        if (progress >= 1) {
+            return [{ ...spec, faded: true }];
+        }
+        const [behind, ahead] = cut(spec.points, progress);
+        return [
+            { ...spec, faded: true, id: `${spec.id}-behind`, points: behind },
+            { ...spec, points: ahead },
+        ];
+    });
+    const drawn = driver.layers?.(readLayers, {
+        motion: () => motionOf(frame, 'travel'),
+        press: (id, index) => {
+            const layer = pointLayers.get(id);
+            const value = layer ? pointsOf(layer).values[index] : undefined;
+            if (layer && value !== undefined) {
+                layer.dispatchEvent(new HelixActivateEvent({ value }));
+            }
+        },
+        settled: () => look(),
+    });
+    const place = () => {
+        if (!driver.project) {
+            return;
+        }
+        const project = driver.project;
+        const { width } = viewportOf(frame);
+        const rtl = isRtl(frame);
+        const bearing = driver.bearing?.() ?? 0;
+        const pitch = driver.pitch?.() ?? 0;
+        const everywhere = markers()
+            .filter((marker) => typeof marker.lat === 'number' && typeof marker.lng === 'number')
+            .map((marker) => {
+            const where = { lat: marker.lat, lng: marker.lng };
+            return {
+                at: project(where),
+                behind: driver.behind?.(where) === true,
+                marker,
+                reach: typeof marker.extent === 'function' ? marker.extent() : undefined,
+            };
+        });
+        for (const one of everywhere) {
+            if (one.marker.behind !== one.behind) {
+                one.marker.behind = one.behind;
+            }
+        }
+        const hidden = everywhere.filter((one) => one.behind);
+        for (const { marker } of hidden) {
+            if (marker.gatheredBy !== undefined) {
+                marker.gatheredBy = undefined;
+            }
+            if ((marker.gathered?.length ?? 0) > 0) {
+                marker.gathered = [];
+            }
+        }
+        const standing = everywhere.filter((one) => !one.behind);
+        const gathering = frame.cluster === true;
+        for (const marker of markers()) {
+            if (!standing.some((one) => one.marker === marker) && marker.gatheredBy !== undefined) {
+                marker.gatheredBy = undefined;
+            }
+        }
+        const reach = options.clusterDistance ?? 40;
+        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))) {
+                fanned = undefined;
+            }
+        }
+        const fan = new Set(fanned?.members);
+        const taken = new Set(fan);
+        clusters = new Map();
+        const placing = [];
+        if (fanned) {
+            const center = project(fanned.place);
+            const offsets = fanOut(fanned.members.length, reach);
+            fanned.members.forEach((member, at) => {
+                const offset = offsets[at];
+                if (member.gatheredBy !== undefined) {
+                    member.gatheredBy = undefined;
+                }
+                if ((member.gathered?.length ?? 0) > 0) {
+                    member.gathered = [];
+                }
+                if (member.fanned !== true) {
+                    member.fanned = true;
+                }
+                member.style.setProperty('--_map-marker-leg', `${Math.hypot(offset.x, offset.y)}px`);
+                member.style.setProperty('--_map-marker-leg-angle', `${Math.atan2(-offset.y, -offset.x)}rad`);
+                placing.push({
+                    at: { x: center.x + offset.x, y: center.y + offset.y },
+                    marker: member,
+                    reach: standing.find((one) => one.marker === member)?.reach,
+                });
+            });
+        }
+        for (const marker of markers()) {
+            if (!fan.has(marker) && marker.fanned === true) {
+                marker.fanned = false;
+                marker.style.removeProperty('--_map-marker-leg');
+                marker.style.removeProperty('--_map-marker-leg-angle');
+            }
+        }
+        for (const one of standing) {
+            if (taken.has(one.marker)) {
+                continue;
+            }
+            const group = gathering
+                ? standing.filter((other) => !taken.has(other.marker) &&
+                    Math.hypot(other.at.x - one.at.x, other.at.y - one.at.y) <= reach)
+                : [one];
+            for (const member of group) {
+                taken.add(member.marker);
+            }
+            const [lead, ...rest] = group.map((member) => member.marker);
+            const names = rest.length > 0 ? [lead, ...rest].map((one) => one.label || one.name || '') : [];
+            if (!sameNames(lead.gathered, names)) {
+                lead.gathered = names;
+            }
+            if (lead.gatheredBy !== undefined) {
+                lead.gatheredBy = undefined;
+            }
+            for (const member of rest) {
+                if (member.gatheredBy !== lead) {
+                    member.gatheredBy = lead;
+                }
+                if ((member.gathered?.length ?? 0) > 0) {
+                    member.gathered = [];
+                }
+            }
+            if (rest.length > 0) {
+                clusters.set(lead, [lead, ...rest]);
+            }
+            placing.push({
+                at: {
+                    x: group.reduce((sum, member) => sum + member.at.x, 0) / group.length,
+                    y: group.reduce((sum, member) => sum + member.at.y, 0) / group.length,
+                },
+                marker: lead,
+                reach: one.reach,
+            });
+        }
+        placing.push(...hidden.map(({ at, marker, reach }) => ({ at, marker, reach })));
+        for (const { at, marker, reach } of placing) {
+            marker.style.setProperty('--_map-marker-x', `${at.x}px`);
+            marker.style.setProperty('--_map-marker-y', `${at.y}px`);
+            if (reach !== undefined) {
+                const ahead = rtl ? at.x : width - at.x;
+                const behind = rtl ? width - at.x : at.x;
+                marker.side = reach <= ahead || ahead >= behind ? 'end' : 'start';
+            }
+        }
+        const across = ((bearing + 90) * Math.PI) / 180;
+        const tilted = Math.max(Math.cos((pitch * Math.PI) / 180), 0.05);
+        const headingOf = (position, at) => {
+            const heading = position.heading ?? 0;
+            const toward = (heading * Math.PI) / 180;
+            const ahead = project({
+                lat: position.lat + (AHEAD * Math.cos(toward)) / METERS_PER_DEGREE,
+                lng: position.lng +
+                    (AHEAD * Math.sin(toward)) /
+                        (METERS_PER_DEGREE * Math.cos((position.lat * Math.PI) / 180)),
+            });
+            const [dx, dy] = [ahead.x - at.x, ahead.y - at.y];
+            if (Math.hypot(dx, dy) < 1e-6) {
+                return heading - bearing;
+            }
+            return Math.round(((Math.atan2(dx, -dy / tilted) * 180) / Math.PI) * 100) / 100;
+        };
+        for (const position of positions()) {
+            if (typeof position.lat !== 'number' || typeof position.lng !== 'number') {
+                continue;
+            }
+            if (driver.behind?.({ lat: position.lat, lng: position.lng })) {
+                for (const name of ['heading', 'pitch', 'radius', 'x', 'y']) {
+                    position.style.removeProperty(`--_map-position-${name}`);
+                }
+                continue;
+            }
+            const at = project({ lat: position.lat, lng: position.lng });
+            const meters = position.accuracy ?? 0;
+            const edge = meters > 0
+                ? project({
+                    lat: position.lat + (meters * Math.cos(across)) / METERS_PER_DEGREE,
+                    lng: position.lng +
+                        (meters * Math.sin(across)) /
+                            (METERS_PER_DEGREE * Math.cos((position.lat * Math.PI) / 180)),
+                })
+                : at;
+            position.style.setProperty('--_map-position-x', `${at.x}px`);
+            position.style.setProperty('--_map-position-y', `${at.y}px`);
+            position.style.setProperty('--_map-position-heading', `${headingOf({ heading: position.heading, lat: position.lat, lng: position.lng }, at)}deg`);
+            position.style.setProperty('--_map-position-radius', `${Math.hypot(edge.x - at.x, edge.y - at.y)}px`);
+            position.style.setProperty('--_map-position-pitch', `${pitch}deg`);
+        }
+        for (const [layer, found] of seen) {
+            const walk = found.map(({ place, ...one }) => ({ ...one, ...project(place) }));
+            if (!sameWalk(layer.walk, walk)) {
+                layer.walk = walk;
+            }
+        }
+    };
+    const stopViewing = driver.onView?.(place);
+    const away = (snapshot) => {
+        snapshot.hidden = true;
+        snapshot.style.display = 'none';
+    };
+    const snapshots = [...frame.querySelectorAll(':scope > [data-helix-map-snapshot]')];
+    const stopWaiting = snapshots.length > 0
+        ? driver.ready?.(() => {
+            const motion = motionOf(frame, 'step');
+            for (const snapshot of snapshots) {
+                if (!motion || typeof snapshot.animate !== 'function') {
+                    away(snapshot);
+                    continue;
+                }
+                snapshot
+                    .animate([{ opacity: 1 }, { opacity: 0 }], {
+                    duration: motion.duration,
+                    easing: `linear(${Array.from({ length: 13 }, (_, step) => motion.easing(step / 12).toFixed(3)).join(', ')})`,
+                })
+                    .finished.then(() => away(snapshot), () => away(snapshot));
+            }
+        })
+        : undefined;
+    let live = true;
+    let placing = false;
+    let drawing = false;
+    let queued = false;
+    const flush = () => {
+        queued = false;
+        if (!live) {
+            return;
+        }
+        if (placing) {
+            placing = false;
+            place();
+        }
+        if (drawing) {
+            drawing = false;
+            drawn?.update();
+        }
+    };
+    const soon = (what) => {
+        placing ||= what.place === true;
+        drawing ||= what.draw === true;
+        if (!queued) {
+            queued = true;
+            queueMicrotask(flush);
+        }
+    };
+    const handlePartChange = (event) => {
+        const { kind } = event.detail;
+        if (kind === 'menu') {
+            drawPreviews();
+            return;
+        }
+        if (kind === 'layer') {
+            syncType();
+        }
+        if (kind !== 'cluster') {
+            soon(kind === 'layer' ? { draw: true } : { place: true });
+        }
+    };
+    frame.addEventListener(HelixMapPartChangeEvent.eventName, handlePartChange);
+    const styled = new MutationObserver(() => soon({ draw: true }));
+    const watchLayers = () => {
+        styled.disconnect();
+        for (const layer of [...frame.children].filter(isLayer)) {
+            styled.observe(layer, {
+                attributeFilter: ['class', 'hidden', 'style', 'tone', 'variant'],
+                attributes: true,
+            });
+        }
+    };
+    watchLayers();
+    const children = new MutationObserver(() => {
+        watchLayers();
+        soon({ draw: true, place: true });
+    });
+    children.observe(frame, { childList: true });
+    const stopTheming = drawn ? watchTheme(frame, () => drawn.update()) : undefined;
+    place();
+    const reveal = (event) => {
+        const marker = event.composedPath().find(isMarker);
+        if (!marker || !driver.project || !driver.show) {
+            return;
+        }
+        if (typeof marker.lat !== 'number' || typeof marker.lng !== 'number') {
+            return;
+        }
+        const where = { lat: marker.lat, lng: marker.lng };
+        const at = driver.project(where);
+        const { height, width } = viewportOf(frame);
+        if (driver.behind?.(where) || at.x < 0 || at.y < 0 || at.x > width || at.y > height) {
+            driver.show({ lat: marker.lat, lng: marker.lng }, motionOf(frame, 'travel'));
+        }
+    };
+    frame.addEventListener('focusin', reveal);
+    const handleCluster = (event) => {
+        const layer = event.target;
+        const key = event.detail.key;
+        if (isLayer(layer) && layer.layerKind === 'points' && key?.startsWith('c:')) {
+            drawn?.expand?.(idOf(layer), Number(key.slice(2)));
+            return;
+        }
+        const members = clusters.get(event.target);
+        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));
+        if (spread <= SAME_SPOT || !driver.fit) {
+            fanned = { members, place: middle, scale: scaleOf(middle) };
+            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'));
+    };
+    frame.addEventListener(HelixMapClusterEvent.eventName, handleCluster);
+    const closeFan = () => {
+        const lead = fanned?.members[0];
+        fanned = undefined;
+        place();
+        return lead;
+    };
+    const handleFanKey = (event) => {
+        if (fanned && event.key === 'Escape') {
+            event.preventDefault();
+            closeFan()?.focus();
+        }
+    };
+    const handleFanPress = (event) => {
+        if (fanned && !event.composedPath().some(isMarker)) {
+            closeFan();
+        }
+    };
+    frame.addEventListener('keydown', handleFanKey);
+    frame.addEventListener('click', handleFanPress);
+    return {
+        disconnect() {
+            live = false;
+            drawn?.stop();
+            stopViewing?.();
+            stopWaiting?.();
+            stopTheming?.();
+            styled.disconnect();
+            children.disconnect();
+            frame.removeEventListener(HelixMapPartChangeEvent.eventName, handlePartChange);
+            frame.removeEventListener('focusin', reveal);
+            frame.removeEventListener(HelixMapClusterEvent.eventName, handleCluster);
+            frame.removeEventListener('keydown', handleFanKey);
+            frame.removeEventListener('click', handleFanPress);
+            for (const marker of markers()) {
+                marker.style.removeProperty('--_map-marker-x');
+                marker.style.removeProperty('--_map-marker-y');
+                if (marker.gatheredBy !== undefined) {
+                    marker.gatheredBy = undefined;
+                }
+                if ((marker.gathered?.length ?? 0) > 0) {
+                    marker.gathered = [];
+                }
+                if (marker.fanned === true) {
+                    marker.fanned = false;
+                }
+                marker.style.removeProperty('--_map-marker-leg');
+                marker.style.removeProperty('--_map-marker-leg-angle');
+            }
+            for (const layer of seen.keys()) {
+                layer.walk = [];
+            }
+            for (const position of positions()) {
+                for (const name of ['heading', 'pitch', 'radius', 'x', 'y']) {
+                    position.style.removeProperty(`--_map-position-${name}`);
+                }
+            }
+            frame.removeEventListener(HelixMapPanEvent.eventName, handlePan);
+            frame.removeEventListener(HelixMapZoomEvent.eventName, handleZoom);
+            frame.removeEventListener(HelixMapRotateEvent.eventName, handleRotate);
+            frame.removeEventListener(HelixMapTiltEvent.eventName, handleTilt);
+            stopBearing?.();
+            stopWatchingPreviews?.();
+            if (bare) {
+                driver.labels?.(true);
+            }
+            restoreKeyboard?.();
+            restoreZoom?.();
+            if (focusable) {
+                if (tabindex === null) {
+                    focusable.removeAttribute('tabindex');
+                }
+                else {
+                    focusable.setAttribute('tabindex', tabindex);
+                }
+            }
+            listening?.stop();
+            credit?.remove();
+        },
+        fit(options = {}) {
+            if (!driver.fit) {
+                return;
+            }
+            const places = [
+                ...[...markers(), ...positions()]
+                    .filter((one) => typeof one.lat === 'number' && typeof one.lng === 'number')
+                    .map((one) => ({ lat: one.lat, lng: one.lng })),
+                ...[...frame.children]
+                    .filter(isLayer)
+                    .flatMap((layer) => layer.layerKind === 'points' ? pointsOf(layer).points : (layer.points ?? [])),
+            ];
+            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'));
+        },
+    };
+};
+//# sourceMappingURL=connect-map.js.map