@react-x11/components 0.9.0 → 0.11.0

package/src/maps/icons.ts

@@ -0,0 +1,183 @@
+// Icons: the pictogram a symbol layer can set beside a point's name — the
+// bus on a bus stop, so that "Lyons Ave/Yuille St" reads as a stop and not
+// as a street.
+//
+// An icon is two pieces, each one colour: a rounded **plate** in the layer's
+// colour and a **glyph** over it, white by default. Two single-colour pieces
+// rather than one picture because that is what both renderers already draw
+// text as: the retained renderer fills a path, and the GL renderer keeps a
+// coverage raster in its label atlas and colours it in the shader — so an
+// icon is two more of those, and one raster serves every palette.
+//
+// Both renderers trace the same paths from here, the way both take their
+// label anchors from `./anchors.ts`: a map switched from one renderer to the
+// other draws the same bus.
+
+/** The pictograms a symbol layer can name. */
+export type MapIcon = 'bus' | 'tram' | 'train' | 'ferry' | 'airport';
+
+/** Every {@link MapIcon}, for a style editor's picker. */
+export const MAP_ICONS: readonly MapIcon[] = [
+  'bus',
+  'tram',
+  'train',
+  'ferry',
+  'airport',
+];
+
+/** Logical pixels across a plate, where the layer does not say. */
+export const DEFAULT_ICON_SIZE = 14;
+export const DEFAULT_ICON_COLOR = '#2a6fb8';
+export const DEFAULT_ICON_GLYPH_COLOR = '#ffffff';
+/** Logical pixels between an icon's plate and the name set beside it. */
+export const ICON_GAP = 3;
+
+/** The slice of a 2D context an icon is traced with — `MapCanvas`'s, and
+ *  the offscreen surface's the GL atlas rasterizes on. */
+export interface IconPathContext {
+  beginPath(): void;
+  moveTo(x: number, y: number): void;
+  lineTo(x: number, y: number): void;
+  arc(x: number, y: number, r: number, from: number, to: number): void;
+  closePath(): void;
+}
+
+/** The grid a glyph is drawn on: a plate is this many units across. */
+const GRID = 16;
+
+/**
+ * Each glyph as polygons on the {@link GRID}, `[x0, y0, x1, y1, …]`.
+ *
+ * Solid shapes only, and a window is where no shape is: a glyph is filled
+ * with the non-zero rule, where a hole would take a second winding, and
+ * {@link wound} turns every polygon the same way so that two that touch
+ * fill as one rather than cancelling.
+ */
+const GLYPHS: Record<MapIcon, readonly (readonly number[])[]> = {
+  // Head on: a roof, the windscreen between two pillars, the lower panel,
+  // wheels and mirrors.
+  bus: [
+    [4, 3.5, 5, 2.5, 11, 2.5, 12, 3.5, 12, 4.6, 4, 4.6],
+    rect(4, 4.6, 1.2, 4),
+    rect(10.8, 4.6, 1.2, 4),
+    rect(4, 8.6, 8, 3.6),
+    rect(4.6, 12.2, 2, 1.4),
+    rect(9.4, 12.2, 2, 1.4),
+    rect(2.9, 5, 0.8, 2),
+    rect(12.3, 5, 0.8, 2),
+  ],
+  // A car under its pantograph, on rails.
+  tram: [
+    rect(5.4, 1.4, 5.2, 0.8),
+    rect(7.6, 2.2, 0.8, 1.4),
+    [4.5, 4.6, 5.5, 3.6, 10.5, 3.6, 11.5, 4.6, 11.5, 5.4, 4.5, 5.4],
+    rect(4.5, 5.4, 1.1, 3.6),
+    rect(10.4, 5.4, 1.1, 3.6),
+    rect(4.5, 9, 7, 3),
+    [5.6, 12, 6.9, 12, 5.8, 14.2, 4.5, 14.2],
+    [9.1, 12, 10.4, 12, 11.5, 14.2, 10.2, 14.2],
+  ],
+  // A locomotive's rounded nose, with its rails splayed wider than a tram's.
+  train: [
+    [4, 5, 4.6, 3, 6, 2.2, 10, 2.2, 11.4, 3, 12, 5, 12, 5.6, 4, 5.6],
+    rect(4, 5.6, 1.2, 3),
+    rect(10.8, 5.6, 1.2, 3),
+    rect(4, 8.6, 8, 3),
+    [5, 11.6, 6.4, 11.6, 4.8, 14.2, 3.4, 14.2],
+    [9.6, 11.6, 11, 11.6, 12.6, 14.2, 11.2, 14.2],
+  ],
+  // Side on: a hull, a deckhouse, a funnel.
+  ferry: [
+    [2, 9, 14, 9, 12.2, 12.6, 3.8, 12.6],
+    rect(4.4, 6, 6.8, 3),
+    rect(6.2, 3.6, 2.2, 2.4),
+  ],
+  // An aircraft from above, nose up.
+  airport: [
+    [
+      8, 1.8, 8.9, 2.8, 8.9, 6.6, 14, 9.6, 14, 10.8, 8.9, 9.3, 8.9, 12.3, 10.6,
+      13.6, 10.6, 14.4, 8, 13.7, 5.4, 14.4, 5.4, 13.6, 7.1, 12.3, 7.1, 9.3, 2,
+      10.8, 2, 9.6, 7.1, 6.6, 7.1, 2.8,
+    ],
+  ],
+};
+
+function rect(x: number, y: number, w: number, h: number): number[] {
+  return [x, y, x + w, y, x + w, y + h, x, y + h];
+}
+
+/** The polygon wound clockwise on screen (y down) — positive shoelace
+ *  area — whichever way it was written. */
+function wound(points: readonly number[]): readonly number[] {
+  let area = 0;
+  const n = points.length / 2;
+  for (let i = 0; i < n; i++) {
+    const j = (i + 1) % n;
+    area +=
+      points[i * 2] * points[j * 2 + 1] - points[j * 2] * points[i * 2 + 1];
+  }
+  if (area >= 0) return points;
+  const out: number[] = [];
+  for (let i = n - 1; i >= 0; i--) out.push(points[i * 2], points[i * 2 + 1]);
+  return out;
+}
+
+const WOUND = {} as Record<MapIcon, readonly (readonly number[])[]>;
+for (const name of MAP_ICONS) WOUND[name] = GLYPHS[name].map(wound);
+
+/** Whether `name` is an icon this module draws — a style is data, and may
+ *  come from a file that names one this version does not have. */
+export function isMapIcon(name: unknown): name is MapIcon {
+  return (
+    typeof name === 'string' &&
+    Object.prototype.hasOwnProperty.call(GLYPHS, name)
+  );
+}
+
+/**
+ * Trace a plate `size` across, centred on `cx, cy`: a square with corners
+ * rounded by a fifth of it. Adds to the current path; the caller begins it
+ * and fills it.
+ */
+export function tracePlate(
+  ctx: IconPathContext,
+  cx: number,
+  cy: number,
+  size: number,
+): void {
+  const x = cx - size / 2;
+  const y = cy - size / 2;
+  const r = size * 0.2;
+  const e = size - r;
+  ctx.moveTo(x + r, y);
+  ctx.lineTo(x + e, y);
+  ctx.arc(x + e, y + r, r, -Math.PI / 2, 0);
+  ctx.lineTo(x + size, y + e);
+  ctx.arc(x + e, y + e, r, 0, Math.PI / 2);
+  ctx.lineTo(x + r, y + size);
+  ctx.arc(x + r, y + e, r, Math.PI / 2, Math.PI);
+  ctx.lineTo(x, y + r);
+  ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
+  ctx.closePath();
+}
+
+/** Trace `icon`'s glyph over a plate `size` across, centred on `cx, cy`.
+ *  Adds to the current path, as {@link tracePlate} does. */
+export function traceGlyph(
+  ctx: IconPathContext,
+  icon: MapIcon,
+  cx: number,
+  cy: number,
+  size: number,
+): void {
+  const unit = size / GRID;
+  const x = cx - size / 2;
+  const y = cy - size / 2;
+  for (const shape of WOUND[icon]) {
+    ctx.moveTo(x + shape[0] * unit, y + shape[1] * unit);
+    for (let i = 2; i < shape.length; i += 2) {
+      ctx.lineTo(x + shape[i] * unit, y + shape[i + 1] * unit);
+    }
+    ctx.closePath();
+  }
+}

