@sakuzu/maplibre-gl-draw 2.1.1 → 2.1.2

package/CHANGELOG.md

@@ -6,13 +6,36 @@ the project follows semantic versioning.
 
 ## [Unreleased]
 
+## [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 +1191,8 @@ 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.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/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/view/layer/renderers.js

@@ -35,7 +35,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, 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);
@@ -79,6 +79,7 @@ export function initRenderers(deps) {
         sdfLineRenderer,
         polygonBatchRenderer,
         sdfPolygonRenderer,
+        fillShaderManager,
     });
     const batchManager = new BatchManager({
         gl,

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

@@ -3,6 +3,7 @@ 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';
@@ -20,6 +21,8 @@ export interface ShaderInitializerRenderers {
     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, pointShapeRenderer, pointInstanceRenderer, sdfLineRenderer, polygonBatchRenderer, sdfPolygonRenderer, fillShaderManager, } = this.renderers;
         if (featureDrawer) {
             featureDrawer.ensureShader(shaderData);
         }
@@ -51,6 +51,7 @@ export class ShaderInitializer {
         if (sdfPolygonRenderer) {
             sdfPolygonRenderer.ensureShader(shaderData);
         }
+        fillShaderManager?.ensureShader(shaderData);
     }
     /**
      * Sets the projection data on the renderers that need it
@@ -79,7 +80,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, pointShapeRenderer, pointInstanceRenderer, sdfLineRenderer, polygonBatchRenderer, sdfPolygonRenderer, fillShaderManager, } = this.renderers;
         if (featureDrawer) {
             featureDrawer.setOffsetUniforms(uniforms);
         }
@@ -107,6 +108,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

@@ -10,11 +10,12 @@ 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 { 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, 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,31 @@ 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_extensions, _SelectionUIRenderer_terrain, _SelectionUIRenderer_config, _SelectionUIRenderer_transform, _SelectionUIRenderer_projectionData, _SelectionUIRenderer_drawRotatingBoundingBox, _SelectionUIRenderer_drawIndividualBoundingBox, _SelectionUIRenderer_drawCombinedBoundingBox, _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 { computeBoundingBox, computeCombinedBoundingBox, hasZeroArea, rotateBoundingBox, } from './bounding-box.js';
+/**
+ * How far the positions differ that the scale of the screen around a point is measured
+ * between, in pixels at the zoom of the frame
+ */
+const POINT_FRAME_PROBE_PX = 4;
 export class SelectionUIRenderer {
-    constructor(strokeRenderer, config, extensions) {
+    constructor(strokeRenderer, config, extensions, terrain = new TerrainContext()) {
         _SelectionUIRenderer_instances.add(this);
         _SelectionUIRenderer_strokeRenderer.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_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) {
@@ -80,7 +90,7 @@ export class SelectionUIRenderer {
         __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_drawCombinedBoundingBox).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_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)
@@ -124,17 +134,16 @@ _SelectionUIRenderer_strokeRenderer = new WeakMap(), _SelectionUIRenderer_extens
         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)
+        // point frame + the margin, as its own frame is (#pointFrame). 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);
+            const frame = __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_pointFrame).call(this, feature, bbox.center, zoom);
+            for (const [lng, lat] of frame?.coords ?? []) {
+                minLng = Math.min(minLng, lng);
+                maxLng = Math.max(maxLng, lng);
+                minLat = Math.min(minLat, lat);
+                maxLat = Math.max(maxLat, lat);
             }
             continue;
         }
@@ -168,19 +177,37 @@ _SelectionUIRenderer_strokeRenderer = new WeakMap(), _SelectionUIRenderer_extens
         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, zoom);
+    if (!frame)
         return;
+    __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokePath).call(this, frame.coords, zoom, {
+        elevationMeters: frame.elevationMeters,
+        followTerrain: false,
+    });
+}, _SelectionUIRenderer_pointFrame = function _SelectionUIRenderer_pointFrame(feature, coord, zoom) {
     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 anchored = isAnchorActive(terrain);
+    const project = (at) => anchored ? projectAnchorAt(terrain, at[0], at[1], elevationMeters) : transform.project(at);
+    const center = 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 corners = __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f").resolvePointFrameCorners(feature, center, margin);
+    const toPosition = anchored ? screenToPlane(project, coord, center, zoom) : null;
+    const coords = corners.map((corner) => {
+        const position = toPosition?.(corner);
+        if (position)
+            return position;
+        // No terrain, or the plane seen edge on: the corner is cast onto the map
         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);
+    return { coords, elevationMeters };
 }, _SelectionUIRenderer_applyMargin = function _SelectionUIRenderer_applyMargin(bbox, zoom) {
     if (!__classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f"))
         return bbox;
@@ -192,13 +219,49 @@ _SelectionUIRenderer_strokeRenderer = new WeakMap(), _SelectionUIRenderer_extens
 }, _SelectionUIRenderer_strokeBoundingBox = function _SelectionUIRenderer_strokeBoundingBox(bbox, zoom) {
     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) {
+}, _SelectionUIRenderer_strokePath = function _SelectionUIRenderer_strokePath(coords, zoom, placement = { followTerrain: true }) {
     __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,
+        followTerrain: placement.followTerrain,
+        ...(placement.elevationMeters !== undefined && {
+            elevationMeters: placement.elevationMeters,
+        }),
     }, zoom, __classPrivateFieldGet(this, _SelectionUIRenderer_projectionData, "f") ?? undefined);
 };
+/**
+ * The inverse of a projection around a point, to the first order: a point of the screen near
+ * `center` to the position whose projection it is
+ *
+ * The scale of the screen along the longitude and the latitude is measured by projecting
+ * positions a few pixels to either side of `coord`.
+ *
+ * @returns null when the projection is degenerate there (seen edge on, or a probe behind the
+ *   camera)
+ */
+function screenToPlane(project, coord, center, zoom) {
+    const [lng, lat] = coord;
+    // Degrees of longitude per pixel at the zoom on a 512 px world, a few pixels' worth
+    const step = (360 / (512 * 2 ** zoom)) * POINT_FRAME_PROBE_PX;
+    const latStep = Math.min(step, Math.max(1e-9, (89.9 - Math.abs(lat)) / 2));
+    const east = project([lng + step, lat]);
+    const west = project([lng - step, lat]);
+    const north = project([lng, lat + latStep]);
+    const south = project([lng, lat - latStep]);
+    if (!east || !west || !north || !south)
+        return null;
+    // The screen per degree of longitude (a, c) and of latitude (b, d)
+    const a = (east.x - west.x) / (2 * step);
+    const c = (east.y - west.y) / (2 * step);
+    const b = (north.x - south.x) / (2 * latStep);
+    const d = (north.y - south.y) / (2 * latStep);
+    const det = a * d - b * c;
+    const scale = Math.max(Math.abs(a), Math.abs(b), Math.abs(c), Math.abs(d));
+    if (!Number.isFinite(det) || Math.abs(det) <= 1e-12 * scale * scale)
+        return null;
+    return (point) => {
+        const dx = point.x - center.x;
+        const dy = point.y - center.y;
+        return [lng + (d * dx - b * dy) / det, lat + (a * dy - c * dx) / det];
+    };
+}

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.2",
   "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",