isard 0.0.0-stage → 0.2.1

package/dist/style.js

@@ -0,0 +1,130 @@
+/**
+ * Styles of the DOM overlays (markers, popups, controls), injected once per document so the package needs no CSS
+ * file. Colors are custom properties, defaults on the root with no specificity: an application restyles them on any
+ * element around the map (its container's class may be replaced by a framework: nothing depends on it).
+ */
+const CSS = `
+:where(:root) {
+  --isard-ctrl-bg: #fff;
+  --isard-ctrl-fg: #333;
+  --isard-ctrl-hover: rgb(0 0 0 / 0.05);
+  --isard-ctrl-active: #1d2433;
+  --isard-ctrl-active-fg: #fff;
+  --isard-ctrl-border: #ddd;
+  --isard-ctrl-shadow: 0 0 0 2px rgb(0 0 0 / 0.1);
+  --isard-popup-bg: #fff;
+  --isard-popup-fg: #1d2433;
+  --isard-marker-color: #3a6fd8;
+  --isard-attrib-bg: rgb(255 255 255 / 0.5);
+  --isard-attrib-fg: rgb(0 0 0 / 0.75);
+  --isard-focus: #3a6fd8;
+}
+.isard-canvas:focus { outline: none; }
+.isard-canvas:focus-visible { outline: 2px solid var(--isard-focus); outline-offset: -2px; }
+.isard-overlay { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
+.isard-ctrl-top-left, .isard-ctrl-top-right, .isard-ctrl-bottom-left, .isard-ctrl-bottom-right {
+  position: absolute; pointer-events: none; z-index: 2;
+}
+.isard-ctrl-top-left { top: 0; left: 0; }
+.isard-ctrl-top-right { top: 0; right: 0; }
+.isard-ctrl-bottom-left { bottom: 0; left: 0; }
+.isard-ctrl-bottom-right { bottom: 0; right: 0; }
+.isard-ctrl { clear: both; pointer-events: auto; transform: translate(0, 0); }
+.isard-ctrl-top-left .isard-ctrl { float: left; margin: 10px 0 0 10px; }
+.isard-ctrl-top-right .isard-ctrl { float: right; margin: 10px 10px 0 0; }
+.isard-ctrl-bottom-left .isard-ctrl { float: left; margin: 0 0 10px 10px; }
+.isard-ctrl-bottom-right .isard-ctrl { float: right; margin: 0 10px 10px 0; }
+.isard-ctrl-group { background: var(--isard-ctrl-bg); border-radius: 4px; box-shadow: var(--isard-ctrl-shadow); }
+.isard-ctrl-group button {
+  display: block; width: 29px; height: 29px; padding: 0; margin: 0; border: 0; box-sizing: border-box;
+  background: transparent; color: var(--isard-ctrl-fg); cursor: pointer; font: inherit;
+}
+.isard-ctrl-group button + button { border-top: 1px solid var(--isard-ctrl-border); }
+.isard-ctrl-group button:first-child { border-radius: 4px 4px 0 0; }
+.isard-ctrl-group button:last-child { border-radius: 0 0 4px 4px; }
+.isard-ctrl-group button:only-child { border-radius: inherit; }
+.isard-ctrl-group button:hover { background-color: var(--isard-ctrl-hover); }
+.isard-ctrl-group button:focus-visible { outline: 2px solid var(--isard-ctrl-active); outline-offset: -2px; }
+.isard-ctrl-group button.active { background: var(--isard-ctrl-active); color: var(--isard-ctrl-active-fg); }
+.isard-ctrl-group button svg { display: block; margin: auto; pointer-events: none; }
+.isard-ctrl-compass svg { transition: transform 0.05s; }
+.isard-marker { position: absolute; top: 0; left: 0; pointer-events: auto; will-change: transform; }
+.isard-marker-draggable { cursor: grab; touch-action: none; }
+.isard-marker-dragging { cursor: grabbing; }
+.isard-marker-pin { display: block; color: var(--isard-marker-color); filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35)); }
+.isard-popup {
+  position: absolute; top: 0; left: 0; display: flex; pointer-events: none; will-change: transform; z-index: 1;
+  color: var(--isard-popup-fg);
+}
+.isard-popup-anchor-top, .isard-popup-anchor-top-left, .isard-popup-anchor-top-right { flex-direction: column; }
+.isard-popup-anchor-bottom, .isard-popup-anchor-bottom-left, .isard-popup-anchor-bottom-right {
+  flex-direction: column-reverse;
+}
+.isard-popup-anchor-left { flex-direction: row; }
+.isard-popup-anchor-right { flex-direction: row-reverse; }
+.isard-popup-tip { width: 0; height: 0; border: 10px solid transparent; z-index: 1; }
+.isard-popup-anchor-top .isard-popup-tip { align-self: center; border-top: none; border-bottom-color: var(--isard-popup-bg); }
+.isard-popup-anchor-top-left .isard-popup-tip {
+  align-self: flex-start; border-top: none; border-left: none; border-bottom-color: var(--isard-popup-bg);
+}
+.isard-popup-anchor-top-right .isard-popup-tip {
+  align-self: flex-end; border-top: none; border-right: none; border-bottom-color: var(--isard-popup-bg);
+}
+.isard-popup-anchor-bottom .isard-popup-tip { align-self: center; border-bottom: none; border-top-color: var(--isard-popup-bg); }
+.isard-popup-anchor-bottom-left .isard-popup-tip {
+  align-self: flex-start; border-bottom: none; border-left: none; border-top-color: var(--isard-popup-bg);
+}
+.isard-popup-anchor-bottom-right .isard-popup-tip {
+  align-self: flex-end; border-bottom: none; border-right: none; border-top-color: var(--isard-popup-bg);
+}
+.isard-popup-anchor-left .isard-popup-tip { align-self: center; border-left: none; border-right-color: var(--isard-popup-bg); }
+.isard-popup-anchor-right .isard-popup-tip { align-self: center; border-right: none; border-left-color: var(--isard-popup-bg); }
+.isard-popup-content {
+  position: relative; padding: 12px 14px; border-radius: 4px; background: var(--isard-popup-bg);
+  box-shadow: 0 1px 4px rgb(0 0 0 / 0.2); pointer-events: auto; overflow-wrap: break-word;
+}
+.isard-popup-has-close .isard-popup-content { padding-right: 26px; }
+.isard-popup-anchor-top-left .isard-popup-content { border-top-left-radius: 0; }
+.isard-popup-anchor-top-right .isard-popup-content { border-top-right-radius: 0; }
+.isard-popup-anchor-bottom-left .isard-popup-content { border-bottom-left-radius: 0; }
+.isard-popup-anchor-bottom-right .isard-popup-content { border-bottom-right-radius: 0; }
+.isard-popup-close {
+  position: absolute; top: 0; right: 0; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 0 4px 0 4px;
+  background: transparent; color: inherit; font: 18px/22px system-ui, sans-serif; cursor: pointer;
+}
+.isard-popup-close:hover { background: rgb(0 0 0 / 0.05); }
+.isard-popup-close:focus-visible, .isard-attrib-button:focus-visible, .isard-attrib a:focus-visible {
+  outline: 2px solid var(--isard-focus); outline-offset: -2px;
+}
+.isard-attrib {
+  display: flex; align-items: center; gap: 4px; padding: 0 5px; border-radius: 4px; background: var(--isard-attrib-bg);
+  color: var(--isard-attrib-fg); font: 12px/20px system-ui, sans-serif;
+}
+.isard-ctrl-bottom-right .isard-ctrl.isard-attrib, .isard-ctrl-bottom-left .isard-ctrl.isard-attrib { margin-bottom: 0; }
+.isard-ctrl-bottom-right .isard-ctrl.isard-attrib { margin-right: 0; border-radius: 4px 0 0 0; }
+.isard-ctrl-bottom-left .isard-ctrl.isard-attrib { margin-left: 0; border-radius: 0 4px 0 0; }
+.isard-attrib a { color: inherit; text-decoration: none; }
+.isard-attrib a:hover { text-decoration: underline; }
+.isard-attrib-button {
+  display: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 12px; flex: none;
+  background: var(--isard-ctrl-bg); color: var(--isard-ctrl-fg); cursor: pointer;
+}
+.isard-attrib-button svg { display: block; margin: auto; }
+.isard-ctrl.isard-attrib.isard-attrib-compact { min-height: 24px; padding: 2px; border-radius: 12px; margin: 0 10px 10px; }
+.isard-attrib-compact .isard-attrib-button { display: block; }
+.isard-attrib-compact .isard-attrib-inner { display: none; padding: 0 6px 0 2px; }
+.isard-attrib-compact.isard-attrib-open { background: var(--isard-ctrl-bg); }
+.isard-attrib-compact.isard-attrib-open .isard-attrib-inner { display: block; }
+`;
+const styled = new WeakSet();
+/** Adds the overlay styles to a document, once; first in the head so application rules win at equal specificity */
+export function injectStyle(doc) {
+    if (styled.has(doc))
+        return;
+    styled.add(doc);
+    const style = doc.createElement('style');
+    style.dataset.isard = '';
+    style.textContent = CSS;
+    doc.head.prepend(style);
+}
+//# sourceMappingURL=style.js.map