package/src/maps/index.ts

@@ -171,6 +171,7 @@ const NOT_FOR_THE_ELEMENT: readonly string[] = [
   'buildWorkers',
   'antialias',
   'fillRule',
+  'labelsWhileMoving',
   'onAfterDraw',
 ];
 
@@ -426,6 +427,8 @@ export {
 
 export { compileFilter, resolveZoomed } from './style.js';
 
+export { MAP_ICONS } from './icons.js';
+
 export {
   decodePolyline,
   geoJsonOverlays,
@@ -479,6 +482,7 @@ export type {
   SymbolLayer,
   Zoomed,
 } from './style.js';
+export type { MapIcon } from './icons.js';
 export type {
   MapPalette,
   OpenMapTilesStyleOptions,

package/src/maps/labels.ts

@@ -36,6 +36,16 @@ import type { GlLabelData } from './anchors.js';
 import type { MapCanvas } from './paint.js';
 import type { VectorTile } from './mvt.js';
 import type { PreparedStyle, PreparedLayer } from './paint.js';
+import {
+  DEFAULT_ICON_COLOR,
+  DEFAULT_ICON_GLYPH_COLOR,
+  DEFAULT_ICON_SIZE,
+  ICON_GAP,
+  isMapIcon,
+  traceGlyph,
+  tracePlate,
+} from './icons.js';
+import type { MapIcon } from './icons.js';
 import { resolveZoomed } from './style.js';
 import type { MapStyleLayer, SymbolLayer, Zoomed } from './style.js';
 import type { TileId, Transform } from './proj.js';
@@ -105,17 +115,32 @@ export interface LabelCandidate {
   haloWidth: number;
   /** Pixels within which this text may not repeat. */
   repeat: number;
+  /** The icon on the point, where the layer sets one — absent, or null, for
+   *  a label that is text alone and for every name along a street. */
+  icon?: LabelIcon | null;
+}
+
+/** A point label's icon at a zoom: logical pixels across, and colours. */
+export interface LabelIcon {
+  name: MapIcon;
+  size: number;
+  color: string;
+  glyph: string;
 }
 
 /** A candidate that won its place, with the box it occupies in world
- *  pixels at the zoom it was placed for — its turned text's bounding box. */
+ *  pixels at the zoom it was placed for — its turned text's bounding box.
+ *  Not shaped: the placement covers every tile loaded, most of it outside
+ *  the pane, and a label is shaped when it is first drawn. */
 export interface PlacedLabel extends LabelCandidate {
   /** World pixels: `mercator × worldSize`. */
   wx: number;
   wy: number;
   width: number;
   height: number;
-  shaped: ShapedLabel;
+  /** How far right of the anchor the box's centre is, in world pixels: half
+   *  the icon and the gap, for a name set beside an icon; 0 otherwise. */
+  ox?: number;
 }
 
 function num<T extends number>(
@@ -141,10 +166,14 @@ const anchorCache = new WeakMap<
   { prepared: PreparedStyle; data: GlLabelData }
 >();
 
-function anchorsOf(tile: VectorTile, prepared: PreparedStyle): GlLabelData {
+function anchorsOf(
+  tile: VectorTile,
+  prepared: PreparedStyle,
+  id: TileId,
+): GlLabelData {
   const hit = anchorCache.get(tile);
   if (hit && hit.prepared === prepared) return hit.data;
-  const data = buildTileLabels(tile, prepared, EXTENT);
+  const data = buildTileLabels(tile, prepared, EXTENT, id);
   anchorCache.set(tile, { prepared, data });
   return data;
 }
@@ -158,6 +187,7 @@ interface LayerPaint {
   haloWidth: number;
   rank: number;
   repeat: number;
+  icon: LabelIcon | null;
 }
 
 function paintAt(
@@ -180,6 +210,18 @@ function paintAt(
     haloWidth: num(symbol.textHaloWidth, zoom, 1),
     rank: symbol.rank ?? 0,
     repeat: symbol.repeatDistance ?? 250,
+    icon: isMapIcon(symbol.icon)
+      ? {
+          name: symbol.icon,
+          size: num(symbol.iconSize, zoom, DEFAULT_ICON_SIZE),
+          color: symbol.iconColor
+            ? resolveZoomed(symbol.iconColor, zoom)
+            : DEFAULT_ICON_COLOR,
+          glyph: symbol.iconGlyphColor
+            ? resolveZoomed(symbol.iconGlyphColor, zoom)
+            : DEFAULT_ICON_GLYPH_COLOR,
+        }
+      : null,
   };
 }
 
@@ -197,7 +239,7 @@ export function collectLabels(
   zoom: number,
 ): LabelCandidate[] {
   const out: LabelCandidate[] = [];
-  const data = anchorsOf(tile, prepared);
+  const data = anchorsOf(tile, prepared, id);
   const n = tileCountAt(id.z);
   const key = tileKey(id);
   // Tile units to normalized mercator.
@@ -235,14 +277,85 @@ export function collectLabels(
       halo: paint.halo,
       haloWidth: paint.haloWidth,
       repeat: paint.repeat,
+      icon: point ? paint.icon : null,
     });
   }
   return out;
 }
 
-/** Cache of shaped strings, owned by the element. */
+/** What a string measures, in logical pixels — all placement needs of it. */
+interface LabelMetrics {
+  width: number;
+  height: number;
+}
+
+/**
+ * A cache bounded in **two generations** rather than by clearing: what was
+ * stored since the last turn is the young one, a lookup that finds an entry
+ * in the old one brings it back, and a full young generation becomes the
+ * old one as the old one is dropped. So what is in use survives the turn,
+ * and the bound is twice a generation.
+ */
+class Generations<V> {
+  private _young = new Map<string, V>();
+  private _old = new Map<string, V>();
+  constructor(private readonly _size: number) {}
+
+  get(key: string): V | undefined {
+    const hit = this._young.get(key);
+    if (hit !== undefined) return hit;
+    const kept = this._old.get(key);
+    if (kept !== undefined) this.set(key, kept);
+    return kept;
+  }
+
+  set(key: string, value: V): void {
+    if (this._young.size >= this._size) {
+      this._old = this._young;
+      this._young = new Map();
+    }
+    this._young.set(key, value);
+  }
+
+  clear(): void {
+    this._young = new Map();
+    this._old = new Map();
+  }
+}
+
+/** Shaped strings a generation holds. Each is a layout the text engine
+ *  keeps — a native one under CoreText — so this is the bound that
+ *  matters, and it is the one the cache always had. */
+const SHAPED_GENERATION = 2000;
+/** Measurements a generation holds: two numbers each, so many more of
+ *  them, enough for every label of a zoom across the levels. */
+const MEASURED_GENERATION = 8000;
+
+/**
+ * Cache of shaped strings, owned by the element — and of what they
+ * measure, which is kept apart and far longer.
+ *
+ * Placement asks the size of every candidate on the map, most of which
+ * are never drawn, and it asks again at every step of a zoom; drawing
+ * needs the layouts of the few hundred that won their place. With one
+ * cache for both, bounded by clearing it, a wheel zoom through six levels —
+ * some 8,000 strings, every label of every level at its own size and in
+ * its halo's colour — crossed the bound every few hundred milliseconds and
+ * threw away what the next placement needed: 43,000 strings shaped in four
+ * seconds, the worst frames of the zoom spent on text it had shaped
+ * already. Measurements now outlive the layouts they were read from, and
+ * both caches turn over in generations (`Generations`).
+ */
 export class LabelShaper {
-  private readonly _cache = new Map<string, ShapedLabel>();
+  private readonly _shaped = new Generations<ShapedLabel>(SHAPED_GENERATION);
+  private readonly _measured = new Generations<LabelMetrics>(
+    MEASURED_GENERATION,
+  );
+  /** What each placed label was drawn with, text and halo: kept with the
+   *  placement, so a pan's frames, which draw one placement over and over,
+   *  look nothing up. */
+  private _drawn = new WeakMap<PlacedLabel, ShapedLabel>();
+  private _haloed = new WeakMap<PlacedLabel, ShapedLabel>();
   private _fonts: FontsLike | null;
   private _family: string;
   /** Device pixels per logical pixel. Text is shaped at the device size the
@@ -269,7 +382,41 @@ export class LabelShaper {
     this._fonts = fonts;
     this._family = family;
     this._scale = scale;
-    this._cache.clear();
+    this._shaped.clear();
+    this._measured.clear();
+    this._drawn = new WeakMap();
+    this._haloed = new WeakMap();
+  }
+
+  /** The layout a placed label's text is drawn with — or, with `halo`, its
+   *  halo's — or null on a backend with no font manager. */
+  drawn(label: PlacedLabel, halo = false): ShapedLabel | null {
+    const kept = halo ? this._haloed : this._drawn;
+    const hit = kept.get(label);
+    if (hit) return hit;
+    const color = halo ? label.halo : label.color;
+    if (color === undefined) return null;
+    const shaped = this.shape(label.text, label.size, color);
+    if (shaped) kept.set(label, shaped);
+    return shaped;
+  }
+
+  /** What one label measures, logical pixels, or null on a backend with no
+   *  font manager — shaped only when it has never been measured. A string
+   *  measures the same in any colour, so a name and its halo share it.
+   *
+   *  The layout it was measured from is not kept: most candidates never
+   *  win a place, and theirs would push the layouts of the ones that did
+   *  out of the cache drawing reads from. */
+  measure(text: string, size: number, color: string): LabelMetrics | null {
+    const key = `${this._family}|${size}|${text}`;
+    const hit = this._measured.get(key);
+    if (hit) return hit;
+    const shaped = this._shapeNow(text, size, color);
+    if (!shaped) return null;
+    const metrics = { width: shaped.width, height: shaped.height };
+    this._measured.set(key, metrics);
+    return metrics;
   }
 
   /** Shape one label, or null on a backend with no font manager. Widths
@@ -278,13 +425,20 @@ export class LabelShaper {
     const fonts = this._fonts;
     if (!fonts) return null;
     const key = `${this._family}|${size}|${color}|${text}`;
-    const hit = this._cache.get(key);
+    const hit = this._shaped.get(key);
     if (hit) return hit;
-    // Bounded, so a map panned across a continent cannot turn the cache
-    // into a leak. Cleared wholesale rather than evicted one at a time: the
-    // labels on screen are re-shaped on the next frame and the cost of that
-    // is a few hundred strings once.
-    if (this._cache.size > 4000) this._cache.clear();
+    const shaped = this._shapeNow(text, size, color);
+    if (shaped) this._shaped.set(key, shaped);
+    return shaped;
+  }
+
+  private _shapeNow(
+    text: string,
+    size: number,
+    color: string,
+  ): ShapedLabel | null {
+    const fonts = this._fonts;
+    if (!fonts) return null;
     const layout = fonts.layout(text, {
       family: this._family,
       size: size * this._scale,
@@ -292,13 +446,11 @@ export class LabelShaper {
       style: 'normal',
       color,
     });
-    const shaped: ShapedLabel = {
+    return {
       width: layout.width / this._scale,
       height: layout.height / this._scale,
       layout,
     };
-    this._cache.set(key, shaped);
-    return shaped;
   }
 }
 
@@ -358,22 +510,14 @@ export function placeLabels(
     if (candidate.dev * worldSize > candidate.size * STRAIGHT_FRACTION) {
       continue;
     }
-    const shaped = shaper.shape(
-      candidate.text,
-      candidate.size,
-      candidate.color,
-    );
-    if (!shaped) return placed; // no font manager: nothing can be measured
-    // Longer than the straight stretch it would sit on, with a margin past
-    // each end: it would hang off the street, over whatever the street
-    // turns into.
-    const need = shaped.width / 2 + shaped.height * LINE_MARGIN;
-    if (candidate.avail * worldSize < need) continue;
     const wx = candidate.mx * worldSize;
     const wy = candidate.my * worldSize;
-    // The repeat test before the overlap test, because it is the cheaper
-    // one and because it is what rejects most of a street layer: a long
-    // street offers its name every block, none of them overlapping.
+    // The repeat test first, because it is the cheapest one and because it
+    // is what rejects most of a street layer: a long street offers its name
+    // every block, none of them overlapping. Ahead of the shaping, which it
+    // does not need — a street's every block shaped its name, and a wheel
+    // zoom re-places at every step, so that was thousands of strings a
+    // frame asked of the cache.
     if (candidate.repeat > 0) {
       const already = byText.get(candidate.key);
       if (already) {
@@ -390,16 +534,37 @@ export function placeLabels(
         if (tooClose) continue;
       }
     }
+    const measured = shaper.measure(
+      candidate.text,
+      candidate.size,
+      candidate.color,
+    );
+    if (!measured) return placed; // no font manager: nothing can be measured
+    // Longer than the straight stretch it would sit on, with a margin past
+    // each end: it would hang off the street, over whatever the street
+    // turns into.
+    const need = measured.width / 2 + measured.height * LINE_MARGIN;
+    if (candidate.avail * worldSize < need) continue;
     // The turned text's bounding box: what it covers, as far as another
-    // label can tell.
+    // label can tell. With an icon, the box around the icon on the point
+    // and the text beside it — the two give way as one, or a stop's name
+    // would be set with nothing to say it is a stop.
     const angle = levelled(candidate.angle);
-    const w = shaped.width + padding * 2;
-    const h = shaped.height + padding * 2;
+    const icon = candidate.icon ?? null;
+    let w = measured.width + padding * 2;
+    let h = measured.height + padding * 2;
+    let ox = 0;
+    if (icon) {
+      const full = icon.size + ICON_GAP + measured.width;
+      ox = (full - icon.size) / 2;
+      w = full + padding * 2;
+      h = Math.max(icon.size, measured.height) + padding * 2;
+    }
     const cos = Math.abs(Math.cos(angle));
     const sin = Math.abs(Math.sin(angle));
     const width = w * cos + h * sin;
     const height = w * sin + h * cos;
-    const left = wx - width / 2;
+    const left = wx + ox - width / 2;
     const top = wy - height / 2;
     const x0 = Math.floor(left / CELL);
     const x1 = Math.floor((left + width) / CELL);
@@ -411,11 +576,13 @@ export function placeLabels(
         const bucket = grid.get(cellKey(cx, cy));
         if (!bucket) continue;
         for (const other of bucket) {
+          const otherLeft = other.wx + (other.ox ?? 0) - other.width / 2;
+          const otherTop = other.wy - other.height / 2;
           if (
-            left < other.wx - other.width / 2 + other.width &&
-            left + width > other.wx - other.width / 2 &&
-            top < other.wy - other.height / 2 + other.height &&
-            top + height > other.wy - other.height / 2
+            left < otherLeft + other.width &&
+            left + width > otherLeft &&
+            top < otherTop + other.height &&
+            top + height > otherTop
           ) {
             free = false;
             break;
@@ -429,9 +596,9 @@ export function placeLabels(
       angle,
       wx,
       wy,
+      ox,
       width,
       height,
-      shaped,
     };
     placed.push(entry);
     if (candidate.repeat > 0) {
@@ -482,30 +649,51 @@ export function drawLabels(
   for (const label of placed) {
     const cx = originX + label.wx;
     const cy = originY + label.wy;
+    // The box's centre, which is right of the point where an icon is on it.
+    const bx = cx + (label.ox ?? 0);
     const halfW = label.width / 2;
     const halfH = label.height / 2;
     if (
-      cx + halfW < pane.x ||
+      bx + halfW < pane.x ||
       cy + halfH < pane.y ||
-      cx - halfW > pane.x + pane.width ||
+      bx - halfW > pane.x + pane.width ||
       cy - halfH > pane.y + pane.height
     ) {
       continue;
     }
     if (
       clip &&
-      (cx + halfW < clip.x ||
+      (bx + halfW < clip.x ||
         cy + halfH < clip.y ||
-        cx - halfW > clip.x + clip.width ||
+        bx - halfW > clip.x + clip.width ||
         cy - halfH > clip.y + clip.height)
     ) {
       continue;
     }
-    const { width, height } = label.shaped;
-    const turned = label.angle !== 0 && turns;
+    // Shaped here, for the labels in the pane: the few hundred a frame
+    // draws, where the placement holds every name on the tiles loaded.
+    const shaped = shaper.drawn(label);
+    if (!shaped) continue;
+    const { width, height } = shaped;
+    const icon = label.icon ?? null;
+    const turned = !icon && label.angle !== 0 && turns;
+    const haloed = label.halo !== undefined && label.haloWidth > 0;
     let dx: number;
     let dy: number;
-    if (turned) {
+    if (icon) {
+      // The icon on the point, and the name level beside it.
+      drawIcon(
+        ctx,
+        icon,
+        Math.round(cx * scale),
+        Math.round(cy * scale),
+        icon.size * scale,
+        haloed ? label.halo : undefined,
+        Math.max(1, Math.round(label.haloWidth * scale)),
+      );
+      dx = Math.round((cx + icon.size / 2 + ICON_GAP) * scale);
+      dy = Math.round((cy - height / 2) * scale);
+    } else if (turned) {
       ctx.save();
       ctx.translate!(cx * scale, cy * scale);
       ctx.rotate!(label.angle);
@@ -516,7 +704,7 @@ export function drawLabels(
       dy = Math.round((cy - height / 2) * scale);
     }
     if (label.halo !== undefined && label.haloWidth > 0) {
-      const halo = shaper.shape(label.text, label.size, label.halo);
+      const halo = shaper.drawn(label, true);
       if (halo) {
         const offset = Math.max(1, Math.round(label.haloWidth * scale));
         halo.layout.draw(ctx, dx - offset, dy);
@@ -525,11 +713,43 @@ export function drawLabels(
         halo.layout.draw(ctx, dx, dy + offset);
       }
     }
-    label.shaped.layout.draw(ctx, dx, dy);
+    shaped.layout.draw(ctx, dx, dy);
     if (turned) ctx.restore();
     drawn++;
   }
   return drawn;
 }
 
+/**
+ * An icon on its point, in device pixels: the plate, over a plate of the
+ * halo's colour a halo wider where the layer has one — the same ground a
+ * name's halo gives it over a road — and the glyph on the plate.
+ */
+function drawIcon(
+  ctx: MapCanvas,
+  icon: LabelIcon,
+  x: number,
+  y: number,
+  size: number,
+  halo: string | undefined,
+  reach: number,
+): void {
+  ctx.save();
+  if (halo !== undefined) {
+    ctx.fillStyle = halo;
+    ctx.beginPath();
+    tracePlate(ctx, x, y, size + reach * 2);
+    ctx.fill();
+  }
+  ctx.fillStyle = icon.color;
+  ctx.beginPath();
+  tracePlate(ctx, x, y, size);
+  ctx.fill();
+  ctx.fillStyle = icon.glyph;
+  ctx.beginPath();
+  traceGlyph(ctx, icon.name, x, y, size);
+  ctx.fill();
+  ctx.restore();
+}
+
 export type { PreparedLayer };