@fusion.dev/helix-map 0.0.0-dev

package/dist/maplibre/maplibre-driver.js

@@ -0,0 +1,1114 @@
+import { contourInterval, contoursOf, heightsFrom, joinedAcross, tilesCovering, } from '../contours/contours.js';
+import { colorsNow, mapColorsFrom, PATIENCE } from '../style/map-colors.js';
+import { cssColor, mix, oklch, parseColor } from '../style/oklab.js';
+import { watchTheme } from '../theme/watch-theme.js';
+import { drawMapImage, IMAGE_RATIO } from './map-images.js';
+const SOURCE = 'helix-layers';
+export const LAYERS = [
+    {
+        filter: ['==', ['get', 'kind'], 'area'],
+        id: 'helix-areas',
+        paint: { 'fill-color': ['get', 'color'], 'fill-opacity': 0.16 },
+        source: SOURCE,
+        type: 'fill',
+    },
+    {
+        filter: ['==', ['get', 'kind'], 'area'],
+        id: 'helix-area-edges',
+        layout: { 'line-join': 'round' },
+        paint: { 'line-color': ['get', 'color'], 'line-width': 1.5 },
+        source: SOURCE,
+        type: 'line',
+    },
+    {
+        filter: ['all', ['==', ['get', 'kind'], 'route'], ['has', 'casing']],
+        id: 'helix-route-casings',
+        layout: { 'line-cap': 'round', 'line-join': 'round' },
+        paint: {
+            'line-color': ['get', 'casing'],
+            'line-opacity': ['case', ['boolean', ['get', 'faded'], false], 0.4, 1],
+            'line-width': ['interpolate', ['linear'], ['zoom'], 4, 5.5, 14, 9],
+        },
+        source: SOURCE,
+        type: 'line',
+    },
+    {
+        filter: ['all', ['==', ['get', 'kind'], 'route'], ['==', ['get', 'pattern'], 'dotted']],
+        id: 'helix-route-dots',
+        layout: { 'line-cap': 'round', 'line-join': 'round' },
+        paint: {
+            'line-color': ['get', 'color'],
+            'line-dasharray': [0, 2],
+            'line-opacity': ['case', ['boolean', ['get', 'faded'], false], 0.4, 1],
+            'line-width': ['interpolate', ['linear'], ['zoom'], 4, 2.5, 14, 5],
+        },
+        source: SOURCE,
+        type: 'line',
+    },
+    {
+        filter: ['all', ['==', ['get', 'kind'], 'route'], ['!=', ['get', 'pattern'], 'dotted']],
+        id: 'helix-routes',
+        layout: { 'line-cap': 'round', 'line-join': 'round' },
+        paint: {
+            'line-color': ['get', 'color'],
+            'line-opacity': ['case', ['boolean', ['get', 'faded'], false], 0.4, 1],
+            'line-width': ['interpolate', ['linear'], ['zoom'], 4, 2.5, 14, 5],
+        },
+        source: SOURCE,
+        type: 'line',
+    },
+];
+export const geoJson = (layers) => ({
+    features: layers.flatMap((layer) => {
+        if (layer.kind !== 'area' && layer.kind !== 'route') {
+            return [];
+        }
+        const coordinates = layer.points.map(({ lat, lng }) => [lng, lat]);
+        return {
+            geometry: layer.kind === 'route'
+                ? { coordinates, type: 'LineString' }
+                : { coordinates: [[...coordinates, coordinates[0]]], type: 'Polygon' },
+            properties: {
+                ...(layer.casing ? { casing: layer.casing } : {}),
+                color: layer.color,
+                ...(layer.faded ? { faded: true } : {}),
+                ...(layer.pattern ? { pattern: layer.pattern } : {}),
+                kind: layer.kind,
+                label: layer.label,
+            },
+            type: 'Feature',
+        };
+    }),
+    type: 'FeatureCollection',
+});
+const buildingsLayer = (id) => `helix-buildings-${id}`;
+const EXTRAS = new Set([
+    'buildings',
+    'contours',
+    'landcover',
+    'raster',
+    'terrain',
+]);
+const contoursSource = (id) => `helix-contours-${id}`;
+const landcoverLayer = (id) => `helix-landcover-${id}`;
+const COVERS = [
+    ['wood', oklch(0.55, 0.11, 145), 0.42],
+    ['grass', oklch(0.68, 0.1, 130), 0.3],
+    ['farmland', oklch(0.75, 0.08, 90), 0.32],
+    ['wetland', oklch(0.62, 0.07, 185), 0.35],
+    ['sand', oklch(0.8, 0.06, 80), 0.4],
+    ['rock', oklch(0.62, 0.015, 60), 0.35],
+    ['ice', oklch(0.93, 0.03, 230), 0.55],
+];
+const NO_LINES = { features: [], type: 'FeatureCollection' };
+const terrainLayer = (id) => `helix-terrain-${id}`;
+const terrainSource = (id, use) => `helix-terrain-${id}-${use}`;
+const rasterFrame = (id, at) => `helix-raster-${id}-${at}`;
+export const buildingsExtrusion = (spec, source) => ({
+    filter: ['!=', ['get', 'hide_3d'], true],
+    id: buildingsLayer(spec.id),
+    minzoom: 13,
+    paint: {
+        'fill-extrusion-base': ['coalesce', ['get', 'render_min_height'], 0],
+        'fill-extrusion-color': spec.color,
+        'fill-extrusion-height': ['coalesce', ['get', 'render_height'], 0],
+        'fill-extrusion-opacity': 0.9,
+    },
+    source,
+    'source-layer': 'building',
+    type: 'fill-extrusion',
+});
+const pointsSource = (id) => `helix-points-${id}`;
+const pointsJson = (points) => ({
+    features: points.map(({ lat, lng }, at) => ({
+        geometry: { coordinates: [lng, lat], type: 'Point' },
+        properties: { at },
+        type: 'Feature',
+    })),
+    type: 'FeatureCollection',
+});
+export const pointsLayers = (id, spec, font) => {
+    const source = pointsSource(id);
+    const clustered = ['has', 'point_count'];
+    const size = ['step', ['get', 'point_count'], 14, 25, 17, 100, 21, 1000, 26];
+    return [
+        {
+            id: `${source}-halo`,
+            paint: {
+                'circle-color': spec.color,
+                'circle-opacity': 0.22,
+                'circle-radius': ['+', size, 6],
+            },
+            type: 'circle',
+        },
+        {
+            id: `${source}-clusters`,
+            paint: {
+                'circle-color': spec.color,
+                'circle-radius': size,
+                'circle-stroke-color': spec.casing ?? spec.color,
+                'circle-stroke-width': 2,
+            },
+            type: 'circle',
+        },
+        {
+            id: `${source}-count`,
+            layout: {
+                'text-allow-overlap': true,
+                'text-field': ['get', 'point_count_abbreviated'],
+                'text-font': font,
+                'text-size': 12,
+            },
+            paint: { 'text-color': spec.ink ?? '#ffffff' },
+            type: 'symbol',
+        },
+        {
+            id: `${source}-points`,
+            paint: {
+                'circle-color': spec.color,
+                'circle-radius': ['interpolate', ['linear'], ['zoom'], 8, 3, 15, 6],
+                'circle-stroke-color': spec.casing ?? spec.color,
+                'circle-stroke-width': ['interpolate', ['linear'], ['zoom'], 8, 1, 15, 1.5],
+            },
+            type: 'circle',
+        },
+    ].map((layer, at) => ({
+        ...layer,
+        filter: at === 3 ? ['!', clustered] : clustered,
+        source,
+    }));
+};
+const CONTROL = '.maplibregl-ctrl-attrib';
+const animation = (motion) => motion ? { duration: motion.duration, easing: motion.easing } : { animate: false };
+const aims = new WeakMap();
+const aimFrom = (map) => {
+    const aim = aims.get(map);
+    return aim && performance.now() < aim.until
+        ? aim
+        : { bearing: map.getBearing(), pitch: map.getPitch() };
+};
+const turn = (map, bearing, pitch, motion) => {
+    aims.set(map, { bearing, pitch, until: performance.now() + (motion?.duration ?? 0) });
+    map.easeTo({ bearing, pitch, ...animation(motion) });
+};
+const bared = new WeakMap();
+const isLabel = (layer) => !layer.id.startsWith('helix-') && (layer.type === 'line' || layer.type === 'symbol');
+const showLabels = (map, shown) => {
+    const visibility = shown ? 'visible' : 'none';
+    for (const layer of map.getStyle()?.layers ?? []) {
+        if (isLabel(layer) &&
+            (map.getLayoutProperty?.(layer.id, 'visibility') ?? 'visible') !== visibility) {
+            map.setLayoutProperty(layer.id, 'visibility', visibility);
+        }
+    }
+};
+const supplyImage = (holder, id) => {
+    if (!id?.startsWith('helix-') || holder.hasImage?.(id)) {
+        return;
+    }
+    const style = holder.getStyle();
+    const [named = '', text = ''] = id.split('|');
+    const image = style?.metadata?.['helix:images']?.[named];
+    const drawn = image ? drawMapImage(image, text) : undefined;
+    if (drawn) {
+        holder.addImage?.(id, drawn, { pixelRatio: IMAGE_RATIO });
+    }
+};
+const PICTURE = { height: 90, width: 120 };
+export const mapLibreDriver = (map) => ({
+    bearing: () => map.getBearing(),
+    behind: ({ lat, lng }) => map.transform?.isLocationOccluded?.({ lat, lng }) === true,
+    credits(changed) {
+        const control = map.getContainer().querySelector(CONTROL);
+        const display = control?.style.display ?? '';
+        if (control) {
+            control.style.display = 'none';
+        }
+        const learned = (event) => {
+            if (event?.sourceDataType === 'metadata') {
+                changed();
+            }
+        };
+        map.on('styledata', changed);
+        map.on('sourcedata', learned);
+        return {
+            read: () => Object.keys(map.getStyle()?.sources ?? {})
+                .map((id) => map.getSource(id)?.attribution ?? '')
+                .filter((one) => one !== ''),
+            stop: () => {
+                map.off('styledata', changed);
+                map.off('sourcedata', learned);
+                if (control) {
+                    control.style.display = display;
+                }
+            },
+        };
+    },
+    fit: ({ northEast, southWest }, padding, motion) => {
+        map.fitBounds([
+            [southWest.lng, southWest.lat],
+            [northEast.lng, northEast.lat],
+        ], { ...animation(motion), padding });
+    },
+    focusTarget: () => map.getCanvas(),
+    labels: (shown) => {
+        const heard = bared.has(map);
+        bared.set(map, !shown);
+        showLabels(map, shown);
+        if (!heard) {
+            map.on('styledata', () => {
+                if (bared.get(map)) {
+                    showLabels(map, false);
+                }
+            });
+        }
+    },
+    layers: (read, events) => {
+        const drawnPoints = new Map();
+        const takeOff = (id) => {
+            const source = pointsSource(id);
+            for (const suffix of ['points', 'count', 'clusters', 'halo']) {
+                if (map.getLayer(`${source}-${suffix}`)) {
+                    map.removeLayer(`${source}-${suffix}`);
+                }
+            }
+            if (map.getSource(source)) {
+                map.removeSource(source);
+            }
+        };
+        const drawPoints = (specs) => {
+            const faces = (map.getStyle()?.layers ?? [])
+                .filter((layer) => layer.type === 'symbol')
+                .map((layer) => layer.layout?.['text-font'])
+                .filter((face) => Array.isArray(face) && face.every((one) => typeof one === 'string'))
+                .filter((face) => !face.some((one) => /italic/i.test(one)));
+            const font = faces.find((face) => face.some((one) => /bold/i.test(one))) ??
+                faces[0] ?? ['Noto Sans Regular'];
+            const wanted = new Set(specs.map((spec) => spec.id));
+            for (const id of [...drawnPoints.keys()]) {
+                if (!wanted.has(id)) {
+                    takeOff(id);
+                    drawnPoints.delete(id);
+                }
+            }
+            for (const spec of specs) {
+                const id = pointsSource(spec.id);
+                const cluster = spec.cluster === true;
+                const had = drawnPoints.get(spec.id);
+                if (had && had.cluster !== cluster) {
+                    takeOff(spec.id);
+                }
+                const source = map.getSource(id);
+                if (source?.setData) {
+                    if (had?.points !== spec.points) {
+                        source.setData(pointsJson(spec.points));
+                    }
+                    for (const layer of pointsLayers(spec.id, spec, font)) {
+                        for (const [name, value] of Object.entries(layer.paint)) {
+                            map.setPaintProperty(layer.id, name, value);
+                        }
+                    }
+                }
+                else {
+                    try {
+                        map.addSource(id, {
+                            cluster,
+                            clusterMaxZoom: 14,
+                            clusterRadius: 44,
+                            data: pointsJson(spec.points),
+                            type: 'geojson',
+                        });
+                    }
+                    catch {
+                        continue;
+                    }
+                    for (const layer of pointsLayers(spec.id, spec, font)) {
+                        map.addLayer(layer);
+                    }
+                }
+                drawnPoints.set(spec.id, { cluster, points: spec.points });
+            }
+        };
+        const drawnExtras = new Map();
+        const traced = new Map();
+        const heights = new Map();
+        const lines = new Map();
+        let tracing = 0;
+        const heightsOf = (url, tile, encoding) => {
+            const had = heights.get(url);
+            if (had) {
+                return had;
+            }
+            const read = fetch(url)
+                .then((response) => (response.ok ? response.blob() : undefined))
+                .then((blob) => (blob ? createImageBitmap(blob) : undefined))
+                .then((bitmap) => {
+                if (!bitmap) {
+                    return undefined;
+                }
+                const canvas = document.createElement('canvas');
+                canvas.width = bitmap.width;
+                canvas.height = bitmap.height;
+                const context = canvas.getContext('2d', { willReadFrequently: true });
+                if (!context) {
+                    return undefined;
+                }
+                context.drawImage(bitmap, 0, 0);
+                const pixels = context.getImageData(0, 0, bitmap.width, bitmap.height).data;
+                return { ...tile, heights: heightsFrom(pixels, encoding), size: bitmap.width };
+            })
+                .catch(() => undefined);
+            if (heights.size >= 100) {
+                heights.delete(heights.keys().next().value);
+            }
+            heights.set(url, read);
+            return read;
+        };
+        const trace = async () => {
+            const run = ++tracing;
+            const zoom = map.getZoom?.() ?? 0;
+            const view = map.getBounds?.();
+            for (const [id, spec] of traced) {
+                const source = map.getSource(contoursSource(id));
+                if (!source?.setData || !spec.src) {
+                    continue;
+                }
+                if (zoom < 9 || !view) {
+                    source.setData(NO_LINES);
+                    continue;
+                }
+                const bounds = {
+                    east: view.getEast(),
+                    north: view.getNorth(),
+                    south: view.getSouth(),
+                    west: view.getWest(),
+                };
+                let z = Math.min(spec.maxZoom ?? 15, Math.max(0, Math.floor(zoom) - 1));
+                let tiles = tilesCovering(bounds, z);
+                while (tiles.length > 24 && z > 0) {
+                    z -= 1;
+                    tiles = tilesCovering(bounds, z);
+                }
+                const unit = spec.unit ?? 'meters';
+                const interval = contourInterval(zoom, unit);
+                const src = spec.src;
+                const read = await Promise.all(tiles.map((tile) => heightsOf(src
+                    .replace('{z}', `${tile.z}`)
+                    .replace('{x}', `${tile.x}`)
+                    .replace('{y}', `${tile.y}`), tile, spec.encoding ?? 'terrarium')));
+                if (run !== tracing) {
+                    return;
+                }
+                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}`;
+                    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);
+                        }
+                        lines.set(key, found);
+                        await new Promise((next) => setTimeout(next, 0));
+                        if (run !== tracing) {
+                            return;
+                        }
+                    }
+                    traced.push(...found);
+                }
+                const features = joinedAcross(traced).map((line) => ({
+                    geometry: { coordinates: line.coordinates, type: 'LineString' },
+                    properties: { elevation: line.elevation, index: line.index },
+                    type: 'Feature',
+                }));
+                source.setData({ features, type: 'FeatureCollection' });
+            }
+        };
+        const takeOffExtra = (id) => {
+            const had = drawnExtras.get(id);
+            if (had?.kind === 'contours') {
+                for (const layer of [contoursSource(id), `${contoursSource(id)}-label`]) {
+                    if (map.getLayer(layer)) {
+                        map.removeLayer(layer);
+                    }
+                }
+                if (map.getSource(contoursSource(id))) {
+                    map.removeSource(contoursSource(id));
+                }
+                traced.delete(id);
+            }
+            else if (had?.kind === 'landcover') {
+                if (map.getLayer(landcoverLayer(id))) {
+                    map.removeLayer(landcoverLayer(id));
+                }
+            }
+            else if (had?.kind === 'terrain') {
+                if (map.getLayer(terrainLayer(id))) {
+                    map.removeLayer(terrainLayer(id));
+                }
+                if (map.getTerrain?.()?.source === terrainSource(id, 'dem')) {
+                    map.setTerrain?.(null);
+                }
+                lifts.delete(id);
+                for (const use of ['dem', 'shade']) {
+                    if (map.getSource(terrainSource(id, use))) {
+                        map.removeSource(terrainSource(id, use));
+                    }
+                }
+            }
+            else if (had?.kind === 'buildings') {
+                if (map.getLayer(buildingsLayer(id))) {
+                    map.removeLayer(buildingsLayer(id));
+                }
+            }
+            else if (had?.kind === 'raster') {
+                for (let at = 0; at < had.key.split(' ').length; at += 1) {
+                    const name = rasterFrame(id, at);
+                    if (map.getLayer(name)) {
+                        map.removeLayer(name);
+                    }
+                    if (map.getSource(name)) {
+                        map.removeSource(name);
+                    }
+                }
+            }
+            drawnExtras.delete(id);
+        };
+        const under = () => map.getLayer(LAYERS[0]?.id ?? '')
+            ? LAYERS[0]?.id
+            : map.getStyle()?.layers?.find((layer) => layer.type === 'symbol')?.id;
+        const underRoads = () => {
+            const layers = map.getStyle()?.layers ?? [];
+            const lastFill = layers.findLastIndex((layer) => layer.type === 'fill' && !layer.id.startsWith('helix-'));
+            return layers
+                .slice(lastFill + 1)
+                .find((layer) => ['fill-extrusion', 'line', 'symbol'].includes(layer.type))?.id;
+        };
+        let standing = map.getPitch() > 0;
+        const lifts = new Map();
+        const lift = () => {
+            const [ground] = [...lifts.values()].slice(-1);
+            if (standing && ground) {
+                map.setTerrain?.(ground);
+            }
+            else if (map.getTerrain?.()?.source.startsWith('helix-terrain-')) {
+                map.setTerrain?.(null);
+            }
+        };
+        const stood = () => {
+            const now = map.getPitch() > 0;
+            if (now === standing) {
+                return;
+            }
+            standing = now;
+            for (const [id, had] of drawnExtras) {
+                if (had.kind === 'buildings' && map.getLayer(buildingsLayer(id))) {
+                    map.setLayoutProperty(buildingsLayer(id), 'visibility', standing ? 'visible' : 'none');
+                }
+            }
+            lift();
+        };
+        const drawExtras = (specs) => {
+            const wanted = new Set(specs.map((spec) => spec.id));
+            for (const id of [...drawnExtras.keys()]) {
+                if (!wanted.has(id)) {
+                    takeOffExtra(id);
+                }
+            }
+            for (const spec of specs) {
+                if (spec.kind === 'buildings') {
+                    const source = map
+                        .getStyle()
+                        ?.layers?.find((layer) => layer['source-layer'] === 'building')?.source;
+                    if (!source) {
+                        continue;
+                    }
+                    if (map.getLayer(buildingsLayer(spec.id))) {
+                        map.setPaintProperty(buildingsLayer(spec.id), 'fill-extrusion-color', spec.color);
+                    }
+                    else {
+                        try {
+                            map.addLayer({
+                                ...buildingsExtrusion(spec, source),
+                                layout: { visibility: standing ? 'visible' : 'none' },
+                            }, under());
+                        }
+                        catch {
+                            continue;
+                        }
+                    }
+                    drawnExtras.set(spec.id, { key: spec.color, kind: 'buildings' });
+                    continue;
+                }
+                if (spec.kind === 'landcover') {
+                    const style = map.getStyle()?.layers ?? [];
+                    const own = style.findIndex((layer) => layer['source-layer'] === 'landcover');
+                    const source = style[own]?.source;
+                    const water = style.findIndex((layer) => layer['source-layer'] === 'water');
+                    const land = parseColor(spec.color);
+                    if (!source || !land) {
+                        continue;
+                    }
+                    const fill = ['match', ['get', 'class']];
+                    for (const [cover, color, amount] of COVERS) {
+                        fill.push(cover, cssColor(mix(land, color, amount)));
+                    }
+                    fill.push('rgba(0, 0, 0, 0)');
+                    const layer = landcoverLayer(spec.id);
+                    if (map.getLayer(layer)) {
+                        map.setPaintProperty(layer, 'fill-color', fill);
+                    }
+                    else {
+                        try {
+                            map.addLayer({
+                                filter: ['match', ['get', 'class'], COVERS.map(([cover]) => cover), true, false],
+                                id: layer,
+                                paint: { 'fill-color': fill },
+                                source,
+                                'source-layer': 'landcover',
+                                type: 'fill',
+                            }, water >= 0 ? style[water]?.id : underRoads());
+                        }
+                        catch {
+                            continue;
+                        }
+                    }
+                    drawnExtras.set(spec.id, { key: spec.color, kind: 'landcover' });
+                    continue;
+                }
+                if (spec.kind === 'contours') {
+                    const key = `${spec.src ?? ''}|${spec.encoding ?? ''}|${spec.maxZoom ?? ''}|${spec.unit ?? ''}`;
+                    if (drawnExtras.get(spec.id)?.key !== key) {
+                        takeOffExtra(spec.id);
+                    }
+                    const source = contoursSource(spec.id);
+                    const style = map.getStyle()?.layers ?? [];
+                    const face = style
+                        .filter((layer) => layer.type === 'symbol')
+                        .map((layer) => layer.layout?.['text-font'])
+                        .find((one) => Array.isArray(one) && !one.some((name) => /italic|bold/i.test(String(name)))) ?? ['Noto Sans Regular'];
+                    const land = style.find((layer) => layer.type === 'background');
+                    const halo = String(land?.paint?.['background-color'] ?? 'rgba(0, 0, 0, 0)');
+                    if (map.getSource(source)) {
+                        map.setPaintProperty(source, 'line-color', spec.color);
+                        map.setPaintProperty(`${source}-label`, 'text-color', spec.color);
+                    }
+                    else {
+                        try {
+                            map.addSource(source, { data: NO_LINES, type: 'geojson' });
+                            const beneath = underRoads();
+                            map.addLayer({
+                                id: source,
+                                layout: { 'line-join': 'round' },
+                                paint: {
+                                    'line-color': spec.color,
+                                    'line-opacity': ['case', ['get', 'index'], 0.85, 0.55],
+                                    'line-width': ['case', ['get', 'index'], 1.1, 0.6],
+                                },
+                                source,
+                                type: 'line',
+                            }, beneath);
+                            map.addLayer({
+                                filter: ['get', 'index'],
+                                id: `${source}-label`,
+                                layout: {
+                                    'symbol-placement': 'line',
+                                    'symbol-spacing': 200,
+                                    'text-field': [
+                                        'concat',
+                                        ['to-string', ['get', 'elevation']],
+                                        spec.unit === 'feet' ? ' ft' : ' m',
+                                    ],
+                                    'text-font': face,
+                                    'text-max-angle': 40,
+                                    'text-size': 10,
+                                },
+                                paint: {
+                                    'text-color': spec.color,
+                                    'text-halo-color': halo,
+                                    'text-halo-width': 1.5,
+                                },
+                                source,
+                                type: 'symbol',
+                            }, beneath);
+                        }
+                        catch {
+                            continue;
+                        }
+                    }
+                    traced.set(spec.id, spec);
+                    drawnExtras.set(spec.id, { key, kind: 'contours' });
+                    void trace();
+                    continue;
+                }
+                if (spec.kind === 'terrain') {
+                    const key = `${spec.src ?? ''}|${spec.encoding ?? ''}|${spec.maxZoom ?? ''}|${spec.raised ? (spec.exaggeration ?? 1) : ''}`;
+                    if (drawnExtras.get(spec.id)?.key !== key) {
+                        takeOffExtra(spec.id);
+                    }
+                    const paint = {
+                        'hillshade-accent-color': spec.color,
+                        'hillshade-highlight-color': spec.highlight ?? spec.color,
+                        'hillshade-shadow-color': spec.color,
+                    };
+                    const shade = terrainLayer(spec.id);
+                    if (map.getLayer(shade)) {
+                        for (const [name, value] of Object.entries(paint)) {
+                            map.setPaintProperty(shade, name, value);
+                        }
+                    }
+                    else {
+                        try {
+                            const uses = spec.raised ? ['shade', 'dem'] : ['shade'];
+                            for (const use of uses) {
+                                if (!map.getSource(terrainSource(spec.id, use))) {
+                                    map.addSource(terrainSource(spec.id, use), {
+                                        ...(spec.attribution && use === 'shade'
+                                            ? { attribution: spec.attribution }
+                                            : {}),
+                                        encoding: spec.encoding ?? 'terrarium',
+                                        ...(spec.maxZoom === undefined ? {} : { maxzoom: spec.maxZoom }),
+                                        tileSize: 256,
+                                        tiles: [spec.src],
+                                        type: 'raster-dem',
+                                    });
+                                }
+                            }
+                            map.addLayer({
+                                id: shade,
+                                paint,
+                                source: terrainSource(spec.id, 'shade'),
+                                type: 'hillshade',
+                            }, underRoads());
+                            if (spec.raised) {
+                                lifts.set(spec.id, {
+                                    exaggeration: spec.exaggeration ?? 1,
+                                    source: terrainSource(spec.id, 'dem'),
+                                });
+                                lift();
+                            }
+                        }
+                        catch {
+                            continue;
+                        }
+                    }
+                    drawnExtras.set(spec.id, { key, kind: 'terrain' });
+                    continue;
+                }
+                const frames = spec.frames ?? [];
+                const key = `${frames.join(' ')}|${spec.ground ? 'ground' : ''}|${spec.maxZoom ?? ''}`;
+                if (drawnExtras.get(spec.id)?.key !== key) {
+                    takeOffExtra(spec.id);
+                }
+                for (const [at, url] of frames.entries()) {
+                    const name = rasterFrame(spec.id, at);
+                    const opacity = at === spec.frame ? (spec.opacity ?? 0.7) : 0;
+                    if (map.getLayer(name)) {
+                        map.setPaintProperty(name, 'raster-opacity', opacity);
+                        continue;
+                    }
+                    try {
+                        if (!map.getSource(name)) {
+                            map.addSource(name, {
+                                ...(spec.attribution ? { attribution: spec.attribution } : {}),
+                                ...(spec.maxZoom === undefined ? {} : { maxzoom: spec.maxZoom }),
+                                tileSize: 256,
+                                tiles: [url],
+                                type: 'raster',
+                            });
+                        }
+                        map.addLayer({
+                            id: name,
+                            paint: { 'raster-fade-duration': 0, 'raster-opacity': opacity },
+                            source: name,
+                            type: 'raster',
+                        }, spec.ground ? underRoads() : under());
+                    }
+                    catch {
+                    }
+                }
+                drawnExtras.set(spec.id, { key, kind: 'raster' });
+            }
+        };
+        let drawnData = '';
+        const draw = () => {
+            const specs = read();
+            drawPoints(specs.filter((spec) => spec.kind === 'points'));
+            const data = geoJson(specs);
+            const source = map.getSource(SOURCE);
+            if (source?.setData) {
+                const json = JSON.stringify(data);
+                if (json !== drawnData) {
+                    source.setData(data);
+                    drawnData = json;
+                }
+                drawExtras(specs.filter((spec) => EXTRAS.has(spec.kind)));
+                return;
+            }
+            try {
+                map.addSource(SOURCE, { data, tolerance: 1, type: 'geojson' });
+            }
+            catch {
+                return;
+            }
+            drawnData = JSON.stringify(data);
+            const labels = map.getStyle()?.layers?.find((layer) => layer.type === 'symbol')?.id;
+            for (const layer of LAYERS) {
+                map.addLayer(layer, labels);
+            }
+            drawExtras(specs.filter((spec) => EXTRAS.has(spec.kind)));
+        };
+        const restore = () => {
+            const lostExtras = [...drawnExtras.entries()].filter(([id, had]) => had.kind === 'buildings'
+                ? !map.getLayer(buildingsLayer(id))
+                : had.kind === 'terrain'
+                    ? !map.getLayer(terrainLayer(id))
+                    : had.kind === 'contours'
+                        ? !map.getLayer(contoursSource(id))
+                        : had.kind === 'landcover'
+                            ? !map.getLayer(landcoverLayer(id))
+                            : !map.getLayer(rasterFrame(id, 0)));
+            for (const [id] of lostExtras) {
+                drawnExtras.delete(id);
+            }
+            if (!map.getSource(SOURCE) ||
+                lostExtras.length > 0 ||
+                [...drawnPoints.keys()].some((id) => !map.getSource(pointsSource(id)))) {
+                if (!map.getSource(SOURCE)) {
+                    drawnPoints.clear();
+                    drawnData = '';
+                }
+                else {
+                    for (const id of drawnPoints.keys()) {
+                        if (!map.getSource(pointsSource(id))) {
+                            drawnPoints.delete(id);
+                        }
+                    }
+                }
+                draw();
+            }
+        };
+        const expand = (id, cluster, center) => {
+            const at = center ??
+                map
+                    .queryRenderedFeatures([
+                    [0, 0],
+                    [map.getCanvas().clientWidth, map.getCanvas().clientHeight],
+                ], { layers: [`${pointsSource(id)}-clusters`].filter((layer) => map.getLayer(layer)) })
+                    .find((one) => one.properties?.cluster_id === cluster)?.geometry.coordinates;
+            if (!at) {
+                return;
+            }
+            void map
+                .getSource(pointsSource(id))
+                ?.getClusterExpansionZoom?.(cluster)
+                .then((zoom) => {
+                const motion = events?.motion() ?? null;
+                if (motion) {
+                    map.easeTo({ center: at, zoom, ...animation(motion) });
+                }
+                else {
+                    map.jumpTo({ center: at, zoom });
+                }
+            });
+        };
+        const inView = (id) => {
+            const layers = [`${pointsSource(id)}-clusters`, `${pointsSource(id)}-points`].filter((layer) => map.getLayer(layer));
+            if (layers.length === 0) {
+                return [];
+            }
+            const canvas = map.getCanvas();
+            const seen = new Set();
+            return map
+                .queryRenderedFeatures([
+                [0, 0],
+                [canvas.clientWidth, canvas.clientHeight],
+            ], { layers })
+                .flatMap((one) => {
+                const cluster = one.properties?.cluster_id;
+                const at = one.properties?.at;
+                const key = typeof cluster === 'number' ? `c:${cluster}` : typeof at === 'number' ? `p:${at}` : '';
+                const coordinates = one.geometry.coordinates;
+                if (key === '' || seen.has(key) || !Array.isArray(coordinates)) {
+                    return [];
+                }
+                seen.add(key);
+                const [lng, lat] = coordinates;
+                return [
+                    typeof cluster === 'number'
+                        ? { cluster, count: Number(one.properties?.point_count ?? 0), place: { lat, lng } }
+                        : { at: at, place: { lat, lng } },
+                ];
+            });
+        };
+        const settled = () => {
+            events?.settled?.();
+        };
+        const hit = (event) => {
+            if (!event?.point || drawnPoints.size === 0) {
+                return undefined;
+            }
+            const layers = [...drawnPoints.keys()].flatMap((id) => [`${pointsSource(id)}-clusters`, `${pointsSource(id)}-points`].filter((layer) => map.getLayer(layer)));
+            const { x, y } = event.point;
+            return map.queryRenderedFeatures([
+                [x - 6, y - 6],
+                [x + 6, y + 6],
+            ], { layers })[0];
+        };
+        const pressed = (event) => {
+            const found = hit(event);
+            if (!found) {
+                return;
+            }
+            const id = found.layer.id.replace(/^helix-points-/, '').replace(/-(clusters|points)$/, '');
+            const cluster = found.properties?.cluster_id;
+            if (typeof cluster === 'number') {
+                const [lng, lat] = found.geometry.coordinates;
+                expand(id, cluster, [lng, lat]);
+                return;
+            }
+            const at = found.properties?.at;
+            if (typeof at === 'number') {
+                events?.press(id, at);
+            }
+        };
+        const pointing = (event) => {
+            map.getCanvas().style.cursor = hit(event) ? 'pointer' : '';
+        };
+        map.on('styledata', restore);
+        map.on('load', restore);
+        map.on('click', pressed);
+        map.on('mousemove', pointing);
+        map.on('idle', settled);
+        map.on('move', stood);
+        const missing = (event) => supplyImage(map, event?.id);
+        map.on('styleimagemissing', missing);
+        const moved = () => {
+            if (traced.size > 0) {
+                void trace();
+            }
+        };
+        map.on('moveend', moved);
+        draw();
+        return {
+            expand: (id, cluster) => expand(id, cluster),
+            inView,
+            stop: () => {
+                map.off('styledata', restore);
+                map.off('load', restore);
+                map.off('click', pressed);
+                map.off('mousemove', pointing);
+                map.off('idle', settled);
+                map.off('move', stood);
+                map.off('styleimagemissing', missing);
+                map.off('moveend', moved);
+                for (const id of drawnPoints.keys()) {
+                    takeOff(id);
+                }
+                drawnPoints.clear();
+                for (const id of [...drawnExtras.keys()]) {
+                    takeOffExtra(id);
+                }
+                for (const layer of [...LAYERS].reverse()) {
+                    if (map.getLayer(layer.id)) {
+                        map.removeLayer(layer.id);
+                    }
+                }
+                if (map.getSource(SOURCE)) {
+                    map.removeSource(SOURCE);
+                }
+            },
+            update: draw,
+        };
+    },
+    onView: (moved) => {
+        map.on('move', moved);
+        map.on('resize', moved);
+        return () => {
+            map.off('move', moved);
+            map.off('resize', moved);
+        };
+    },
+    panBy: (x, y, motion) => {
+        map.panBy([x, y], animation(motion));
+    },
+    pitch: () => map.getPitch(),
+    previews: async ({ imagery, types }) => {
+        const center = map.getCenter?.();
+        const zoom = map.getZoom?.();
+        const style = map.getStyle();
+        if (!center || zoom === undefined || !style) {
+            return {};
+        }
+        const Picture = map.constructor;
+        const box = document.createElement('div');
+        box.style.cssText = `position:fixed;left:-10000px;top:0;width:${PICTURE.width}px;height:${PICTURE.height}px`;
+        document.body.append(box);
+        const base = JSON.parse(JSON.stringify(style));
+        delete base.terrain;
+        const ours = (id) => id.startsWith('helix-');
+        base.layers = (base.layers ?? []).filter((layer) => !ours(layer.id));
+        base.sources = Object.fromEntries(Object.entries(base.sources ?? {}).filter(([id]) => !ours(id)));
+        const pictures = {};
+        try {
+            for (const type of types) {
+                if (type !== 'standard' && !imagery) {
+                    continue;
+                }
+                const layers = base.layers.map((layer) => isLabel(layer)
+                    ? {
+                        ...layer,
+                        layout: { ...layer.layout, visibility: type === 'satellite' ? 'none' : 'visible' },
+                    }
+                    : layer);
+                if (type !== 'standard' && imagery) {
+                    const lastFill = layers.findLastIndex((layer) => layer.type === 'fill' && !layer.id.startsWith('helix-'));
+                    layers.splice(lastFill + 1, 0, {
+                        id: 'helix-picture-imagery',
+                        source: 'helix-picture-imagery',
+                        type: 'raster',
+                    });
+                }
+                const sources = type !== 'standard' && imagery
+                    ? {
+                        ...base.sources,
+                        'helix-picture-imagery': {
+                            ...(imagery.maxZoom === undefined ? {} : { maxzoom: imagery.maxZoom }),
+                            tileSize: 256,
+                            tiles: [imagery.src],
+                            type: 'raster',
+                        },
+                    }
+                    : base.sources;
+                const picture = new Picture({
+                    attributionControl: false,
+                    bearing: map.getBearing(),
+                    center: [center.lng, center.lat],
+                    container: box,
+                    fadeDuration: 0,
+                    interactive: false,
+                    pitch: 0,
+                    pixelRatio: 2,
+                    preserveDrawingBuffer: true,
+                    style: { ...base, layers, sources },
+                    zoom: Math.max(0, zoom - 1.5),
+                });
+                picture.on('styleimagemissing', (event) => supplyImage(picture, event?.id));
+                await new Promise((done) => {
+                    const late = setTimeout(done, 6000);
+                    picture.once('idle', () => {
+                        clearTimeout(late);
+                        done();
+                    });
+                });
+                pictures[type] = picture.getCanvas().toDataURL('image/jpeg', 0.85);
+                picture.remove();
+            }
+        }
+        finally {
+            box.remove();
+        }
+        return pictures;
+    },
+    project: ({ lat, lng }) => {
+        const { x, y } = map.project([lng, lat]);
+        return { x, y };
+    },
+    ready: (done) => {
+        if (map.loaded?.() && map.areTilesLoaded?.()) {
+            done();
+            return () => undefined;
+        }
+        const heard = () => {
+            map.off('load', heard);
+            done();
+        };
+        map.on('load', heard);
+        return () => map.off('load', heard);
+    },
+    rotate: ({ by, to }, motion) => {
+        const { bearing, pitch } = aimFrom(map);
+        turn(map, to ?? bearing + (by ?? 0), pitch, motion);
+    },
+    show: ({ lat, lng, zoom }, motion) => {
+        const options = {
+            center: [lng, lat],
+            ...(zoom === undefined ? {} : { zoom }),
+        };
+        if (motion) {
+            map.easeTo({ ...options, ...animation(motion) });
+        }
+        else {
+            map.jumpTo(options);
+        }
+    },
+    silenceKeyboard: () => {
+        const was = map.keyboard.isEnabled();
+        map.keyboard.disable();
+        return () => {
+            if (was) {
+                map.keyboard.enable();
+            }
+        };
+    },
+    tilt: ({ by, to }, motion) => {
+        const { bearing, pitch } = aimFrom(map);
+        turn(map, bearing, Math.max(0, to ?? pitch + (by ?? 0)), motion);
+    },
+    zoomBy: (direction, motion) => {
+        if (direction > 0) {
+            map.zoomIn(animation(motion));
+        }
+        else {
+            map.zoomOut(animation(motion));
+        }
+    },
+});
+export const followTheme = (map, element, style) => {
+    const first = colorsNow(element);
+    let last = first ? JSON.stringify(style(first)) : '';
+    let pending = 0;
+    let waited = 0;
+    const read = () => {
+        pending = requestAnimationFrame(() => {
+            const colors = colorsNow(element);
+            if (!colors) {
+                if (waited++ < PATIENCE) {
+                    read();
+                }
+                else {
+                    try {
+                        mapColorsFrom(element);
+                    }
+                    catch (error) {
+                        console.error(error);
+                    }
+                }
+                return;
+            }
+            waited = 0;
+            const next = style(colors);
+            const said = JSON.stringify(next);
+            if (said !== last) {
+                last = said;
+                map.setStyle(next, { diff: true });
+            }
+        });
+    };
+    const update = () => {
+        cancelAnimationFrame(pending);
+        waited = 0;
+        read();
+    };
+    const stopWatching = watchTheme(element, update);
+    return {
+        stop: () => {
+            cancelAnimationFrame(pending);
+            stopWatching();
+        },
+        update,
+    };
+};
+//# sourceMappingURL=maplibre-driver.js.map