@sakuzu/maplibre-gl-draw 2.1.1 → 2.1.3

package/CHANGELOG.md

@@ -6,13 +6,63 @@ the project follows semantic versioning.
 
 ## [Unreleased]
 
+## [2.1.3] - 2026-10-04
+
+Two fixes: the snap indicator that stayed after its input, and the
+selection frame of a point on the globe and on the terrain at a high
+pitch.
+
+### Fixed in 2.1.3
+
+- The snap indicator stayed after the input that made it: after leaving
+  the drawing mode, turning snapping off, Escape, or a pan, it went on
+  showing the last result, and `snap.changed` did not report the end of
+  the snap. The engine now clears the snap result when the mode changes,
+  when snapping (or a kind of it) is turned off, when a mode declines to
+  snap an input, and on cancel, and `snap.changed` reports `null` once
+  ([#22](https://github.com/sakuzu/maplibre-gl-draw/issues/22)).
+- The select mode snapped every input, so hovering near a vertex drew
+  the indicator, against the guide ("only while drawing and while moving
+  a vertex"). It now snaps its drags only. A select-mode plugin that
+  read `event.snapped` on a hover or a click receives the raw position
+  ([#22](https://github.com/sakuzu/maplibre-gl-draw/issues/22)).
+- The selection frame of a point is drawn as a figure of the screen,
+  like the mark: it keeps the size of the mark and the margin on the
+  terrain at any pitch and at the edge of the globe, and a point on the
+  far side of the globe gets no frame. The frame of a selection of
+  several features is drawn on the box of its handles
+  ([#12](https://github.com/sakuzu/maplibre-gl-draw/issues/12)).
+
+## [2.1.2] - 2026-10-02
+
+Three fixes: a plugin's fill, the click that finishes a plugin's
+exclusive interaction, and the selection frame of a point on the
+terrain. Nothing else changes.
+
+### Fixed
+
+- A plugin's `fill.draw` drew nothing: the fill shared with the render
+  context of custom feature renderers was never given its shader, so a
+  renderer that filled an area with it left the area empty. It is now
+  prepared each frame with the other renderers.
+- A click outside the element of a plugin's exclusive interaction
+  finished the interaction and did nothing else, so it took a second
+  click to select a feature. It now goes on as an ordinary click after
+  `finish()`: it selects the feature under it, or clears the selection
+  on the empty map. A click on the feature already selected does not
+  call `onFeatureClick`, so it does not start another interaction.
+- With the terrain on and the camera pitched, the selection frame of a
+  point was stretched into a tall rectangle. It now lies flat at the
+  elevation of the point and keeps the size of the marker and the margin
+  ([#12](https://github.com/sakuzu/maplibre-gl-draw/issues/12)).
+
 ## [2.1.1] - 2026-10-02
 
 Three fixes to the lines drawn on the terrain: their thickness on a
 high-DPI display, their thickness between the vertices, and dashed lines
 that sank into the ground. Nothing else changes.
 
-### Fixed
+### Fixed in 2.1.1
 
 - With the terrain on, a solid line or the outline of a polygon was drawn
   half as thick on a high-DPI display (a device pixel ratio of 2) as
@@ -1168,7 +1218,9 @@ available from Kasika, Inc.
 - A read-only mode and an interaction lock.
 - Plugins, custom modes and custom feature types.
 
-[Unreleased]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.1.1...HEAD
+[Unreleased]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.1.2...HEAD
+[2.1.3]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.1.2...v2.1.3
+[2.1.2]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.1.1...v2.1.2
 [2.1.1]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.1.0...v2.1.1
 [2.1.0]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.0.0...v2.1.0
 [2.0.0]: https://github.com/sakuzu/maplibre-gl-draw/compare/v1.0.0...v2.0.0

package/dist/api/impl/engine.js

@@ -196,6 +196,12 @@ export function createEngine(map, options = {}, build = {}) {
     const repaintOnSnapChange = () => map.triggerRepaint();
     eventEmitter.on('snap.change', repaintOnSnapChange);
     teardown.add(() => eventEmitter.off('snap.change', repaintOnSnapChange));
+    // A snap belongs to the input of the mode that made it: leaving the mode clears it (any
+    // mode, built-in or added), so neither the indicator nor snap.changed keeps a stale target
+    teardown.add(store.subscribe((changes) => {
+        if (changes.mode)
+            snapService.clear();
+    }));
     // 4. Create the RenderCoordinator (triggers a repaint automatically when the
     // Store changes)
     const renderCoordinator = createRenderCoordinator({ map, store });

package/dist/api/impl/extension-host.js

@@ -83,7 +83,9 @@ export function createExtensionHost(deps) {
             install: (name, factory) => modeManager.registerMode(name, () => {
                 const handle = createModeContext(modeServices, screen);
                 try {
-                    return bridgeMode(name, factory(handle.context), handle.dispose, handle.entering);
+                    return bridgeMode(name, factory(handle.context), handle.dispose, handle.entering, 
+                    // An interrupted mode leaves no snap behind (leaving it is cleared by the engine)
+                    () => context.snapService.clear());
                 }
                 catch (error) {
                     handle.dispose();

package/dist/api/impl/input.js

@@ -83,9 +83,10 @@ const BRIDGED = Symbol('extension mode');
  * @param onExit - Called after the mode was left, to end what its context holds
  * @param entering - Runs the entering of the mode, so that its context knows the cursor the
  *   mode sets then
+ * @param onCancelled - Called after the mode was interrupted, to clear what its input left
  * @internal
  */
-export function bridgeMode(name, handler, onExit, entering = (run) => run()) {
+export function bridgeMode(name, handler, onExit, entering = (run) => run(), onCancelled = () => { }) {
     const bridged = {
         [BRIDGED]: handler,
         modeName: name,
@@ -102,7 +103,15 @@ export function bridgeMode(name, handler, onExit, entering = (run) => run()) {
             }
         },
         onExternalStateChange() {
-            handler.onCancel?.();
+            bridged.cancel();
+        },
+        cancel() {
+            try {
+                handler.onCancel?.();
+            }
+            finally {
+                onCancelled();
+            }
         },
         undoVertex: () => handler.onUndoVertex?.() === true,
         redoVertex: () => handler.onRedoVertex?.() === true,
@@ -136,7 +145,7 @@ export function routeToMode(handler, event, snapped, snap) {
         return undefined;
     const consumed = deliver(mode, event, snapped, snap);
     if (!consumed && event.type === 'keydown' && event.key === 'Escape' && mode.onCancel) {
-        mode.onCancel();
+        handler.cancel();
         return true;
     }
     return consumed;

package/dist/dispatcher/input-router.js

@@ -123,12 +123,14 @@ export function createInputRouter(deps) {
      *
      * Whether snapping is wanted is asked of the current mode per input type
      * (isSnapEnabledFor). A mode that does not declare it snaps for every input type
-     * (as before).
+     * (as before). An input that is not snapped clears the previous result, so the
+     * indicator of an earlier snap does not stay behind it.
      */
     function applySnap(event, inputType) {
-        if (!snapService || event.snap === false)
+        if (!snapService)
             return { event, result: null };
-        if (modeManager.getHandler()?.isSnapEnabledFor?.(inputType) === false) {
+        if (event.snap === false || modeManager.getHandler()?.isSnapEnabledFor?.(inputType) === false) {
+            snapService.clear();
             return { event, result: null };
         }
         const result = snapService.resolve(event.lngLat, event.point, buildSnapContext(event.modifiers));

package/dist/modes/select/click-handler.d.ts

@@ -3,7 +3,10 @@
  *
  * Single click: the priority order is plugin intercept -> vertex click -> feature selection
  *   1. While a plugin is interacting, clicks inside its container are consumed; anything else
- *      finishes it
+ *      finishes it and then goes on as an ordinary click (it selects the feature under it, or
+ *      clears the selection on the empty map), except that re-clicking the selected feature is
+ *      not delegated to plugins.handleFeatureClick (the click that finished an interaction does
+ *      not start another)
  *   2. A click on a vertex handle of a singly selected feature that supports vertex editing
  *      (LineString / Polygon / the Multi types) -> vertex selection
  *   3. Unified z traversal (hitTestTopmost) -> if it is a Store feature, the selection is

package/dist/modes/select/click-handler.js

@@ -11,7 +11,8 @@ import { getSelectedFeatures } from '../../view/ui/helper.js';
  * The main logic of onClick
  */
 export function handleSelectClick(event, context, config) {
-    if (handlePluginInteractionClick(event, context)) {
+    const interaction = handlePluginInteractionClick(event, context);
+    if (interaction === 'inside') {
         return;
     }
     const { store } = context;
@@ -21,7 +22,7 @@ export function handleSelectClick(event, context, config) {
         return;
     }
     store.setSelectedVertices(null);
-    handleFeatureClick(event, selection, selectedIds, context);
+    handleFeatureClick(event, selection, selectedIds, context, interaction === 'finished');
 }
 /**
  * The main logic of onDoubleClick
@@ -48,21 +49,21 @@ export function handleSelectDoubleClick(event, context) {
 /**
  * Click handling during a plugin interaction
  *
- * @returns true when the click was consumed (= the caller skips the rest of the handling)
+ * Only `inside` consumes the click; after `finished` the caller handles it as an ordinary click.
  */
 function handlePluginInteractionClick(event, context) {
     const pm = context.plugins;
     if (!pm?.isPluginInteracting())
-        return false;
+        return 'none';
     const container = pm.getPluginInteractionContainer();
     if (container) {
         const target = event.originalEvent.target;
         if (container.contains(target)) {
-            return true;
+            return 'inside';
         }
     }
     pm.finishPluginInteraction();
-    return true;
+    return 'finished';
 }
 /**
  * Click handling for vertex handles
@@ -108,8 +109,11 @@ function handleVertexClick(event, selectedIds, context, config) {
 }
 /**
  * Feature selection handling
+ *
+ * @param finishedInteraction The click finished a plugin interaction: re-clicking the selected
+ *   feature is not delegated to the plugins
  */
-function handleFeatureClick(event, selection, selectedIds, context) {
+function handleFeatureClick(event, selection, selectedIds, context, finishedInteraction) {
     const { store } = context;
     const orderedFeatures = getDisplayFeatures(store);
     let top = context.hitTestTopmost(event.point, { orderedFeatures });
@@ -134,8 +138,12 @@ function handleFeatureClick(event, selection, selectedIds, context) {
         return;
     }
     const feature = top.feature;
-    // Re-clicking an already selected feature -> delegate to the plugins
-    if (!event.modifiers.shift && selectedIds.length === 1 && selectedIds.includes(feature.id)) {
+    // Re-clicking an already selected feature -> delegate to the plugins (not when the click
+    // finished an interaction)
+    if (!finishedInteraction &&
+        !event.modifiers.shift &&
+        selectedIds.length === 1 &&
+        selectedIds.includes(feature.id)) {
         if (context.plugins?.handleFeatureClick(feature.id, event)) {
             return;
         }

package/dist/modes/select/mode.js

@@ -80,6 +80,14 @@ export class SelectMode {
             store.setSelection(null, []);
         }, 'silent');
     }
+    /**
+     * Snapping applies only while a vertex or a feature is dragged: a click or a hover in
+     * select is not snapped (and draws no indicator). A mode of the contract that wants the
+     * snapped position of a point asks `snap` of its ModeContext.
+     */
+    isSnapEnabledFor(inputType) {
+        return inputType === 'dragstart' || inputType === 'dragmove' || inputType === 'dragend';
+    }
     /**
      * Called after a state change from the outside (a change applied from outside the mode).
      * Resets the mode's internal state to keep it consistent.

package/dist/snapping/service.js

@@ -110,6 +110,17 @@ export function createSnapService(deps = {}) {
         }
         return result;
     }
+    /**
+     * Drops the result when it holds a target, emitting the change once without a target (the
+     * same event as a snap that comes off). A result without a target is left as it is.
+     */
+    function clear() {
+        if (!lastResult?.target)
+            return;
+        const { lngLat } = lastResult;
+        lastResult = null;
+        deps.eventEmitter?.emit('snap.change', { lngLat });
+    }
     /**
      * Evaluates a single candidate and updates best
      *
@@ -248,7 +259,10 @@ export function createSnapService(deps = {}) {
         },
         setEnabled(value) {
             enabled = value;
+            if (!value)
+                clear();
         },
+        clear,
         setTolerance(px) {
             options.tolerancePx = px;
         },
@@ -260,6 +274,8 @@ export function createSnapService(deps = {}) {
         },
         setKindEnabled(kind, value) {
             options.kinds[kind] = value;
+            if (!value)
+                clear();
         },
         isKindEnabled(kind) {
             return options.kinds[kind];

package/dist/view/layer/renderers.d.ts

@@ -12,6 +12,7 @@ import type { PixelRatioInput } from '../../shared/utils/pixel-ratio.js';
 import type { SpatialIndex } from '../../store/spatial/spatial-index.js';
 import type { Store } from '../../store/store.js';
 import { TextureCache } from '../cache/texture.js';
+import { AnchoredOutlineRenderer } from '../renderers/anchored-outline.js';
 import { BatchManager } from '../renderers/batch-manager.js';
 import { FeatureDrawer } from '../renderers/drawer.js';
 import { type ImageErrorFn, ImageRenderer } from '../renderers/image.js';
@@ -37,6 +38,8 @@ export interface Renderers {
     quadShader: QuadShader;
     imageRenderer: ImageRenderer;
     strokeRenderer: StrokeRenderer;
+    /** The outlines laid on the screen around an anchor (the frames of points) */
+    outlineRenderer: AnchoredOutlineRenderer;
     sdfLineRenderer: SDFLineRenderer;
     pointShapeRenderer: PointShapeRenderer;
     pointInstanceRenderer: PointInstanceRenderer;

package/dist/view/layer/renderers.js

@@ -1,6 +1,7 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
 import { TextureCache } from '../cache/texture.js';
+import { AnchoredOutlineRenderer } from '../renderers/anchored-outline.js';
 import { BatchManager } from '../renderers/batch-manager.js';
 import { FeatureDrawer } from '../renderers/drawer.js';
 import { ImageRenderer } from '../renderers/image.js';
@@ -27,6 +28,7 @@ export function initRenderers(deps) {
     const quadShader = new QuadShader(gl).useTerrainState(terrain);
     const imageRenderer = new ImageRenderer(mapInstance, gl, textureCache, quadShader, (fileId) => store.getFile(fileId), onImageError);
     const strokeRenderer = new StrokeRenderer(mapInstance, gl, pixelRatio, terrain);
+    const outlineRenderer = new AnchoredOutlineRenderer(mapInstance, gl, pixelRatio, terrain);
     const sdfLineRenderer = new SDFLineRenderer(mapInstance, gl, pixelRatio, terrain);
     const pointShapeRenderer = new PointShapeRenderer(mapInstance, gl, pixelRatio, terrain);
     const pointInstanceRenderer = new PointInstanceRenderer(mapInstance, gl, pixelRatio, terrain);
@@ -35,7 +37,7 @@ export function initRenderers(deps) {
     const sdfPolygonRenderer = new SDFPolygonRenderer(gl, pixelRatio, polygonScope);
     const fillShaderManager = new FillShaderManager(gl, terrain);
     const selectionExtensions = scope.selection.extensions;
-    const selectionUIRenderer = new SelectionUIRenderer(strokeRenderer, selectionConfig, selectionExtensions);
+    const selectionUIRenderer = new SelectionUIRenderer(strokeRenderer, outlineRenderer, selectionConfig, selectionExtensions, terrain);
     // The tile size of this instance's map (read by the custom bounding box calculators)
     const tileSize = mapInstance.transform?.tileSize ?? 512;
     selectionExtensions.setTileSize(tileSize);
@@ -74,11 +76,13 @@ export function initRenderers(deps) {
         tentativeRenderer,
         quadShader,
         strokeRenderer,
+        outlineRenderer,
         pointShapeRenderer,
         pointInstanceRenderer,
         sdfLineRenderer,
         polygonBatchRenderer,
         sdfPolygonRenderer,
+        fillShaderManager,
     });
     const batchManager = new BatchManager({
         gl,
@@ -94,6 +98,7 @@ export function initRenderers(deps) {
         quadShader,
         imageRenderer,
         strokeRenderer,
+        outlineRenderer,
         sdfLineRenderer,
         pointShapeRenderer,
         pointInstanceRenderer,
@@ -124,6 +129,7 @@ const GPU_OWNERS = [
     'textureCache',
     'quadShader',
     'strokeRenderer',
+    'outlineRenderer',
     'pointShapeRenderer',
     'pointInstanceRenderer',
     'sdfLineRenderer',

package/dist/view/renderers/anchored-outline.d.ts

@@ -0,0 +1,5 @@
+/** A point of the screen relative to the anchor, in CSS px (y points down) */
+export interface OutlineOffset {
+    x: number;
+    y: number;
+}

package/dist/view/renderers/anchored-outline.js

@@ -0,0 +1,352 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { getDashPattern, RENDERING_DEFAULTS } from '../../shared/math/index.js';
+import { resolvePixelRatio } from '../../shared/utils/pixel-ratio.js';
+import { calculateLngLatOffset, createProgram, getProjectionTransitionUniform, OFFSET_MODE_GLSL, } from '../shaders/helpers.js';
+import { ProjectionUniformManager } from '../shaders/projection.js';
+import { TerrainContext } from '../terrain/context.js';
+import { drawBillboardsWithoutDepth } from './point/billboard-depth.js';
+/** Floats per vertex: the offset (x, y in device px), the signed distance across, the distance along */
+const FLOATS_PER_VERTEX = 4;
+const STRIDE = FLOATS_PER_VERTEX * 4;
+/**
+ * The vertices of a closed outline as a triangle strip: two per corner (the two sides of the
+ * line) and the first corner again at the end
+ *
+ * Each vertex is the corner moved along the miter of its two edges by half the width plus one
+ * pixel (the band the HHAA coverage fades in), the same join as StrokeRenderer: a miter longer
+ * than the limit becomes a bevel along the edge that arrives. The distance along the outline is
+ * in CSS px, the unit of the dash patterns.
+ *
+ * @param corners The corners relative to the anchor, in CSS px, in order (not closed)
+ * @param widthPx The width of the line in device px
+ * @param pixelRatio Device px per CSS px
+ * @param miterLimit The longest miter, in half widths
+ * @returns The interleaved vertices (x, y, signed distance, distance), empty for fewer than two
+ *   distinct corners
+ * @internal
+ */
+export function buildOutlineStrip(corners, widthPx, pixelRatio, miterLimit = RENDERING_DEFAULTS.MITER_LIMIT) {
+    // Repeated corners make no edge
+    const ring = corners.filter((corner, i) => {
+        const next = corners[(i + 1) % corners.length];
+        return corners.length === 1 || corner.x !== next.x || corner.y !== next.y;
+    });
+    const n = ring.length;
+    if (n < 2)
+        return new Float32Array(0);
+    const expanded = widthPx / 2 + 1;
+    const unit = (from, to) => {
+        const dx = to.x - from.x;
+        const dy = to.y - from.y;
+        const length = Math.hypot(dx, dy);
+        return { x: dx / length, y: dy / length };
+    };
+    const data = new Float32Array((n + 1) * 2 * FLOATS_PER_VERTEX);
+    let along = 0;
+    for (let i = 0; i <= n; i++) {
+        const corner = ring[i % n];
+        if (i > 0) {
+            const before = ring[i - 1];
+            along += Math.hypot(corner.x - before.x, corner.y - before.y);
+        }
+        const arriving = unit(ring[(i + n - 1) % n], corner);
+        const leaving = unit(corner, ring[(i + 1) % n]);
+        const n1 = { x: -arriving.y, y: arriving.x };
+        const n2 = { x: -leaving.y, y: leaving.x };
+        let normal = n1;
+        let scale = 1;
+        const sum = { x: n1.x + n2.x, y: n1.y + n2.y };
+        const sumLength = Math.hypot(sum.x, sum.y);
+        if (sumLength > 0.001) {
+            const miter = { x: sum.x / sumLength, y: sum.y / sumLength };
+            const cosHalf = miter.x * n1.x + miter.y * n1.y;
+            if (cosHalf > 0.001 && 1 / cosHalf <= miterLimit) {
+                normal = miter;
+                scale = 1 / cosHalf;
+            }
+        }
+        for (const side of [1, -1]) {
+            const base = (i * 2 + (side === 1 ? 0 : 1)) * FLOATS_PER_VERTEX;
+            data[base] = corner.x * pixelRatio + normal.x * side * expanded * scale;
+            data[base + 1] = corner.y * pixelRatio + normal.y * side * expanded * scale;
+            data[base + 2] = side * expanded;
+            data[base + 3] = along;
+        }
+    }
+    return data;
+}
+/**
+ * Draws closed outlines laid in pixels around an anchor projected like a marker
+ *
+ * @internal
+ */
+export class AnchoredOutlineRenderer {
+    constructor(_map, gl, pixelRatio, terrain = new TerrainContext()) {
+        Object.defineProperty(this, "gl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "program", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "variantName", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "projectionUniformManager", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "offsetUniforms", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        /** The injected device pixel ratio (read from window each time when not injected) */
+        Object.defineProperty(this, "pixelRatio", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "colorLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "widthLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "pixelToClipLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "anchorOffsetLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "anchorElevationLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "dashArrayLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "dashEnabledLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "vao", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "vertexBuffer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.gl = gl;
+        this.pixelRatio = pixelRatio;
+        // An outline around an anchor is a symbol: it keeps the height of its anchor on the frames
+        // that lay the surfaces flat, as the marker does
+        this.projectionUniformManager = new ProjectionUniformManager(gl).useTerrainState(terrain);
+        this.vertexBuffer = gl.createBuffer();
+        this.vao = gl.createVertexArray();
+        gl.bindVertexArray(this.vao);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+        gl.enableVertexAttribArray(0);
+        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, STRIDE, 0); // a_offset
+        gl.enableVertexAttribArray(1);
+        gl.vertexAttribPointer(1, 1, gl.FLOAT, false, STRIDE, 8); // a_side_dist
+        gl.enableVertexAttribArray(2);
+        gl.vertexAttribPointer(2, 1, gl.FLOAT, false, STRIDE, 12); // a_distance
+        gl.bindVertexArray(null);
+    }
+    /** Makes sure the shader of the projection variant exists */
+    ensureShader(shaderData) {
+        if (this.variantName === shaderData.variantName)
+            return;
+        if (this.program)
+            this.gl.deleteProgram(this.program);
+        this.program = this.createShaderProgram(shaderData.vertexShaderPrelude, shaderData.define);
+        this.variantName = shaderData.variantName;
+        this.projectionUniformManager.getLocations(this.program);
+        const gl = this.gl;
+        this.colorLoc = gl.getUniformLocation(this.program, 'u_color');
+        this.widthLoc = gl.getUniformLocation(this.program, 'u_width');
+        this.pixelToClipLoc = gl.getUniformLocation(this.program, 'u_pixel_to_clip');
+        this.anchorOffsetLoc = gl.getUniformLocation(this.program, 'u_anchor_offset');
+        this.anchorElevationLoc = gl.getUniformLocation(this.program, 'u_anchor_elevation_m');
+        this.dashArrayLoc = gl.getUniformLocation(this.program, 'u_dashArray');
+        this.dashEnabledLoc = gl.getUniformLocation(this.program, 'u_dashEnabled');
+    }
+    /** Sets the uniforms of the offset mode (the camera of the copy of the world being drawn) */
+    setOffsetUniforms(uniforms) {
+        this.offsetUniforms = uniforms;
+    }
+    createShaderProgram(prelude, define) {
+        const projTransitionUniform = getProjectionTransitionUniform(prelude);
+        const vertexSource = `#version 300 es
+${prelude}
+${define}
+${projTransitionUniform}${OFFSET_MODE_GLSL}
+layout(location = 0) in vec2 a_offset;     // the vertex around the anchor (device px, y down)
+layout(location = 1) in float a_side_dist; // the signed distance across the line (device px)
+layout(location = 2) in float a_distance;  // the distance along the outline (CSS px)
+
+uniform vec2 u_anchor_offset;       // the anchor relative to the center (64-bit on the CPU)
+uniform float u_anchor_elevation_m; // the height of the anchor, from the CPU as for a marker
+uniform vec2 u_pixel_to_clip;       // device px to clip space
+uniform float u_width;              // the width of the line (device px)
+
+out float v_dist;
+out float v_width;
+out float v_distance;
+
+void main() {
+    // The height comes from the CPU, the source hit testing and the marker use
+    g_anchor_elevation_m = u_anchor_elevation_m;
+    g_anchor_elevation_on = 1.0;
+    vec4 centerClip = project_position_to_clipspace_from_offset(u_anchor_offset, u_projection_matrix);
+    // The depth of the anchor for every vertex: the far side of the globe clips the outline
+    // with its anchor, as it clips a marker
+    gl_Position = vec4(
+        centerClip.xy / centerClip.w + vec2(a_offset.x, -a_offset.y) * u_pixel_to_clip,
+        centerClip.z / centerClip.w,
+        1.0
+    );
+    v_dist = a_side_dist;
+    v_width = u_width / 2.0;
+    v_distance = a_distance;
+}`;
+        const fragmentSource = `#version 300 es
+precision highp float;
+
+uniform vec4 u_color;
+uniform vec4 u_dashArray; // [dashLength, gapLength, patternLength, 0]
+uniform float u_dashEnabled;
+
+in float v_dist;
+in float v_width;
+in float v_distance;
+
+out vec4 fragColor;
+
+// HHAA: the part of the pixel on the inner side of a half plane
+float pixelLine(float x) {
+    return clamp(x + 0.5, 0.0, 1.0);
+}
+
+void main() {
+    if (u_dashEnabled > 0.5) {
+        float patternLength = u_dashArray.z;
+        if (patternLength > 0.0 && mod(v_distance, patternLength) > u_dashArray.x) discard;
+    }
+    float coverage = pixelLine(v_dist + v_width) - pixelLine(v_dist - v_width);
+    // Blending is non-premultiplied, so the coverage goes to the alpha only
+    fragColor = vec4(u_color.rgb, u_color.a * coverage);
+}`;
+        return createProgram(this.gl, vertexSource, fragmentSource);
+    }
+    /**
+     * Draws a closed outline around an anchor
+     *
+     * @param anchor The position the outline is laid around, `[lng, lat]`
+     * @param elevationMeters The height of the anchor (the height its marker is drawn at)
+     * @param corners The corners relative to the anchor's point on the screen, in CSS px
+     * @param style The line (its width is in CSS px)
+     * @param opacity A factor on the opacity of the line (the terrain's ghost of the marker)
+     * @param zoom The zoom of the frame
+     * @param projectionData The projection of the copy of the world being drawn
+     */
+    draw(anchor, elevationMeters, corners, style, opacity, zoom, projectionData) {
+        if (!this.program)
+            return;
+        const gl = this.gl;
+        const pixelRatio = resolvePixelRatio(this.pixelRatio);
+        const widthPx = style.width * pixelRatio;
+        const data = buildOutlineStrip(corners, widthPx, pixelRatio);
+        if (data.length === 0)
+            return;
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, data, gl.DYNAMIC_DRAW);
+        gl.bindVertexArray(this.vao);
+        gl.useProgram(this.program);
+        this.projectionUniformManager.setUniforms(projectionData, zoom, this.offsetUniforms);
+        const center = this.offsetUniforms?.centerLngLat ?? [0, 0];
+        const offset = calculateLngLatOffset([anchor[0], anchor[1]], center);
+        if (this.anchorOffsetLoc)
+            gl.uniform2f(this.anchorOffsetLoc, offset[0], offset[1]);
+        if (this.anchorElevationLoc)
+            gl.uniform1f(this.anchorElevationLoc, elevationMeters);
+        if (this.pixelToClipLoc) {
+            gl.uniform2f(this.pixelToClipLoc, 2 / gl.drawingBufferWidth, 2 / gl.drawingBufferHeight);
+        }
+        if (this.widthLoc)
+            gl.uniform1f(this.widthLoc, widthPx);
+        if (this.colorLoc) {
+            gl.uniform4fv(this.colorLoc, [
+                style.color[0],
+                style.color[1],
+                style.color[2],
+                style.color[3] * style.opacity * opacity,
+            ]);
+        }
+        const dashPattern = style.dashArray ?? getDashPattern(style.lineStyle);
+        const dashed = style.lineStyle !== 'solid' && dashPattern.length >= 2;
+        if (this.dashEnabledLoc)
+            gl.uniform1f(this.dashEnabledLoc, dashed ? 1 : 0);
+        if (dashed && this.dashArrayLoc) {
+            const [dash, gap] = dashPattern;
+            gl.uniform4fv(this.dashArrayLoc, [dash, gap, dash + gap, 0]);
+        }
+        drawBillboardsWithoutDepth(gl, () => {
+            gl.drawArrays(gl.TRIANGLE_STRIP, 0, data.length / FLOATS_PER_VERTEX);
+        });
+        gl.bindVertexArray(null);
+    }
+    /** Releases the GPU resources */
+    dispose() {
+        if (this.program) {
+            this.gl.deleteProgram(this.program);
+            this.program = null;
+        }
+        if (this.vao) {
+            this.gl.deleteVertexArray(this.vao);
+            this.vao = null;
+        }
+        if (this.vertexBuffer) {
+            this.gl.deleteBuffer(this.vertexBuffer);
+            this.vertexBuffer = null;
+        }
+    }
+}

package/dist/view/shaders/initializer.d.ts

@@ -1,8 +1,10 @@
+import type { AnchoredOutlineRenderer } from '../renderers/anchored-outline.js';
 import type { FeatureDrawer } from '../renderers/drawer.js';
 import type { SDFLineRenderer } from '../renderers/line/sdf-line.js';
 import type { PointInstanceRenderer } from '../renderers/point/point-instance.js';
 import type { PointShapeRenderer } from '../renderers/point/point-shape.js';
 import type { PolygonBatchRenderer } from '../renderers/polygon/batch.js';
+import type { FillShaderManager } from '../renderers/polygon/fill.js';
 import type { SDFPolygonRenderer } from '../renderers/polygon/sdf-polygon.js';
 import type { StrokeRenderer } from '../renderers/stroke.js';
 import type { TentativeRenderer } from '../ui/tentative.js';
@@ -15,11 +17,15 @@ export interface ShaderInitializerRenderers {
     tentativeRenderer: TentativeRenderer | null;
     quadShader: QuadShader | null;
     strokeRenderer: StrokeRenderer | null;
+    /** The outlines laid on the screen around an anchor (the frames of points) */
+    outlineRenderer: AnchoredOutlineRenderer | null;
     pointShapeRenderer: PointShapeRenderer | null;
     pointInstanceRenderer: PointInstanceRenderer | null;
     sdfLineRenderer: SDFLineRenderer | null;
     polygonBatchRenderer: PolygonBatchRenderer | null;
     sdfPolygonRenderer: SDFPolygonRenderer | null;
+    /** The fill shared with the render context of custom feature renderers */
+    fillShaderManager: FillShaderManager | null;
 }
 /**
  * Creates a ShaderInitializer

package/dist/view/shaders/initializer.js

@@ -23,7 +23,7 @@ export class ShaderInitializer {
      * Makes every renderer ensure its shader
      */
     ensureShaders(shaderData) {
-        const { featureDrawer, tentativeRenderer, quadShader, strokeRenderer, pointShapeRenderer, pointInstanceRenderer, sdfLineRenderer, polygonBatchRenderer, sdfPolygonRenderer, } = this.renderers;
+        const { featureDrawer, tentativeRenderer, quadShader, strokeRenderer, outlineRenderer, pointShapeRenderer, pointInstanceRenderer, sdfLineRenderer, polygonBatchRenderer, sdfPolygonRenderer, fillShaderManager, } = this.renderers;
         if (featureDrawer) {
             featureDrawer.ensureShader(shaderData);
         }
@@ -36,6 +36,9 @@ export class ShaderInitializer {
         if (strokeRenderer) {
             strokeRenderer.ensureShader(shaderData);
         }
+        if (outlineRenderer) {
+            outlineRenderer.ensureShader(shaderData);
+        }
         if (pointShapeRenderer) {
             pointShapeRenderer.ensureShader(shaderData);
         }
@@ -51,6 +54,7 @@ export class ShaderInitializer {
         if (sdfPolygonRenderer) {
             sdfPolygonRenderer.ensureShader(shaderData);
         }
+        fillShaderManager?.ensureShader(shaderData);
     }
     /**
      * Sets the projection data on the renderers that need it
@@ -79,7 +83,7 @@ export class ShaderInitializer {
      * uniforms once per frame and applies them for each slot.
      */
     applyOffsetUniforms(uniforms) {
-        const { featureDrawer, tentativeRenderer, quadShader, strokeRenderer, pointShapeRenderer, pointInstanceRenderer, sdfLineRenderer, polygonBatchRenderer, sdfPolygonRenderer, } = this.renderers;
+        const { featureDrawer, tentativeRenderer, quadShader, strokeRenderer, outlineRenderer, pointShapeRenderer, pointInstanceRenderer, sdfLineRenderer, polygonBatchRenderer, sdfPolygonRenderer, fillShaderManager, } = this.renderers;
         if (featureDrawer) {
             featureDrawer.setOffsetUniforms(uniforms);
         }
@@ -92,6 +96,9 @@ export class ShaderInitializer {
         if (strokeRenderer) {
             strokeRenderer.setOffsetUniforms(uniforms);
         }
+        if (outlineRenderer) {
+            outlineRenderer.setOffsetUniforms(uniforms);
+        }
         if (pointShapeRenderer) {
             pointShapeRenderer.setOffsetUniforms(uniforms);
         }
@@ -107,6 +114,7 @@ export class ShaderInitializer {
         if (sdfPolygonRenderer) {
             sdfPolygonRenderer.setOffsetUniforms(uniforms);
         }
+        fillShaderManager?.setOffsetUniforms(uniforms);
     }
     /**
      * Increments the frame count of SDFLineRenderer

package/dist/view/terrain/anchor.js

@@ -140,11 +140,30 @@ export function drawnLongitude(context, lng) {
  * @internal
  */
 export function projectAnchor(context, lng, lat) {
+    const frame = context.anchorFrame;
+    if (!frame.mainMatrix || !frame.terrain)
+        return null;
+    return projectAnchorAt(context, lng, lat, anchorElevationMeters(context, lng, lat));
+}
+/**
+ * Maps a position at a given elevation to screen coordinates, with the projection of
+ * {@link projectAnchor}
+ *
+ * Something drawn flat at one elevation, such as the frame of a selected point at the
+ * elevation of the point, is projected with this so that it lands where the shader draws it.
+ *
+ * @param elevationMeters The elevation in meters (the exaggeration included, as
+ *   {@link anchorElevationMeters} gives it)
+ * @returns null when the terrain is disabled, the frame state has not been established or the
+ *   position is behind the camera
+ * @internal
+ */
+export function projectAnchorAt(context, lng, lat, elevationMeters) {
     const frame = context.anchorFrame;
     const { mainMatrix: m, offsetUniforms, terrain, width, height } = frame;
     if (!m || !terrain || width <= 0 || height <= 0)
         return null;
-    const elevationMercator = anchorElevationMeters(context, lng, lat) * frame.elevationScale;
+    const elevationMercator = elevationMeters * frame.elevationScale;
     // The anchor is projected on the copy of the world it is drawn on
     const drawnLng = drawnLongitude(context, lng);
     let clipX;

package/dist/view/ui/selection-ui/renderer.d.ts

@@ -9,12 +9,14 @@ import type { ProjectionData } from 'maplibre-gl';
 import type { SelectionUIConfig } from '../../../shared/config/selection.js';
 import { type CoordinateTransform } from '../../../shared/math/index.js';
 import type { DragState, Feature } from '../../../store/types.js';
+import type { AnchoredOutlineRenderer } from '../../renderers/anchored-outline.js';
 import type { StrokeRenderer } from '../../renderers/stroke.js';
+import { TerrainContext } from '../../terrain/context.js';
 import type { SelectionExtensionRegistry } from './extension-registry.js';
 import type { BoundingBoxCoords } from './types.js';
 export declare class SelectionUIRenderer {
     #private;
-    constructor(strokeRenderer: StrokeRenderer, config: SelectionUIConfig, extensions: SelectionExtensionRegistry);
+    constructor(strokeRenderer: StrokeRenderer, outlineRenderer: AnchoredOutlineRenderer, config: SelectionUIConfig, extensions: SelectionExtensionRegistry, terrain?: TerrainContext);
     /** Compute the BoundingBox of a feature (also usable from outside) */
     computeFeatureBoundingBox(feature: Feature): BoundingBoxCoords | null;
     /** Compute the combined BoundingBox of several features (also usable from outside) */

package/dist/view/ui/selection-ui/renderer.js

@@ -11,21 +11,30 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _SelectionUIRenderer_instances, _SelectionUIRenderer_strokeRenderer, _SelectionUIRenderer_extensions, _SelectionUIRenderer_config, _SelectionUIRenderer_transform, _SelectionUIRenderer_projectionData, _SelectionUIRenderer_drawRotatingBoundingBox, _SelectionUIRenderer_drawIndividualBoundingBox, _SelectionUIRenderer_drawCombinedBoundingBox, _SelectionUIRenderer_drawBoundingBoxWithMargin, _SelectionUIRenderer_drawPointBoundingBox, _SelectionUIRenderer_applyMargin, _SelectionUIRenderer_strokeBoundingBox, _SelectionUIRenderer_strokePath;
-import { applyMarginToBoundingBox } from '../../../shared/math/index.js';
+var _SelectionUIRenderer_instances, _SelectionUIRenderer_strokeRenderer, _SelectionUIRenderer_outlineRenderer, _SelectionUIRenderer_extensions, _SelectionUIRenderer_terrain, _SelectionUIRenderer_config, _SelectionUIRenderer_transform, _SelectionUIRenderer_projectionData, _SelectionUIRenderer_drawRotatingBoundingBox, _SelectionUIRenderer_drawIndividualBoundingBox, _SelectionUIRenderer_drawBoundingBoxWithMargin, _SelectionUIRenderer_drawPointBoundingBox, _SelectionUIRenderer_pointFrame, _SelectionUIRenderer_applyMargin, _SelectionUIRenderer_strokeBoundingBox, _SelectionUIRenderer_strokePath;
+import { applyMarginToBoundingBox, } from '../../../shared/math/index.js';
+import { anchorElevationMeters, isAnchorActive, projectAnchorAt } from '../../terrain/anchor.js';
+import { TerrainContext } from '../../terrain/context.js';
+import { anchorGhostOpacity } from '../../terrain/occlusion.js';
 import { computeBoundingBox, computeCombinedBoundingBox, hasZeroArea, rotateBoundingBox, } from './bounding-box.js';
 export class SelectionUIRenderer {
-    constructor(strokeRenderer, config, extensions) {
+    constructor(strokeRenderer, outlineRenderer, config, extensions, terrain = new TerrainContext()) {
         _SelectionUIRenderer_instances.add(this);
         _SelectionUIRenderer_strokeRenderer.set(this, void 0);
+        /** Draws the frames of points, which are figures of the screen */
+        _SelectionUIRenderer_outlineRenderer.set(this, void 0);
         /** The Selection UI extension points of the draw instance this renderer belongs to */
         _SelectionUIRenderer_extensions.set(this, void 0);
+        /** The terrain state of the draw instance (an inactive one projects with the map) */
+        _SelectionUIRenderer_terrain.set(this, void 0);
         _SelectionUIRenderer_config.set(this, void 0);
         _SelectionUIRenderer_transform.set(this, null);
         _SelectionUIRenderer_projectionData.set(this, null);
         __classPrivateFieldSet(this, _SelectionUIRenderer_strokeRenderer, strokeRenderer, "f");
+        __classPrivateFieldSet(this, _SelectionUIRenderer_outlineRenderer, outlineRenderer, "f");
         __classPrivateFieldSet(this, _SelectionUIRenderer_config, config, "f");
         __classPrivateFieldSet(this, _SelectionUIRenderer_extensions, extensions, "f");
+        __classPrivateFieldSet(this, _SelectionUIRenderer_terrain, terrain, "f");
     }
     /** Compute the BoundingBox of a feature (also usable from outside) */
     computeFeatureBoundingBox(feature) {
@@ -77,10 +86,10 @@ export class SelectionUIRenderer {
                 __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_drawIndividualBoundingBox).call(this, feature, zoom);
             }
         }
-        __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_drawCombinedBoundingBox).call(this, features, zoom);
+        __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_drawBoundingBoxWithMargin).call(this, features, zoom);
     }
 }
-_SelectionUIRenderer_strokeRenderer = new WeakMap(), _SelectionUIRenderer_extensions = new WeakMap(), _SelectionUIRenderer_config = new WeakMap(), _SelectionUIRenderer_transform = new WeakMap(), _SelectionUIRenderer_projectionData = new WeakMap(), _SelectionUIRenderer_instances = new WeakSet(), _SelectionUIRenderer_drawRotatingBoundingBox = function _SelectionUIRenderer_drawRotatingBoundingBox(features, zoom, dragState) {
+_SelectionUIRenderer_strokeRenderer = new WeakMap(), _SelectionUIRenderer_outlineRenderer = new WeakMap(), _SelectionUIRenderer_extensions = new WeakMap(), _SelectionUIRenderer_terrain = new WeakMap(), _SelectionUIRenderer_config = new WeakMap(), _SelectionUIRenderer_transform = new WeakMap(), _SelectionUIRenderer_projectionData = new WeakMap(), _SelectionUIRenderer_instances = new WeakSet(), _SelectionUIRenderer_drawRotatingBoundingBox = function _SelectionUIRenderer_drawRotatingBoundingBox(features, zoom, dragState) {
     // When dragState.operation === 'rotate', rotateInfo always exists
     const rotateInfo = dragState.rotateInfo;
     if (!rotateInfo)
@@ -105,82 +114,32 @@ _SelectionUIRenderer_strokeRenderer = new WeakMap(), _SelectionUIRenderer_extens
     if (!bbox)
         return;
     __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokeBoundingBox).call(this, __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_applyMargin).call(this, bbox, zoom), zoom);
-}, _SelectionUIRenderer_drawCombinedBoundingBox = function _SelectionUIRenderer_drawCombinedBoundingBox(features, zoom) {
-    if (!__classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f")) {
-        // The fallback when there is no transform (without a margin)
-        const bbox = computeCombinedBoundingBox(features, __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f"));
-        if (bbox)
-            __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokeBoundingBox).call(this, bbox, zoom);
-        return;
-    }
-    const margin = __classPrivateFieldGet(this, _SelectionUIRenderer_config, "f").boundingBox.margin;
-    const transform = __classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f");
-    let minLng = Number.POSITIVE_INFINITY;
-    let maxLng = Number.NEGATIVE_INFINITY;
-    let minLat = Number.POSITIVE_INFINITY;
-    let maxLat = Number.NEGATIVE_INFINITY;
-    for (const feature of features) {
-        const bbox = computeBoundingBox(feature, __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f"));
-        if (!bbox)
-            continue;
-        // A single-coordinate feature (such as Point) is computed from the extent of the
-        // point frame + the margin. The coordinate used is the center of the bbox (features
-        // other than Point can be zero-area too, e.g. a MultiPoint with a single point, so
-        // coordinates must not be treated as a Coordinate)
-        if (hasZeroArea(bbox)) {
-            const center = transform.project(bbox.center);
-            for (const corner of __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f").resolvePointFrameCorners(feature, center, margin)) {
-                const at = transform.unproject(corner);
-                minLng = Math.min(minLng, at.lng);
-                maxLng = Math.max(maxLng, at.lng);
-                minLat = Math.min(minLat, at.lat);
-                maxLat = Math.max(maxLat, at.lat);
-            }
-            continue;
-        }
-        const marginedBbox = applyMarginToBoundingBox(bbox, margin, transform, zoom);
-        const corners = [
-            marginedBbox.topLeft,
-            marginedBbox.topRight,
-            marginedBbox.bottomRight,
-            marginedBbox.bottomLeft,
-        ];
-        for (const corner of corners) {
-            minLng = Math.min(minLng, corner[0]);
-            maxLng = Math.max(maxLng, corner[0]);
-            minLat = Math.min(minLat, corner[1]);
-            maxLat = Math.max(maxLat, corner[1]);
-        }
-    }
-    if (!Number.isFinite(minLng))
-        return;
-    const coords = [
-        [minLng, maxLat],
-        [maxLng, maxLat],
-        [maxLng, minLat],
-        [minLng, minLat],
-        [minLng, maxLat],
-    ];
-    __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokePath).call(this, coords, zoom);
 }, _SelectionUIRenderer_drawBoundingBoxWithMargin = function _SelectionUIRenderer_drawBoundingBoxWithMargin(features, zoom) {
     const bbox = computeCombinedBoundingBox(features, __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f"));
     if (!bbox)
         return;
     __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokeBoundingBox).call(this, __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_applyMargin).call(this, bbox, zoom), zoom);
 }, _SelectionUIRenderer_drawPointBoundingBox = function _SelectionUIRenderer_drawPointBoundingBox(feature, coord, zoom) {
-    if (!__classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f"))
+    const frame = __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_pointFrame).call(this, feature, coord);
+    const projectionData = __classPrivateFieldGet(this, _SelectionUIRenderer_projectionData, "f");
+    if (!frame || !projectionData)
         return;
+    const { x, y } = frame.center;
+    __classPrivateFieldGet(this, _SelectionUIRenderer_outlineRenderer, "f").draw([coord[0], coord[1]], frame.elevationMeters, frame.corners.map((corner) => ({ x: corner.x - x, y: corner.y - y })), __classPrivateFieldGet(this, _SelectionUIRenderer_config, "f").boundingBox.stroke, anchorGhostOpacity(__classPrivateFieldGet(this, _SelectionUIRenderer_terrain, "f"), coord[0], coord[1]), zoom, projectionData);
+}, _SelectionUIRenderer_pointFrame = function _SelectionUIRenderer_pointFrame(feature, coord) {
     const transform = __classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f");
-    const center = transform.project(coord);
+    if (!transform)
+        return null;
+    const terrain = __classPrivateFieldGet(this, _SelectionUIRenderer_terrain, "f");
+    const elevationMeters = anchorElevationMeters(terrain, coord[0], coord[1]);
+    const center = isAnchorActive(terrain)
+        ? projectAnchorAt(terrain, coord[0], coord[1], elevationMeters)
+        : transform.project(coord);
+    if (!center)
+        return null;
     const margin = __classPrivateFieldGet(this, _SelectionUIRenderer_config, "f").boundingBox.margin;
-    const coords = __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f")
-        .resolvePointFrameCorners(feature, center, margin)
-        .map((corner) => {
-        const at = transform.unproject(corner);
-        return [at.lng, at.lat];
-    });
-    coords.push(coords[0]);
-    __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokePath).call(this, coords, zoom);
+    const corners = __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f").resolvePointFrameCorners(feature, center, margin);
+    return { anchor: coord, elevationMeters, center, corners };
 }, _SelectionUIRenderer_applyMargin = function _SelectionUIRenderer_applyMargin(bbox, zoom) {
     if (!__classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f"))
         return bbox;
@@ -193,12 +152,5 @@ _SelectionUIRenderer_strokeRenderer = new WeakMap(), _SelectionUIRenderer_extens
     const corners = [bbox.topLeft, bbox.topRight, bbox.bottomRight, bbox.bottomLeft];
     __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokePath).call(this, [...corners, bbox.topLeft], zoom);
 }, _SelectionUIRenderer_strokePath = function _SelectionUIRenderer_strokePath(coords, zoom) {
-    __classPrivateFieldGet(this, _SelectionUIRenderer_strokeRenderer, "f").draw(coords, __classPrivateFieldGet(this, _SelectionUIRenderer_config, "f").boundingBox.stroke, {
-        widthUnit: 'pixels',
-        closed: true,
-        // The frame follows the ground. The elevation comes from the same function as the
-        // handles, so the corners of the frame always match the corner handles and never
-        // drift from the position that can be grabbed
-        followTerrain: true,
-    }, zoom, __classPrivateFieldGet(this, _SelectionUIRenderer_projectionData, "f") ?? undefined);
+    __classPrivateFieldGet(this, _SelectionUIRenderer_strokeRenderer, "f").draw(coords, __classPrivateFieldGet(this, _SelectionUIRenderer_config, "f").boundingBox.stroke, { widthUnit: 'pixels', closed: true, followTerrain: true }, zoom, __classPrivateFieldGet(this, _SelectionUIRenderer_projectionData, "f") ?? undefined);
 };

package/dist/view/ui/selection-ui-drawer.js

@@ -1,6 +1,7 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
 import { THINNING_VIEWPORT_MARGIN_PX } from '../../shared/config/selection.js';
+import { createCoordinateTransform } from '../../shared/math/index.js';
 import { supportsVertexEditing } from '../../shared/utils/coordinates.js';
 import { isGlobeProjection } from '../../shared/utils/map.js';
 import { isLocallyHidden } from '../../store/local-visibility.js';
@@ -25,14 +26,9 @@ isLocked = false) {
     if (pointInstanceRenderer) {
         pointInstanceRenderer.setProjectionData(projectionData);
     }
-    // Set the coordinate transform
-    const coordinateTransform = {
-        project: (lngLat) => map.project([lngLat[0], lngLat[1]]),
-        unproject: (point) => {
-            const ll = map.unproject([point.x, point.y]);
-            return { lng: ll.lng, lat: ll.lat };
-        },
-    };
+    // Set the coordinate transform: the projection the markers are drawn with and the hit
+    // testing uses (the anchor projection while the terrain is on, the map's otherwise)
+    const coordinateTransform = createCoordinateTransform(map);
     selectionUIRenderer.setTransform(coordinateTransform);
     selectionUIRenderer.setProjectionData(projectionData);
     selectionHandlesRenderer.setTransform(coordinateTransform);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakuzu/maplibre-gl-draw",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "WebGL2 drawing and editing engine for MapLibre GL JS: points, lines, and polygons rendered in a custom layer, with selection, hit testing, and geometry utilities.",
   "keywords": [
     "maplibre",