package/dist/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHX,CAAC;AAEF,MAAM,MAAM,GAAG,IAAI,OAAO,EAAY,CAAC;AAEvC,mHAAmH;AACnH,MAAM,UAAU,WAAW,CAAC,GAAa;IACvC,IAAI,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC;QAAE,OAAO;IAC5B,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAChB,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;IACzB,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC;IACxB,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAC1B,CAAC","sourcesContent":["/**\n * Styles of the DOM overlays (markers, popups, controls), injected once per document so the package needs no CSS\n * file. Colors are custom properties, defaults on the root with no specificity: an application restyles them on any\n * element around the map (its container's class may be replaced by a framework: nothing depends on it).\n */\n\nconst CSS = `\n:where(:root) {\n  --isard-ctrl-bg: #fff;\n  --isard-ctrl-fg: #333;\n  --isard-ctrl-hover: rgb(0 0 0 / 0.05);\n  --isard-ctrl-active: #1d2433;\n  --isard-ctrl-active-fg: #fff;\n  --isard-ctrl-border: #ddd;\n  --isard-ctrl-shadow: 0 0 0 2px rgb(0 0 0 / 0.1);\n  --isard-popup-bg: #fff;\n  --isard-popup-fg: #1d2433;\n  --isard-marker-color: #3a6fd8;\n  --isard-attrib-bg: rgb(255 255 255 / 0.5);\n  --isard-attrib-fg: rgb(0 0 0 / 0.75);\n  --isard-focus: #3a6fd8;\n}\n.isard-canvas:focus { outline: none; }\n.isard-canvas:focus-visible { outline: 2px solid var(--isard-focus); outline-offset: -2px; }\n.isard-overlay { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }\n.isard-ctrl-top-left, .isard-ctrl-top-right, .isard-ctrl-bottom-left, .isard-ctrl-bottom-right {\n  position: absolute; pointer-events: none; z-index: 2;\n}\n.isard-ctrl-top-left { top: 0; left: 0; }\n.isard-ctrl-top-right { top: 0; right: 0; }\n.isard-ctrl-bottom-left { bottom: 0; left: 0; }\n.isard-ctrl-bottom-right { bottom: 0; right: 0; }\n.isard-ctrl { clear: both; pointer-events: auto; transform: translate(0, 0); }\n.isard-ctrl-top-left .isard-ctrl { float: left; margin: 10px 0 0 10px; }\n.isard-ctrl-top-right .isard-ctrl { float: right; margin: 10px 10px 0 0; }\n.isard-ctrl-bottom-left .isard-ctrl { float: left; margin: 0 0 10px 10px; }\n.isard-ctrl-bottom-right .isard-ctrl { float: right; margin: 0 10px 10px 0; }\n.isard-ctrl-group { background: var(--isard-ctrl-bg); border-radius: 4px; box-shadow: var(--isard-ctrl-shadow); }\n.isard-ctrl-group button {\n  display: block; width: 29px; height: 29px; padding: 0; margin: 0; border: 0; box-sizing: border-box;\n  background: transparent; color: var(--isard-ctrl-fg); cursor: pointer; font: inherit;\n}\n.isard-ctrl-group button + button { border-top: 1px solid var(--isard-ctrl-border); }\n.isard-ctrl-group button:first-child { border-radius: 4px 4px 0 0; }\n.isard-ctrl-group button:last-child { border-radius: 0 0 4px 4px; }\n.isard-ctrl-group button:only-child { border-radius: inherit; }\n.isard-ctrl-group button:hover { background-color: var(--isard-ctrl-hover); }\n.isard-ctrl-group button:focus-visible { outline: 2px solid var(--isard-ctrl-active); outline-offset: -2px; }\n.isard-ctrl-group button.active { background: var(--isard-ctrl-active); color: var(--isard-ctrl-active-fg); }\n.isard-ctrl-group button svg { display: block; margin: auto; pointer-events: none; }\n.isard-ctrl-compass svg { transition: transform 0.05s; }\n.isard-marker { position: absolute; top: 0; left: 0; pointer-events: auto; will-change: transform; }\n.isard-marker-draggable { cursor: grab; touch-action: none; }\n.isard-marker-dragging { cursor: grabbing; }\n.isard-marker-pin { display: block; color: var(--isard-marker-color); filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35)); }\n.isard-popup {\n  position: absolute; top: 0; left: 0; display: flex; pointer-events: none; will-change: transform; z-index: 1;\n  color: var(--isard-popup-fg);\n}\n.isard-popup-anchor-top, .isard-popup-anchor-top-left, .isard-popup-anchor-top-right { flex-direction: column; }\n.isard-popup-anchor-bottom, .isard-popup-anchor-bottom-left, .isard-popup-anchor-bottom-right {\n  flex-direction: column-reverse;\n}\n.isard-popup-anchor-left { flex-direction: row; }\n.isard-popup-anchor-right { flex-direction: row-reverse; }\n.isard-popup-tip { width: 0; height: 0; border: 10px solid transparent; z-index: 1; }\n.isard-popup-anchor-top .isard-popup-tip { align-self: center; border-top: none; border-bottom-color: var(--isard-popup-bg); }\n.isard-popup-anchor-top-left .isard-popup-tip {\n  align-self: flex-start; border-top: none; border-left: none; border-bottom-color: var(--isard-popup-bg);\n}\n.isard-popup-anchor-top-right .isard-popup-tip {\n  align-self: flex-end; border-top: none; border-right: none; border-bottom-color: var(--isard-popup-bg);\n}\n.isard-popup-anchor-bottom .isard-popup-tip { align-self: center; border-bottom: none; border-top-color: var(--isard-popup-bg); }\n.isard-popup-anchor-bottom-left .isard-popup-tip {\n  align-self: flex-start; border-bottom: none; border-left: none; border-top-color: var(--isard-popup-bg);\n}\n.isard-popup-anchor-bottom-right .isard-popup-tip {\n  align-self: flex-end; border-bottom: none; border-right: none; border-top-color: var(--isard-popup-bg);\n}\n.isard-popup-anchor-left .isard-popup-tip { align-self: center; border-left: none; border-right-color: var(--isard-popup-bg); }\n.isard-popup-anchor-right .isard-popup-tip { align-self: center; border-right: none; border-left-color: var(--isard-popup-bg); }\n.isard-popup-content {\n  position: relative; padding: 12px 14px; border-radius: 4px; background: var(--isard-popup-bg);\n  box-shadow: 0 1px 4px rgb(0 0 0 / 0.2); pointer-events: auto; overflow-wrap: break-word;\n}\n.isard-popup-has-close .isard-popup-content { padding-right: 26px; }\n.isard-popup-anchor-top-left .isard-popup-content { border-top-left-radius: 0; }\n.isard-popup-anchor-top-right .isard-popup-content { border-top-right-radius: 0; }\n.isard-popup-anchor-bottom-left .isard-popup-content { border-bottom-left-radius: 0; }\n.isard-popup-anchor-bottom-right .isard-popup-content { border-bottom-right-radius: 0; }\n.isard-popup-close {\n  position: absolute; top: 0; right: 0; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 0 4px 0 4px;\n  background: transparent; color: inherit; font: 18px/22px system-ui, sans-serif; cursor: pointer;\n}\n.isard-popup-close:hover { background: rgb(0 0 0 / 0.05); }\n.isard-popup-close:focus-visible, .isard-attrib-button:focus-visible, .isard-attrib a:focus-visible {\n  outline: 2px solid var(--isard-focus); outline-offset: -2px;\n}\n.isard-attrib {\n  display: flex; align-items: center; gap: 4px; padding: 0 5px; border-radius: 4px; background: var(--isard-attrib-bg);\n  color: var(--isard-attrib-fg); font: 12px/20px system-ui, sans-serif;\n}\n.isard-ctrl-bottom-right .isard-ctrl.isard-attrib, .isard-ctrl-bottom-left .isard-ctrl.isard-attrib { margin-bottom: 0; }\n.isard-ctrl-bottom-right .isard-ctrl.isard-attrib { margin-right: 0; border-radius: 4px 0 0 0; }\n.isard-ctrl-bottom-left .isard-ctrl.isard-attrib { margin-left: 0; border-radius: 0 4px 0 0; }\n.isard-attrib a { color: inherit; text-decoration: none; }\n.isard-attrib a:hover { text-decoration: underline; }\n.isard-attrib-button {\n  display: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 12px; flex: none;\n  background: var(--isard-ctrl-bg); color: var(--isard-ctrl-fg); cursor: pointer;\n}\n.isard-attrib-button svg { display: block; margin: auto; }\n.isard-ctrl.isard-attrib.isard-attrib-compact { min-height: 24px; padding: 2px; border-radius: 12px; margin: 0 10px 10px; }\n.isard-attrib-compact .isard-attrib-button { display: block; }\n.isard-attrib-compact .isard-attrib-inner { display: none; padding: 0 6px 0 2px; }\n.isard-attrib-compact.isard-attrib-open { background: var(--isard-ctrl-bg); }\n.isard-attrib-compact.isard-attrib-open .isard-attrib-inner { display: block; }\n`;\n\nconst styled = new WeakSet<Document>();\n\n/** Adds the overlay styles to a document, once; first in the head so application rules win at equal specificity */\nexport function injectStyle(doc: Document): void {\n  if (styled.has(doc)) return;\n  styled.add(doc);\n  const style = doc.createElement('style');\n  style.dataset.isard = '';\n  style.textContent = CSS;\n  doc.head.prepend(style);\n}\n"]}

package/dist/symbols.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Text labels from GeoJSON: at points, at the middle of lines, at the center of polygons. Shaped on the page, placed by
+ * the engine every frame with collisions shared by all symbol layers (the top layer first, each layer in data order),
+ * drawn with a halo, standing on the relief.
+ */
+import { type Feature, type FeatureData, type FeatureLayerStyle, type Placement, type Properties, type Size, type Styled } from './features.ts';
+import { type Glyphs, type TextPart } from './glyphs.ts';
+import { Layer } from './layers.ts';
+import type { Anchor } from './overlay.ts';
+import type { LayerHost } from './types.ts';
+export interface SymbolStyle<P = Properties> extends Omit<FeatureLayerStyle<P>, 'ramp'> {
+    /** The text: a string (`\n` breaks lines) or runs with their own scale and font; empty: no label */
+    text: Styled<string | TextPart[], P>;
+    /** A font of the map's glyphs (default `Noto Sans Regular`; also Bold and Italic with the default glyphs) */
+    font: Styled<string, P>;
+    /** CSS pixels, or zoom stops (default 12) */
+    size: Styled<Size, P>;
+    /** `'point'` (default): horizontal text; `'line'`: along the line at its middle, kept upright */
+    placement: 'point' | 'line';
+    color: Styled<string, P>;
+    haloColor: Styled<string, P>;
+    /** CSS pixels (default 0) */
+    haloWidth: Styled<number, P>;
+    /** Side of the text at the anchor (default `'center'`) */
+    anchor: Styled<Anchor, P>;
+    /** Shift, ems (default [0, 0]) */
+    offset: Styled<[x: number, y: number], P>;
+    /** Wrapping width, ems (default 10) */
+    maxWidth: Styled<number, P>;
+    /** Ems (default 1.2) */
+    lineHeight: Styled<number, P>;
+    /** Shown even where it overlaps other labels, and hiding none (MapLibre's allow-overlap and ignore-placement)
+     * (default false) */
+    overlap: Styled<boolean, P>;
+}
+export interface SymbolOptions<P = Properties> extends Partial<SymbolStyle<P>>, Placement {
+    data: FeatureData<P>;
+}
+/** The map's glyphs, for a layer */
+export interface GlyphHost extends LayerHost {
+    readonly glyphs: Glyphs;
+}
+export declare class SymbolLayer<P = Properties> extends Layer {
+    private readonly host;
+    private style;
+    private list;
+    /** Bumped by each change: a shaping that finished after a newer one began is dropped */
+    private generation;
+    private labels;
+    get features(): readonly Feature<P>[];
+    setData(data: FeatureData<P>): void;
+    setStyle(style: Partial<SymbolStyle<P>>): void;
+    setFilter(filter: ((properties: P, index: number) => boolean) | undefined): void;
+    setVisible(visible: boolean): void;
+    /** Shapes the labels (loading their glyphs first) and sends them */
+    private update;
+    private build;
+    private send;
+    private sendLayer;
+}
+export declare function symbolStyle<P>(options: SymbolOptions<P>): SymbolStyle<P>;

package/dist/symbols.js

@@ -0,0 +1,238 @@
+/**
+ * Text labels from GeoJSON: at points, at the middle of lines, at the center of polygons. Shaped on the page, placed by
+ * the engine every frame with collisions shared by all symbol layers (the top layer first, each layer in data order),
+ * drawn with a halo, standing on the relief.
+ */
+import { evaluate, featuresOf, parseColor, stops, } from "./features.js";
+import { codes, DEFAULT_FONT, shape } from "./glyphs.js";
+import { Layer } from "./layers.js";
+/** Where a geometry is labelled: its points, the middle of its longest line (with the direction of the line there),
+ * the centroid of its largest polygon */
+function anchors(geometry) {
+    return points(geometry).map((p) => (p.length > 2 ? { at: [p[0], p[1]], along: [p[2] ?? 0, p[3] ?? 0] } : { at: p }));
+}
+/** Anchors as positions, a line's carrying the direction (lon, lat, dlon, dlat) */
+function points(geometry) {
+    if (!geometry)
+        return [];
+    switch (geometry.type) {
+        case 'Point':
+            return [geometry.coordinates];
+        case 'MultiPoint':
+            return geometry.coordinates;
+        case 'LineString':
+        case 'MultiLineString': {
+            const lines = geometry.type === 'LineString' ? [geometry.coordinates] : geometry.coordinates;
+            const length = (l) => l.slice(1).reduce((s, p, i) => s + Math.hypot(p[0] - (l[i]?.[0] ?? 0), p[1] - (l[i]?.[1] ?? 0)), 0);
+            const line = lines.reduce((a, b) => (length(b) > length(a) ? b : a), lines[0] ?? []);
+            let rest = length(line) / 2;
+            for (let i = 1; i < line.length; i += 1) {
+                const [a, b] = [line[i - 1], line[i]];
+                if (!a || !b)
+                    continue;
+                const d = Math.hypot(b[0] - a[0], b[1] - a[1]);
+                if (d >= rest && d > 0) {
+                    return [[a[0] + ((b[0] - a[0]) * rest) / d, a[1] + ((b[1] - a[1]) * rest) / d, b[0] - a[0], b[1] - a[1]]];
+                }
+                rest -= d;
+            }
+            return line[0] ? [line[0]] : [];
+        }
+        case 'Polygon':
+        case 'MultiPolygon': {
+            const polygons = geometry.type === 'Polygon' ? [geometry.coordinates] : geometry.coordinates;
+            let best;
+            let bestArea = 0;
+            for (const p of polygons) {
+                const ring = p[0] ?? [];
+                let [a, cx, cy] = [0, 0, 0];
+                for (let i = 0; i + 1 < ring.length; i += 1) {
+                    const [x0, y0] = ring[i] ?? [0, 0];
+                    const [x1, y1] = ring[i + 1] ?? [0, 0];
+                    const cross = x0 * y1 - x1 * y0;
+                    a += cross;
+                    cx += (x0 + x1) * cross;
+                    cy += (y0 + y1) * cross;
+                }
+                if (Math.abs(a) > bestArea) {
+                    bestArea = Math.abs(a);
+                    best = [cx / (3 * a), cy / (3 * a)];
+                }
+            }
+            return best ? [best] : [];
+        }
+        case 'GeometryCollection':
+            return geometry.geometries.flatMap(points);
+    }
+}
+const MAX_LAT = 85.051128779806589;
+const merc = ([lon, lat]) => {
+    const phi = (Math.max(-MAX_LAT, Math.min(MAX_LAT, lat)) * Math.PI) / 180;
+    return [(lon + 180) / 360, 0.5 - Math.log(Math.tan(Math.PI / 4 + phi / 2)) / (2 * Math.PI)];
+};
+export class SymbolLayer extends Layer {
+    host;
+    style;
+    list;
+    /** Bumped by each change: a shaping that finished after a newer one began is dropped */
+    generation = 0;
+    labels;
+    /** @internal */
+    constructor(host, data, style) {
+        super(host);
+        this.host = host;
+        this.style = style;
+        this.list = featuresOf(data);
+    }
+    get features() {
+        return this.list;
+    }
+    setData(data) {
+        this.list = featuresOf(data);
+        void this.update();
+    }
+    setStyle(style) {
+        this.style = { ...this.style, ...style };
+        void this.update();
+    }
+    setFilter(filter) {
+        this.setStyle({ filter });
+    }
+    setVisible(visible) {
+        this.style = { ...this.style, visible };
+        this.sendLayer(this.map.engine, this.id);
+        this.map.requestRender();
+    }
+    /** Shapes the labels (loading their glyphs first) and sends them */
+    async update() {
+        const generation = ++this.generation;
+        const { text, font, filter } = this.style;
+        const parts = this.list.map((f, i) => {
+            if (filter && !filter(f.properties, i))
+                return [];
+            const t = evaluate(text, f.properties, i);
+            const own = evaluate(font, f.properties, i);
+            // Each run in its font, the feature's by default
+            return (typeof t === 'string' ? [{ text: t }] : t).map((p) => ({ ...p, font: p.font ?? own }));
+        });
+        const byFont = new Map();
+        for (const p of parts.flat()) {
+            const key = p.font ?? DEFAULT_FONT;
+            const set = byFont.get(key) ?? new Set();
+            for (const code of codes([p]))
+                set.add(code);
+            byFont.set(key, set);
+        }
+        const loaded = new Map();
+        await Promise.all([...byFont].map(async ([f, set]) => {
+            loaded.set(f, await this.host.glyphs.load(f, set));
+        }));
+        if (generation !== this.generation)
+            return;
+        this.labels = this.build(parts, loaded);
+        this.send(this.map.engine, this.id);
+        this.map.requestRender();
+    }
+    build(parts, loaded) {
+        const { font, size, anchor, offset, maxWidth, lineHeight, color, haloColor, haloWidth, overlap, placement } = this.style;
+        const anchorList = [];
+        const boxes = [];
+        const styles = [];
+        const quads = [];
+        const feature = [];
+        this.list.forEach((f, i) => {
+            const text = parts[i];
+            if (!text?.length || text.every((p) => !p.text))
+                return;
+            // Shaped at its largest size; the engine scales by the zoom stops
+            const s0 = evaluate(size, f.properties, i);
+            const shaped = typeof s0 === 'number' ? s0 : Math.max(...s0.map(([, v]) => v), 1);
+            const scale = typeof s0 === 'number' ? 1 : s0.map(([z, v]) => [z, v / shaped]);
+            const s = shape(text, (name) => loaded.get(name), {
+                font: evaluate(font, f.properties, i),
+                size: shaped,
+                maxWidth: evaluate(maxWidth, f.properties, i),
+                lineHeight: evaluate(lineHeight, f.properties, i),
+                anchor: evaluate(anchor, f.properties, i),
+                offset: evaluate(offset, f.properties, i),
+            });
+            if (!s.quads.length)
+                return;
+            const halo = evaluate(haloWidth, f.properties, i);
+            const fill = parseColor(evaluate(color, f.properties, i));
+            const haloRgba = parseColor(evaluate(haloColor, f.properties, i));
+            for (const { at, along } of anchors(f.geometry)) {
+                const label = feature.length;
+                feature.push(i);
+                const [x, y] = merc(at);
+                anchorList.push(x, y);
+                // Along the line: its direction in Mercator (y towards the south)
+                let direction = [0, 0];
+                if (placement === 'line' && along) {
+                    const [x1, y1] = merc([at[0] + along[0], at[1] + along[1]]);
+                    direction = [x1 - x, y1 - y];
+                }
+                // The collision box: the ink, with the halo and a little room
+                const pad = halo + 1;
+                boxes.push(s.box[0] - pad, s.box[1] - pad, s.box[2] + pad, s.box[3] + pad);
+                styles.push(...fill, ...haloRgba, halo, evaluate(overlap, f.properties, i) ? 1 : 0, ...direction, ...stops(scale));
+                for (const q of s.quads)
+                    quads.push(label, ...q);
+            }
+        });
+        return {
+            anchors: Float64Array.from(anchorList),
+            boxes: Float32Array.from(boxes),
+            styles: Float32Array.from(styles),
+            quads: Float32Array.from(quads),
+            feature,
+        };
+    }
+    send(engine, id) {
+        const l = this.labels;
+        if (l)
+            engine.setSymbols(id, l.anchors, l.boxes, l.styles, l.quads);
+        this.sendLayer(engine, id);
+    }
+    sendLayer(engine, id) {
+        const { opacity, minZoom, maxZoom, visible } = this.style;
+        // The sizes are per label; the layer's own scale stays 1
+        engine.setSymbolLayer(id, Float32Array.from(stops(1)), Float32Array.from(stops(opacity)), minZoom, maxZoom, visible);
+    }
+    /** @internal */
+    create(engine) {
+        const id = engine.addSymbols();
+        if (this.labels)
+            this.send(engine, id);
+        else {
+            this.sendLayer(engine, id);
+            // The first shaping, once the id is known
+            queueMicrotask(() => void this.update());
+        }
+        return id;
+    }
+}
+export function symbolStyle(options) {
+    const { data: _, before: __, ...rest } = options;
+    return {
+        opacity: 1,
+        minZoom: 0,
+        maxZoom: 24,
+        visible: true,
+        filter: undefined,
+        text: '',
+        font: DEFAULT_FONT,
+        size: 12,
+        color: '#000',
+        haloColor: '#fff',
+        haloWidth: 0,
+        anchor: 'center',
+        placement: 'point',
+        offset: [0, 0],
+        maxWidth: 10,
+        lineHeight: 1.2,
+        overlap: false,
+        ...rest,
+    };
+}
+//# sourceMappingURL=symbols.js.map

package/dist/symbols.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"symbols.js","sourceRoot":"","sources":["../src/symbols.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Text labels from GeoJSON: at points, at the middle of lines, at the center of polygons. Shaped on the page, placed by\n * the engine every frame with collisions shared by all symbol layers (the top layer first, each layer in data order),\n * drawn with a halo, standing on the relief.\n */\nimport {\n  evaluate,\n  type Feature,\n  type FeatureData,\n  type FeatureLayerStyle,\n  featuresOf,\n  type Geometry,\n  type Placement,\n  type Position,\n  type Properties,\n  parseColor,\n  type Size,\n  type Styled,\n  stops,\n} from './features.ts';\nimport { codes, DEFAULT_FONT, type Glyph, type Glyphs, shape, type TextPart } from './glyphs.ts';\nimport { Layer } from './layers.ts';\nimport type { Anchor } from './overlay.ts';\nimport type { LayerHost } from './types.ts';\nimport type { Engine } from './wasm/isard.js';\n\nexport interface SymbolStyle<P = Properties> extends Omit<FeatureLayerStyle<P>, 'ramp'> {\n  /** The text: a string (`\\n` breaks lines) or runs with their own scale and font; empty: no label */\n  text: Styled<string | TextPart[], P>;\n  /** A font of the map's glyphs (default `Noto Sans Regular`; also Bold and Italic with the default glyphs) */\n  font: Styled<string, P>;\n  /** CSS pixels, or zoom stops (default 12) */\n  size: Styled<Size, P>;\n  /** `'point'` (default): horizontal text; `'line'`: along the line at its middle, kept upright */\n  placement: 'point' | 'line';\n  color: Styled<string, P>;\n  haloColor: Styled<string, P>;\n  /** CSS pixels (default 0) */\n  haloWidth: Styled<number, P>;\n  /** Side of the text at the anchor (default `'center'`) */\n  anchor: Styled<Anchor, P>;\n  /** Shift, ems (default [0, 0]) */\n  offset: Styled<[x: number, y: number], P>;\n  /** Wrapping width, ems (default 10) */\n  maxWidth: Styled<number, P>;\n  /** Ems (default 1.2) */\n  lineHeight: Styled<number, P>;\n  /** Shown even where it overlaps other labels, and hiding none (MapLibre's allow-overlap and ignore-placement)\n   * (default false) */\n  overlap: Styled<boolean, P>;\n}\n\nexport interface SymbolOptions<P = Properties> extends Partial<SymbolStyle<P>>, Placement {\n  data: FeatureData<P>;\n}\n\n/** Where a geometry is labelled: its points, the middle of its longest line (with the direction of the line there),\n * the centroid of its largest polygon */\nfunction anchors(geometry: Geometry | null): { at: Position; along?: [number, number] }[] {\n  return points(geometry).map((p) => (p.length > 2 ? { at: [p[0], p[1]], along: [p[2] ?? 0, p[3] ?? 0] } : { at: p }));\n}\n\n/** Anchors as positions, a line's carrying the direction (lon, lat, dlon, dlat) */\nfunction points(geometry: Geometry | null): Position[] {\n  if (!geometry) return [];\n  switch (geometry.type) {\n    case 'Point':\n      return [geometry.coordinates];\n    case 'MultiPoint':\n      return geometry.coordinates;\n    case 'LineString':\n    case 'MultiLineString': {\n      const lines = geometry.type === 'LineString' ? [geometry.coordinates] : geometry.coordinates;\n      const length = (l: Position[]) =>\n        l.slice(1).reduce((s, p, i) => s + Math.hypot(p[0] - (l[i]?.[0] ?? 0), p[1] - (l[i]?.[1] ?? 0)), 0);\n      const line = lines.reduce((a, b) => (length(b) > length(a) ? b : a), lines[0] ?? []);\n      let rest = length(line) / 2;\n      for (let i = 1; i < line.length; i += 1) {\n        const [a, b] = [line[i - 1], line[i]];\n        if (!a || !b) continue;\n        const d = Math.hypot(b[0] - a[0], b[1] - a[1]);\n        if (d >= rest && d > 0) {\n          return [[a[0] + ((b[0] - a[0]) * rest) / d, a[1] + ((b[1] - a[1]) * rest) / d, b[0] - a[0], b[1] - a[1]]];\n        }\n        rest -= d;\n      }\n      return line[0] ? [line[0]] : [];\n    }\n    case 'Polygon':\n    case 'MultiPolygon': {\n      const polygons = geometry.type === 'Polygon' ? [geometry.coordinates] : geometry.coordinates;\n      let best: Position | undefined;\n      let bestArea = 0;\n      for (const p of polygons) {\n        const ring = p[0] ?? [];\n        let [a, cx, cy] = [0, 0, 0];\n        for (let i = 0; i + 1 < ring.length; i += 1) {\n          const [x0, y0] = ring[i] ?? [0, 0];\n          const [x1, y1] = ring[i + 1] ?? [0, 0];\n          const cross = x0 * y1 - x1 * y0;\n          a += cross;\n          cx += (x0 + x1) * cross;\n          cy += (y0 + y1) * cross;\n        }\n        if (Math.abs(a) > bestArea) {\n          bestArea = Math.abs(a);\n          best = [cx / (3 * a), cy / (3 * a)];\n        }\n      }\n      return best ? [best] : [];\n    }\n    case 'GeometryCollection':\n      return geometry.geometries.flatMap(points);\n  }\n}\n\nconst MAX_LAT = 85.051128779806589;\nconst merc = ([lon, lat]: Position): [number, number] => {\n  const phi = (Math.max(-MAX_LAT, Math.min(MAX_LAT, lat)) * Math.PI) / 180;\n  return [(lon + 180) / 360, 0.5 - Math.log(Math.tan(Math.PI / 4 + phi / 2)) / (2 * Math.PI)];\n};\n\n/** The map's glyphs, for a layer */\nexport interface GlyphHost extends LayerHost {\n  readonly glyphs: Glyphs;\n}\n\nexport class SymbolLayer<P = Properties> extends Layer {\n  private list: Feature<P>[];\n  /** Bumped by each change: a shaping that finished after a newer one began is dropped */\n  private generation = 0;\n  private labels:\n    | { anchors: Float64Array; boxes: Float32Array; styles: Float32Array; quads: Float32Array; feature: number[] }\n    | undefined;\n\n  /** @internal */\n  constructor(\n    private readonly host: GlyphHost,\n    data: FeatureData<P>,\n    private style: SymbolStyle<P>,\n  ) {\n    super(host);\n    this.list = featuresOf(data);\n  }\n\n  get features(): readonly Feature<P>[] {\n    return this.list;\n  }\n\n  setData(data: FeatureData<P>): void {\n    this.list = featuresOf(data);\n    void this.update();\n  }\n\n  setStyle(style: Partial<SymbolStyle<P>>): void {\n    this.style = { ...this.style, ...style };\n    void this.update();\n  }\n\n  setFilter(filter: ((properties: P, index: number) => boolean) | undefined): void {\n    this.setStyle({ filter } as Partial<SymbolStyle<P>>);\n  }\n\n  setVisible(visible: boolean): void {\n    this.style = { ...this.style, visible };\n    this.sendLayer(this.map.engine, this.id);\n    this.map.requestRender();\n  }\n\n  /** Shapes the labels (loading their glyphs first) and sends them */\n  private async update(): Promise<void> {\n    const generation = ++this.generation;\n    const { text, font, filter } = this.style;\n    const parts = this.list.map((f, i): TextPart[] => {\n      if (filter && !filter(f.properties, i)) return [];\n      const t = evaluate(text, f.properties, i);\n      const own = evaluate(font, f.properties, i);\n      // Each run in its font, the feature's by default\n      return (typeof t === 'string' ? [{ text: t }] : t).map((p) => ({ ...p, font: p.font ?? own }));\n    });\n    const byFont = new Map<string, Set<number>>();\n    for (const p of parts.flat()) {\n      const key = p.font ?? DEFAULT_FONT;\n      const set = byFont.get(key) ?? new Set<number>();\n      for (const code of codes([p])) set.add(code);\n      byFont.set(key, set);\n    }\n    const loaded = new Map<string, Map<number, Glyph>>();\n    await Promise.all(\n      [...byFont].map(async ([f, set]) => {\n        loaded.set(f, await this.host.glyphs.load(f, set));\n      }),\n    );\n    if (generation !== this.generation) return;\n    this.labels = this.build(parts, loaded);\n    this.send(this.map.engine, this.id);\n    this.map.requestRender();\n  }\n\n  private build(parts: TextPart[][], loaded: Map<string, Map<number, Glyph>>) {\n    const { font, size, anchor, offset, maxWidth, lineHeight, color, haloColor, haloWidth, overlap, placement } =\n      this.style;\n    const anchorList: number[] = [];\n    const boxes: number[] = [];\n    const styles: number[] = [];\n    const quads: number[] = [];\n    const feature: number[] = [];\n    this.list.forEach((f, i) => {\n      const text = parts[i];\n      if (!text?.length || text.every((p) => !p.text)) return;\n      // Shaped at its largest size; the engine scales by the zoom stops\n      const s0 = evaluate(size, f.properties, i);\n      const shaped = typeof s0 === 'number' ? s0 : Math.max(...s0.map(([, v]) => v), 1);\n      const scale: Size = typeof s0 === 'number' ? 1 : s0.map(([z, v]): [number, number] => [z, v / shaped]);\n      const s = shape(text, (name) => loaded.get(name), {\n        font: evaluate(font, f.properties, i),\n        size: shaped,\n        maxWidth: evaluate(maxWidth, f.properties, i),\n        lineHeight: evaluate(lineHeight, f.properties, i),\n        anchor: evaluate(anchor, f.properties, i),\n        offset: evaluate(offset, f.properties, i),\n      });\n      if (!s.quads.length) return;\n      const halo = evaluate(haloWidth, f.properties, i);\n      const fill = parseColor(evaluate(color, f.properties, i));\n      const haloRgba = parseColor(evaluate(haloColor, f.properties, i));\n      for (const { at, along } of anchors(f.geometry)) {\n        const label = feature.length;\n        feature.push(i);\n        const [x, y] = merc(at);\n        anchorList.push(x, y);\n        // Along the line: its direction in Mercator (y towards the south)\n        let direction: [number, number] = [0, 0];\n        if (placement === 'line' && along) {\n          const [x1, y1] = merc([at[0] + along[0], at[1] + along[1]]);\n          direction = [x1 - x, y1 - y];\n        }\n        // The collision box: the ink, with the halo and a little room\n        const pad = halo + 1;\n        boxes.push(s.box[0] - pad, s.box[1] - pad, s.box[2] + pad, s.box[3] + pad);\n        styles.push(\n          ...fill,\n          ...haloRgba,\n          halo,\n          evaluate(overlap, f.properties, i) ? 1 : 0,\n          ...direction,\n          ...stops(scale),\n        );\n        for (const q of s.quads) quads.push(label, ...q);\n      }\n    });\n    return {\n      anchors: Float64Array.from(anchorList),\n      boxes: Float32Array.from(boxes),\n      styles: Float32Array.from(styles),\n      quads: Float32Array.from(quads),\n      feature,\n    };\n  }\n\n  private send(engine: Engine, id: number): void {\n    const l = this.labels;\n    if (l) engine.setSymbols(id, l.anchors, l.boxes, l.styles, l.quads);\n    this.sendLayer(engine, id);\n  }\n\n  private sendLayer(engine: Engine, id: number): void {\n    const { opacity, minZoom, maxZoom, visible } = this.style;\n    // The sizes are per label; the layer's own scale stays 1\n    engine.setSymbolLayer(\n      id,\n      Float32Array.from(stops(1)),\n      Float32Array.from(stops(opacity)),\n      minZoom,\n      maxZoom,\n      visible,\n    );\n  }\n\n  /** @internal */\n  protected create(engine: Engine): number {\n    const id = engine.addSymbols();\n    if (this.labels) this.send(engine, id);\n    else {\n      this.sendLayer(engine, id);\n      // The first shaping, once the id is known\n      queueMicrotask(() => void this.update());\n    }\n    return id;\n  }\n}\n\nexport function symbolStyle<P>(options: SymbolOptions<P>): SymbolStyle<P> {\n  const { data: _, before: __, ...rest } = options;\n  return {\n    opacity: 1,\n    minZoom: 0,\n    maxZoom: 24,\n    visible: true,\n    filter: undefined,\n    text: '',\n    font: DEFAULT_FONT,\n    size: 12,\n    color: '#000',\n    haloColor: '#fff',\n    haloWidth: 0,\n    anchor: 'center',\n    placement: 'point',\n    offset: [0, 0],\n    maxWidth: 10,\n    lineHeight: 1.2,\n    overlap: false,\n    ...rest,\n  };\n}\n"]}

package/dist/terrain.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Altitudes encoded in the colors of PNG tiles, decoded in the page for the relief: Terrarium (Mapzen, the Terrain
+ * Tiles of AWS) and Terrain-RGB (Mapbox, MapTiler). The engine reads raw floats only; a loader gives it the altitudes
+ * of each tile.
+ */
+import type { TerrainEncoding } from './types.ts';
+/** Altitudes (metres, rows from the north) of RGBA pixels in an encoding; below `floor` raised to it */
+export declare function decodeHeights(rgba: Uint8ClampedArray | Uint8Array, encoding: Exclude<TerrainEncoding, 'float32'>, floor?: number): Float32Array;
+/**
+ * A loader of the engine's relief for PNG tiles of `url` ({z}, {x}, {y}) in an encoding: 256 × 256 altitudes, null
+ * where the server has no tile; a network or server error rejects (retried). `floor`: the lowest altitude kept (the
+ * sea floor of a worldwide model flattened at sea level)
+ */
+export declare function encodedTerrainLoader(url: string, encoding: Exclude<TerrainEncoding, 'float32'>, floor?: number): (z: number, x: number, y: number, signal: AbortSignal) => Promise<Float32Array | null>;

package/dist/terrain.js

@@ -0,0 +1,56 @@
+const SIZE = 256;
+/** Altitudes (metres, rows from the north) of RGBA pixels in an encoding; below `floor` raised to it */
+export function decodeHeights(rgba, encoding, floor = Number.NEGATIVE_INFINITY) {
+    const n = rgba.length >> 2;
+    const out = new Float32Array(n);
+    // A loop per encoding, without allocations: 65 536 pixels a tile
+    if (encoding === 'terrarium') {
+        for (let i = 0, j = 0; i < n; i += 1, j += 4) {
+            const h = rgba[j] * 256 + rgba[j + 1] + rgba[j + 2] / 256 - 32768;
+            out[i] = h > floor ? h : floor;
+        }
+    }
+    else {
+        for (let i = 0, j = 0; i < n; i += 1, j += 4) {
+            const h = -10000 + (rgba[j] * 65536 + rgba[j + 1] * 256 + rgba[j + 2]) * 0.1;
+            out[i] = h > floor ? h : floor;
+        }
+    }
+    return out;
+}
+/**
+ * A loader of the engine's relief for PNG tiles of `url` ({z}, {x}, {y}) in an encoding: 256 × 256 altitudes, null
+ * where the server has no tile; a network or server error rejects (retried). `floor`: the lowest altitude kept (the
+ * sea floor of a worldwide model flattened at sea level)
+ */
+export function encodedTerrainLoader(url, encoding, floor) {
+    let canvas;
+    return async (z, x, y, signal) => {
+        const tile = url.replaceAll('{z}', String(z)).replaceAll('{x}', String(x)).replaceAll('{y}', String(y));
+        const response = await fetch(tile, { signal });
+        if (response.status === 404 || response.status === 204 || response.status === 410)
+            return null;
+        if (!response.ok)
+            throw new Error(`${response.url}: ${response.status}`);
+        // The colors as stored: no color management, no premultiplied alpha
+        const bitmap = await createImageBitmap(await response.blob(), {
+            premultiplyAlpha: 'none',
+            colorSpaceConversion: 'none',
+        });
+        try {
+            canvas ??= new OffscreenCanvas(SIZE, SIZE);
+            const g = canvas.getContext('2d', { willReadFrequently: true });
+            if (!g)
+                throw new Error('no 2D context');
+            // Another size is resampled to the nearest pixel: an interpolated color is no altitude
+            g.imageSmoothingEnabled = false;
+            g.clearRect(0, 0, SIZE, SIZE);
+            g.drawImage(bitmap, 0, 0, SIZE, SIZE);
+            return decodeHeights(g.getImageData(0, 0, SIZE, SIZE).data, encoding, floor);
+        }
+        finally {
+            bitmap.close();
+        }
+    };
+}
+//# sourceMappingURL=terrain.js.map

package/dist/terrain.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"terrain.js","sourceRoot":"","sources":["../src/terrain.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Altitudes encoded in the colors of PNG tiles, decoded in the page for the relief: Terrarium (Mapzen, the Terrain\n * Tiles of AWS) and Terrain-RGB (Mapbox, MapTiler). The engine reads raw floats only; a loader gives it the altitudes\n * of each tile.\n */\nimport type { TerrainEncoding } from './types.ts';\n\nconst SIZE = 256;\n\n/** Altitudes (metres, rows from the north) of RGBA pixels in an encoding; below `floor` raised to it */\nexport function decodeHeights(\n  rgba: Uint8ClampedArray | Uint8Array,\n  encoding: Exclude<TerrainEncoding, 'float32'>,\n  floor = Number.NEGATIVE_INFINITY,\n): Float32Array {\n  const n = rgba.length >> 2;\n  const out = new Float32Array(n);\n  // A loop per encoding, without allocations: 65 536 pixels a tile\n  if (encoding === 'terrarium') {\n    for (let i = 0, j = 0; i < n; i += 1, j += 4) {\n      const h = (rgba[j] as number) * 256 + (rgba[j + 1] as number) + (rgba[j + 2] as number) / 256 - 32768;\n      out[i] = h > floor ? h : floor;\n    }\n  } else {\n    for (let i = 0, j = 0; i < n; i += 1, j += 4) {\n      const h = -10000 + ((rgba[j] as number) * 65536 + (rgba[j + 1] as number) * 256 + (rgba[j + 2] as number)) * 0.1;\n      out[i] = h > floor ? h : floor;\n    }\n  }\n  return out;\n}\n\n/**\n * A loader of the engine's relief for PNG tiles of `url` ({z}, {x}, {y}) in an encoding: 256 × 256 altitudes, null\n * where the server has no tile; a network or server error rejects (retried). `floor`: the lowest altitude kept (the\n * sea floor of a worldwide model flattened at sea level)\n */\nexport function encodedTerrainLoader(\n  url: string,\n  encoding: Exclude<TerrainEncoding, 'float32'>,\n  floor?: number,\n): (z: number, x: number, y: number, signal: AbortSignal) => Promise<Float32Array | null> {\n  let canvas: OffscreenCanvas | undefined;\n  return async (z, x, y, signal) => {\n    const tile = url.replaceAll('{z}', String(z)).replaceAll('{x}', String(x)).replaceAll('{y}', String(y));\n    const response = await fetch(tile, { signal });\n    if (response.status === 404 || response.status === 204 || response.status === 410) return null;\n    if (!response.ok) throw new Error(`${response.url}: ${response.status}`);\n    // The colors as stored: no color management, no premultiplied alpha\n    const bitmap = await createImageBitmap(await response.blob(), {\n      premultiplyAlpha: 'none',\n      colorSpaceConversion: 'none',\n    });\n    try {\n      canvas ??= new OffscreenCanvas(SIZE, SIZE);\n      const g = canvas.getContext('2d', { willReadFrequently: true });\n      if (!g) throw new Error('no 2D context');\n      // Another size is resampled to the nearest pixel: an interpolated color is no altitude\n      g.imageSmoothingEnabled = false;\n      g.clearRect(0, 0, SIZE, SIZE);\n      g.drawImage(bitmap, 0, 0, SIZE, SIZE);\n      return decodeHeights(g.getImageData(0, 0, SIZE, SIZE).data, encoding, floor);\n    } finally {\n      bitmap.close();\n    }\n  };\n}\n"]}