@orbat-mapper/tactical-draw-adapter-maplibre 0.2.0-alpha.2 → 0.2.0-alpha.20

package/dist/index.d.mts

@@ -1,34 +1,88 @@
-import { BaseMapAdapter, EditPointerDriver, FeatureOps, LayerId, MapCursor, NativeEventEntry, PickHandler, PickOptions, PixelCoordinate, StyleOptions } from "@orbat-mapper/tactical-draw";
+import { BaseMapAdapter, EditPointerDriver, FeatureGroup, IconResource, LayerId, MapCursor, NativeEventEntry, PickHandler, PickOptions, PixelCoordinate, StyleOptions } from "@orbat-mapper/tactical-draw";
 import maplibregl from "maplibre-gl";
-import { Position } from "geojson";
+import { Feature, Position } from "geojson";
 
 //#region src/ml-adapter.d.ts
 interface MapLibreLayerHandle {
   sourceId: string;
   /** MapLibre layer ids created for this logical layer (fill, line, circle, symbol) */
   mlLayerIds: string[];
+  groupBundles: Map<string, MapLibreGroupBundle>;
+  groupOrder: string[];
+  nextGroupBundleId: number;
   style?: StyleOptions;
 }
+type PaintChannel = "fill" | "fill-pattern" | "line" | "circle" | "icon" | "text";
+interface MapLibreGroupBundle {
+  readonly sourceId: string;
+  readonly layerIds: Map<PaintChannel, string>;
+  features: readonly Feature[];
+  featureSignature: string;
+  requiredIconIds: ReadonlySet<string>;
+}
 type MapLibreEventToken = (e: any) => void;
 interface MapLibreViewToken {
   fn: () => void;
 }
+interface MapLibreAdapterOptions {
+  /**
+   * How view changes propagate to view-state refits. "continuous" (default)
+   * refits on every frame of an animated zoom/rotate/pitch; "settle" defers
+   * the refit until the animation ends.
+   */
+  viewChangeMode?: "continuous" | "settle";
+}
 declare class MapLibreAdapter extends BaseMapAdapter<MapLibreLayerHandle, MapLibreEventToken, MapLibreViewToken> {
   private map;
-  constructor(map: maplibregl.Map);
+  private readonly viewChangeMode;
+  private readonly pendingIconImages;
+  readonly scalesGroundPointSymbolsNatively = true;
+  constructor(map: maplibregl.Map, options?: MapLibreAdapterOptions);
   private toContinuousLng;
   protected createLayer(layerId: LayerId, style?: StyleOptions): MapLibreLayerHandle;
   protected destroyLayer(handle: MapLibreLayerHandle): void;
-  protected applyFeatureOps(layerId: LayerId, ops: FeatureOps): void;
+  protected applyFeatureGroups(layerId: LayerId, groups: readonly FeatureGroup[]): void;
+  private createGroupBundle;
+  private destroyGroupBundle;
+  private clearGroupBundles;
+  private requiredIconIds;
+  private reconcileGroupChannels;
+  private buildGroupLayer;
+  private updateGroupBundleSource;
+  private orderGroupBundles;
+  private nativeLayerIds;
+  /**
+   * Promote a source feature for MapLibre: stamp `_fid` (so data-driven paint
+   * and picks can key on the caller's feature id) and, for a hatch-patterned
+   * Polygon, `_fillPatternImageId` (registering the tile image on demand). At
+   * most one object spread — a feature needing neither passes through
+   * untouched.
+   */
+  private promoteFeature;
+  /**
+   * Resolve a hatch-patterned Polygon's `style.fillPattern`/`fillColor` to its
+   * hatch-tile image id, registering the image on demand. Returns `undefined`
+   * for features without a hatch pattern, so `fillPatternImageId` stays the
+   * single source of truth for the id baked into `_fillPatternImageId`.
+   */
+  private resolveFillPatternImage;
+  /** Register a hatch-tile image once per (color, pattern) pair, keyed by `fillPatternImageId`. */
+  private ensureFillPatternImage;
+  protected applyIconResources(resources: readonly IconResource[]): void;
+  protected removeIconResource(id: string): void;
   protected attachNativeEvent(type: "click" | "pointermove" | "dblclick", onEvent: (lonLat: Position, pixel: PixelCoordinate, originalEvent: unknown) => void): NativeEventEntry<MapLibreEventToken>;
   protected detachNativeEvent(entry: NativeEventEntry<MapLibreEventToken>): void;
   protected attachViewChange(handler: () => void): MapLibreViewToken;
   protected detachViewChange(token: MapLibreViewToken): void;
+  private viewChangeEvents;
   createEditPointerDriver(): EditPointerDriver;
   setLayerStyle(layerId: LayerId, style: StyleOptions): void;
+  private legacyPaintChannel;
+  private applyChannelStyle;
   toLonLat(coordinate: number[]): Position;
   fromLonLat(position: Position): number[];
   getPixelFromCoordinate(position: Position): PixelCoordinate | null;
+  getCoordinateFromPixel(pixel: PixelCoordinate): Position | null;
   getViewportSize(): {
     width: number;
     height: number;
@@ -40,8 +94,9 @@ declare class MapLibreAdapter extends BaseMapAdapter<MapLibreLayerHandle, MapLib
   setDoubleClickZoomEnabled(enabled: boolean): void;
   getResolution(): number | undefined;
   getZoom(): number | undefined;
+  getBearing(): number;
   onPick(layerId: LayerId, handler: PickHandler, opts?: PickOptions): () => void;
   setGlobeMode(enabled: boolean): void;
 }
 //#endregion
-export { MapLibreAdapter };
+export { MapLibreAdapter, type MapLibreAdapterOptions };

package/dist/index.mjs

@@ -1,6 +1,67 @@
 import { project, unproject } from "@orbat-mapper/control-measures";
-import { BaseMapAdapter, PointerCallbackHub, TOUCH_HIT_TOLERANCE_PX, bindAbortable, nearestWorldCopyLng, pickHitTolerance, tryControlMeasureIdFromFeature } from "@orbat-mapper/tactical-draw";
+import { BaseMapAdapter, DEFAULT_TEXT_SIZE_MAX_PIXELS, DEFAULT_TEXT_SIZE_MIN_PIXELS, HATCH_PATTERNS, PointerCallbackHub, TEXT_HALO_COLOR, TOUCH_HIT_TOLERANCE_PX, bindAbortable, evaluatePickCandidates, fillPatternImageId, makeFillPatternImage, mergeNativeAndCachedPickFeatures, nearestWorldCopyLng, pickHitTolerance, pickPointerType } from "@orbat-mapper/tactical-draw";
 //#region src/ml-adapter.ts
+/** Feature property key for the resolved hatch-pattern image id (see `promoteFeature`). */
+const FILL_PATTERN_IMAGE_ID_PROPERTY = "_fillPatternImageId";
+const DEFAULT_LINE_COLOR = "#000";
+const DEFAULT_LINE_WIDTH = 2;
+function isHatchPattern(value) {
+	return HATCH_PATTERNS.includes(value);
+}
+const PAINT_CHANNELS = [
+	"fill",
+	"fill-pattern",
+	"line",
+	"circle",
+	"icon",
+	"text"
+];
+function firstBundleLayerId(bundle) {
+	for (const channel of PAINT_CHANNELS) {
+		const layerId = bundle.layerIds.get(channel);
+		if (layerId) return layerId;
+	}
+}
+/**
+* Find the largest subset of bundles whose relative order already matches the
+* desired stack. Reorders then move only the remaining bundles.
+*/
+function longestStableGroupIds(previousGroupIds, desiredGroupIds) {
+	const previousIndices = new Map(previousGroupIds.map((groupId, index) => [groupId, index]));
+	const sequence = desiredGroupIds.flatMap((groupId) => {
+		const previousIndex = previousIndices.get(groupId);
+		return previousIndex === void 0 ? [] : [{
+			groupId,
+			previousIndex
+		}];
+	});
+	const tails = [];
+	const tailSequenceIndices = [];
+	const predecessors = new Array(sequence.length).fill(-1);
+	for (let sequenceIndex = 0; sequenceIndex < sequence.length; sequenceIndex++) {
+		const previousIndex = sequence[sequenceIndex].previousIndex;
+		let low = 0;
+		let high = tails.length;
+		while (low < high) {
+			const middle = low + high >>> 1;
+			if (tails[middle] < previousIndex) low = middle + 1;
+			else high = middle;
+		}
+		if (low > 0) predecessors[sequenceIndex] = tailSequenceIndices[low - 1];
+		tails[low] = previousIndex;
+		tailSequenceIndices[low] = sequenceIndex;
+	}
+	const stableGroupIds = /* @__PURE__ */ new Set();
+	let sequenceIndex = tailSequenceIndices.at(-1);
+	while (sequenceIndex !== void 0 && sequenceIndex >= 0) {
+		stableGroupIds.add(sequence[sequenceIndex].groupId);
+		sequenceIndex = predecessors[sequenceIndex];
+	}
+	return stableGroupIds;
+}
+function isPromiseLike(value) {
+	return (typeof value === "object" || typeof value === "function") && value !== null && typeof value.then === "function";
+}
 function emptyFC() {
 	return {
 		type: "FeatureCollection",
@@ -52,51 +113,218 @@ function buildCirclePointFilter(style) {
 			"$type",
 			"Point"
 		],
+		["!has", "iconId"],
 		["!has", style.text.labelProperty]
 	] : [
-		"==",
-		"$type",
-		"Point"
+		"all",
+		[
+			"==",
+			"$type",
+			"Point"
+		],
+		["!has", "iconId"]
 	];
 }
-function buildTextSizeExpression() {
-	const size = [
+function buildIconLayer(id, source) {
+	return {
+		id,
+		type: "symbol",
+		source,
+		filter: [
+			"all",
+			[
+				"==",
+				"$type",
+				"Point"
+			],
+			["has", "iconId"]
+		],
+		layout: {
+			"icon-image": ["get", "iconId"],
+			"icon-size": buildIconSizeExpression(),
+			"icon-rotate": [
+				"*",
+				[
+					"coalesce",
+					["get", "iconRotation"],
+					0
+				],
+				180 / Math.PI
+			],
+			"icon-rotation-alignment": "viewport",
+			"icon-pitch-alignment": "viewport",
+			"icon-allow-overlap": true,
+			"icon-ignore-placement": true,
+			"symbol-z-order": "source"
+		},
+		paint: { "icon-opacity": [
+			"coalesce",
+			["get", "iconOpacity"],
+			1
+		] }
+	};
+}
+function centeredSvg(resource) {
+	const halfWidth = Math.max(resource.anchor[0], resource.width - resource.anchor[0]);
+	const halfHeight = Math.max(resource.anchor[1], resource.height - resource.anchor[1]);
+	const width = halfWidth * 2;
+	const height = halfHeight * 2;
+	return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><g transform="translate(${halfWidth - resource.anchor[0]} ${halfHeight - resource.anchor[1]})">${resource.svg}</g></svg>`;
+}
+/** Web Mercator world circumference in meters (2π × 6378137). */
+const WEB_MERCATOR_CIRCUMFERENCE = 40075016.686;
+/**
+* Per-feature text size (ADR-0028): a ground-anchored label carries
+* `textSizeMeters` and renders at `textSizeMeters / resolution`, clamped to
+* the layer's `textSizeMinPixels`/`textSizeMaxPixels` band; a screen-anchored
+* one carries `textSizePixels` and renders at that constant; neither renders
+* the 14px engine default. Layout properties only take zoom as an
+* `interpolate`/`step` input, so the ground conversion is evaluated at every
+* integer zoom stop (resolution = world circumference / 512·2^zoom pixels,
+* matching `getResolution`); the linear ramp between stops approximates the
+* exponential exactly closely enough at 1-zoom granularity.
+*/
+function buildTextSizeExpression(text) {
+	const minPx = text.textSizeMinPixels ?? DEFAULT_TEXT_SIZE_MIN_PIXELS;
+	const maxPx = text.textSizeMaxPixels ?? DEFAULT_TEXT_SIZE_MAX_PIXELS;
+	const screenOrDefault = [
 		"coalesce",
 		["get", "textSizePixels"],
 		14
 	];
-	const referenceZoom = [
+	const sizeAtZoom = (zoom) => {
+		const groundPx = [
+			"*",
+			["get", "textSizeMeters"],
+			Math.pow(2, zoom + 9) / WEB_MERCATOR_CIRCUMFERENCE
+		];
+		return [
+			"case",
+			["has", "textSizeMeters"],
+			[
+				"case",
+				["has", "textMaxSizePixels"],
+				[
+					"min",
+					["get", "textMaxSizePixels"],
+					groundPx
+				],
+				[
+					"min",
+					maxPx,
+					[
+						"max",
+						minPx,
+						groundPx
+					]
+				]
+			],
+			screenOrDefault
+		];
+	};
+	return [
+		"interpolate",
+		["linear"],
+		["zoom"],
+		...Array.from({ length: 25 }, (_, zoom) => [zoom, sizeAtZoom(zoom)]).flat()
+	];
+}
+/**
+* Companion to `buildTextSizeExpression` (ADR-0037): drives `text-opacity` to
+* 0 once a ground-anchored Text graphic's derived on-screen size exceeds its
+* `textMaxSizePixels` threshold, 1 otherwise (including every feature without
+* a threshold, e.g. amplifier labels). Layout properties like `text-size`
+* cannot represent "hidden", so hiding is a paint-property concern; `step`
+* (rather than `interpolate`) is enough since opacity only ever needs to
+* flip at a stop, evaluated at the same per-zoom granularity as the size
+* expression.
+*/
+const TEXT_OPACITY_EXPRESSION = (() => {
+	const opacityAtZoom = (zoom) => {
+		return [
+			"case",
+			[
+				"all",
+				["has", "textSizeMeters"],
+				["has", "textMaxSizePixels"]
+			],
+			[
+				"case",
+				[
+					">",
+					[
+						"*",
+						["get", "textSizeMeters"],
+						Math.pow(2, zoom + 9) / WEB_MERCATOR_CIRCUMFERENCE
+					],
+					["get", "textMaxSizePixels"]
+				],
+				0,
+				1
+			],
+			1
+		];
+	};
+	const stops = Array.from({ length: 25 }, (_, zoom) => zoom);
+	return [
+		"step",
+		["zoom"],
+		opacityAtZoom(0),
+		...stops.slice(1).flatMap((zoom) => [zoom, opacityAtZoom(zoom)])
+	];
+})();
+/**
+* Per-feature icon size, same zoom-stop scheme as `buildTextSizeExpression`:
+* a ground-sized point symbol carries `iconSizeMeters`/`iconOctagonSize` (and
+* optional `iconMinPixels`/`iconMaxPixels`), so the meters→pixels clamp is
+* evaluated inside the style layer at every integer zoom stop and the symbol
+* scales smoothly through animated zooms. Anything else falls back to the
+* host-computed `iconScale` snapshot.
+*/
+function buildIconSizeExpression() {
+	const minExpr = [
 		"coalesce",
-		["get", "textSizeZoom"],
+		["get", "iconMinPixels"],
 		0
 	];
-	const sizeAtZoom = (zoom) => [
-		"min",
-		254,
-		[
+	const maxExpr = [
+		"coalesce",
+		["get", "iconMaxPixels"],
+		1e9
+	];
+	const scaleAtZoom = (zoom) => {
+		return [
 			"case",
-			["has", "textSizeZoom"],
+			["has", "iconSizeMeters"],
 			[
-				"*",
-				size,
+				"/",
 				[
-					"^",
-					2,
+					"max",
+					minExpr,
 					[
-						"-",
-						zoom,
-						referenceZoom
+						"min",
+						maxExpr,
+						[
+							"*",
+							["get", "iconSizeMeters"],
+							Math.pow(2, zoom + 9) / WEB_MERCATOR_CIRCUMFERENCE
+						]
 					]
-				]
+				],
+				["get", "iconOctagonSize"]
 			],
-			size
-		]
-	];
+			[
+				"coalesce",
+				["get", "iconScale"],
+				1
+			]
+		];
+	};
 	return [
 		"interpolate",
 		["linear"],
 		["zoom"],
-		...Array.from({ length: 25 }, (_, zoom) => [zoom, sizeAtZoom(zoom)]).flat()
+		...Array.from({ length: 25 }, (_, zoom) => [zoom, scaleAtZoom(zoom)]).flat()
 	];
 }
 /**
@@ -104,6 +332,94 @@ function buildTextSizeExpression() {
 * `properties.style.fillColor` overlay. Mirrors `buildCirclePaint`.
 */
 /**
+* Per-feature `text-field` value: the layer's literal text, or the feature's
+* `labelProperty` value, uppercased when the feature's `textStyle` is
+* `"caps"`. Factored out of `buildSymbolLayer` so `setLayerStyle`'s
+* incremental `text-field` update (below) can reuse it instead of
+* regressing to a caps-unaware plain `["get", ...]`.
+*/
+function buildTextFieldExpression(text) {
+	const rawTextField = text.labelProperty ? ["get", text.labelProperty] : text.text ?? "";
+	return text.labelProperty ? [
+		"case",
+		[
+			"==",
+			["get", "textStyle"],
+			"caps"
+		],
+		["upcase", rawTextField],
+		rawTextField
+	] : rawTextField;
+}
+const HAS_TEXT_HALO = [
+	"boolean",
+	["get", "textHalo"],
+	false
+];
+const HAS_TEXT_BACKGROUND = [
+	"boolean",
+	["get", "textBackground"],
+	false
+];
+/**
+* Per-feature `text-halo-color` value: `textHalo` wins over both the layer's
+* `text.strokeColor` and the `textBackground` halo, matching the OL/Leaflet
+* adapters' precedence. Factored out so `setLayerStyle`'s incremental
+* `text-halo-color` update (below) can reuse it instead of dropping the
+* `textHalo` case.
+*/
+function buildTextHaloColorExpression(text) {
+	const fallback = text.strokeColor ? text.strokeColor : [
+		"case",
+		HAS_TEXT_BACKGROUND,
+		"#ffffff",
+		"rgba(255,255,255,0)"
+	];
+	return [
+		"case",
+		HAS_TEXT_HALO,
+		[
+			"coalesce",
+			["get", "textHaloColor"],
+			TEXT_HALO_COLOR
+		],
+		fallback
+	];
+}
+/**
+* Per-feature `text-halo-width` value, mirroring
+* `buildTextHaloColorExpression`'s precedence. MapLibre's `text-halo-width`
+* already extends outward from the glyph edge, matching
+* `resolveTextHaloWidth`'s own outward-depth semantics, so the `textHalo`
+* case uses its formula directly (unlike OpenLayers's straddling canvas
+* stroke, which must double it).
+*/
+function buildTextHaloWidthExpression(text) {
+	return [
+		"case",
+		HAS_TEXT_HALO,
+		[
+			"max",
+			1.5,
+			[
+				"/",
+				[
+					"coalesce",
+					["get", "textSizePixels"],
+					24
+				],
+				8
+			]
+		],
+		text.strokeColor ? text.strokeWidth ?? 1 : [
+			"case",
+			HAS_TEXT_BACKGROUND,
+			3,
+			0
+		]
+	];
+}
+/**
 * Build the layout and paint objects for a symbol (text) layer.
 * Centralises the rotation convention so `createLayer` and `setLayerStyle`
 * stay in sync. Rotation follows the OpenLayers convention: `π − r` radians
@@ -136,25 +452,75 @@ function buildSymbolLayer(symbolId, sourceId, text) {
 		],
 		"#000"
 	];
+	const textAnchor = text.labelProperty ? [
+		"case",
+		[
+			"==",
+			["get", "textAnchor"],
+			"start"
+		],
+		"left",
+		[
+			"==",
+			["get", "textAnchor"],
+			"end"
+		],
+		"right",
+		"center"
+	] : "center";
+	const textJustify = text.labelProperty ? [
+		"case",
+		[
+			"==",
+			["get", "textJustify"],
+			"left"
+		],
+		"left",
+		[
+			"==",
+			["get", "textJustify"],
+			"right"
+		],
+		"right",
+		"center"
+	] : "center";
 	return {
 		id: symbolId,
 		type: "symbol",
 		source: sourceId,
 		layout: {
-			"text-field": text.labelProperty ? ["get", text.labelProperty] : text.text ?? "",
-			"text-font": ["Open Sans Regular"],
-			"text-size": buildTextSizeExpression(),
+			"text-field": buildTextFieldExpression(text),
+			"text-font": text.labelProperty ? [
+				"case",
+				[
+					"==",
+					["get", "textStyle"],
+					"italic"
+				],
+				["literal", ["Open Sans Italic"]],
+				[
+					"==",
+					["get", "textStyle"],
+					"light"
+				],
+				["literal", ["Open Sans Light"]],
+				["literal", ["Open Sans Regular"]]
+			] : ["Open Sans Regular"],
+			"text-size": buildTextSizeExpression(text),
 			"text-rotate": textRotate,
+			"text-anchor": textAnchor,
+			"text-justify": textJustify,
+			"text-max-width": 9999,
 			"text-rotation-alignment": "map",
 			"text-pitch-alignment": "map",
-			"text-allow-overlap": true
+			"text-allow-overlap": true,
+			"symbol-z-order": "source"
 		},
 		paint: {
 			"text-color": textColor,
-			...text.strokeColor ? {
-				"text-halo-color": text.strokeColor,
-				"text-halo-width": text.strokeWidth ?? 1
-			} : {}
+			"text-halo-color": buildTextHaloColorExpression(text),
+			"text-halo-width": buildTextHaloWidthExpression(text),
+			"text-opacity": TEXT_OPACITY_EXPRESSION
 		}
 	};
 }
@@ -176,14 +542,79 @@ function buildFillPaint(style) {
 		"fill-opacity": 1
 	};
 }
+/**
+* `properties.style.fillPattern` read as a GL expression, defaulting to
+* `"solid"`. `fillPattern` is a per-feature-only field (ADR-0007) — unlike
+* `fillColor`/`strokeColor` it has no layer-level `StyleOptions` default, so
+* this expression takes no `style` argument.
+*/
+function fillPatternField() {
+	return [
+		"coalesce",
+		[
+			"get",
+			"fillPattern",
+			[
+				"coalesce",
+				["get", "style"],
+				["literal", {}]
+			]
+		],
+		"solid"
+	];
+}
+/**
+* Filter for one of the two mutually-exclusive Polygon fill layers, keyed on
+* whether the feature's resolved `fillPattern` is a hatch pattern. The solid
+* `-fill` layer takes `hatched: false` (every Polygon except hatched ones);
+* the `-fill-pattern` layer takes `hatched: true`. Split because MapLibre's
+* `fill-color` and `fill-pattern` paints cannot coexist on one fill layer.
+*/
+function buildFillFilter(hatched) {
+	const isHatched = [
+		"in",
+		fillPatternField(),
+		["literal", [...HATCH_PATTERNS]]
+	];
+	return [
+		"all",
+		[
+			"==",
+			["geometry-type"],
+			"Polygon"
+		],
+		hatched ? isHatched : ["!", isHatched]
+	];
+}
+/**
+* Paint for the hatch-pattern fill layer. The image id is baked per-feature
+* into `properties._fillPatternImageId` (see `promoteFeature`), so the paint
+* is a plain `["get", ...]` rather than re-deriving the id as a GL expression,
+* keeping `fillPatternImageId` the single source of truth for the id string.
+*/
+const FILL_PATTERN_PAINT = {
+	"fill-pattern": ["get", FILL_PATTERN_IMAGE_ID_PROPERTY],
+	"fill-opacity": 1
+};
+const SOLID_LINE_DASH = [1, 0];
 function buildLinePaint(style) {
-	const colorDefault = style?.strokeColor ?? "#000";
-	const widthDefault = style?.strokeWidth ?? 2;
+	const colorDefault = style?.strokeColor ?? DEFAULT_LINE_COLOR;
+	const widthDefault = style?.strokeWidth ?? DEFAULT_LINE_WIDTH;
+	const dashDefault = style?.strokeDash?.length ? [...style.strokeDash] : SOLID_LINE_DASH;
 	const styleObj = [
 		"coalesce",
 		["get", "style"],
 		["literal", {}]
 	];
+	const dashExpr = [
+		"coalesce",
+		[
+			"get",
+			"strokeDash",
+			styleObj
+		],
+		["literal", dashDefault]
+	];
 	return {
 		"line-color": [
 			"coalesce",
@@ -203,14 +634,63 @@ function buildLinePaint(style) {
 			],
 			widthDefault
 		],
-		...style?.strokeDash ? { "line-dasharray": style.strokeDash } : {}
+		"line-dasharray": [
+			"case",
+			[
+				">",
+				["length", dashExpr],
+				0
+			],
+			dashExpr,
+			["literal", SOLID_LINE_DASH]
+		]
 	};
 }
+function geometryIncludes(feature, geometryTypes) {
+	const geometry = feature.geometry;
+	if (!geometry) return false;
+	if (geometry.type === "GeometryCollection") return geometry.geometries.some((candidate) => geometryTypes.has(candidate.type));
+	return geometryTypes.has(geometry.type);
+}
+const POLYGON_GEOMETRIES = new Set(["Polygon", "MultiPolygon"]);
+const LINE_GEOMETRIES = new Set([
+	"LineString",
+	"MultiLineString",
+	"Polygon",
+	"MultiPolygon"
+]);
+const POINT_GEOMETRIES = new Set(["Point", "MultiPoint"]);
+function featureStyle(feature) {
+	const style = feature.properties?.style;
+	return style && typeof style === "object" ? style : {};
+}
+function groupPaintChannels(features, style) {
+	const channels = /* @__PURE__ */ new Set();
+	for (const feature of features) {
+		if (geometryIncludes(feature, POLYGON_GEOMETRIES)) {
+			const fillPattern = featureStyle(feature).fillPattern;
+			if (featureStyle(feature).fillColor !== void 0 || style?.fillColor !== void 0 || isHatchPattern(fillPattern)) channels.add(isHatchPattern(fillPattern) ? "fill-pattern" : "fill");
+		}
+		if (geometryIncludes(feature, LINE_GEOMETRIES)) channels.add("line");
+		if (!geometryIncludes(feature, POINT_GEOMETRIES)) continue;
+		const properties = feature.properties ?? {};
+		const hasIcon = properties.iconId != null;
+		const hasText = style?.text !== void 0 && (style.text.labelProperty ? properties[style.text.labelProperty] != null : style.text.text !== void 0);
+		if (hasIcon) channels.add("icon");
+		if (hasText) channels.add("text");
+		if (!hasIcon && !hasText) channels.add("circle");
+	}
+	return channels;
+}
 var MapLibreAdapter = class extends BaseMapAdapter {
 	map;
-	constructor(map) {
+	viewChangeMode;
+	pendingIconImages = /* @__PURE__ */ new Set();
+	scalesGroundPointSymbolsNatively = true;
+	constructor(map, options = {}) {
 		super();
 		this.map = map;
+		this.viewChangeMode = options.viewChangeMode ?? "continuous";
 	}
 	toContinuousLng(lng) {
 		return nearestWorldCopyLng(lng, this.map.getCenter().lng);
@@ -228,14 +708,19 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 			id: fillId,
 			type: "fill",
 			source: sourceId,
-			filter: [
-				"==",
-				"$type",
-				"Polygon"
-			],
+			filter: buildFillFilter(false),
 			paint: buildFillPaint(style)
 		});
 		mlLayerIds.push(fillId);
+		const fillPatternId = `${layerId}-fill-pattern`;
+		this.map.addLayer({
+			id: fillPatternId,
+			type: "fill",
+			source: sourceId,
+			filter: buildFillFilter(true),
+			paint: FILL_PATTERN_PAINT
+		});
+		mlLayerIds.push(fillPatternId);
 		const lineId = `${layerId}-line`;
 		this.map.addLayer({
 			id: lineId,
@@ -270,6 +755,9 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 			paint: buildCirclePaint(style)
 		});
 		mlLayerIds.push(circleId);
+		const iconId = `${layerId}-icon`;
+		this.map.addLayer(buildIconLayer(iconId, sourceId));
+		mlLayerIds.push(iconId);
 		if (style?.text) {
 			const symbolId = `${layerId}-symbol`;
 			this.map.addLayer(buildSymbolLayer(symbolId, sourceId, style.text));
@@ -278,29 +766,238 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		return {
 			sourceId,
 			mlLayerIds,
+			groupBundles: /* @__PURE__ */ new Map(),
+			groupOrder: [],
+			nextGroupBundleId: 0,
 			style
 		};
 	}
 	destroyLayer(handle) {
+		this.clearGroupBundles(handle);
 		for (const mlId of handle.mlLayerIds) if (this.map.getLayer(mlId)) this.map.removeLayer(mlId);
 		if (this.map.getSource(handle.sourceId)) this.map.removeSource(handle.sourceId);
 	}
-	applyFeatureOps(layerId, ops) {
+	applyFeatureGroups(layerId, groups) {
 		const handle = this.layers.get(layerId);
 		if (!handle) return;
-		const source = this.map.getSource(handle.sourceId);
-		if (!source) return;
-		const features = ops.full.map((f) => f.id !== void 0 ? {
-			...f,
-			properties: {
-				...f.properties ?? {},
-				_fid: f.id
+		const desiredGroupIds = new Set(groups.map((group) => group.id));
+		const previousGroupOrder = handle.groupOrder.filter((groupId) => desiredGroupIds.has(groupId));
+		const bundlesNeedingOrder = /* @__PURE__ */ new Set();
+		for (const [groupId, bundle] of handle.groupBundles) {
+			if (desiredGroupIds.has(groupId)) continue;
+			this.destroyGroupBundle(bundle);
+			handle.groupBundles.delete(groupId);
+		}
+		for (const group of groups) {
+			let bundle = handle.groupBundles.get(group.id);
+			const isNewBundle = bundle === void 0;
+			if (!bundle) {
+				bundle = this.createGroupBundle(layerId, handle);
+				handle.groupBundles.set(group.id, bundle);
+				bundlesNeedingOrder.add(group.id);
+			}
+			const featureSignature = JSON.stringify(group.features);
+			const contentChanged = isNewBundle || bundle.featureSignature !== featureSignature;
+			const requiredIconIds = this.requiredIconIds(group);
+			const resourcesChanged = bundle.requiredIconIds.size !== requiredIconIds.size || [...bundle.requiredIconIds].some((id) => !requiredIconIds.has(id));
+			bundle.features = group.features;
+			bundle.featureSignature = featureSignature;
+			bundle.requiredIconIds = requiredIconIds;
+			if (this.reconcileGroupChannels(handle, bundle, groupPaintChannels(group.features, handle.style))) bundlesNeedingOrder.add(group.id);
+			if (contentChanged || resourcesChanged) this.updateGroupBundleSource(bundle);
+		}
+		handle.groupOrder = groups.map((group) => group.id);
+		this.orderGroupBundles(handle, previousGroupOrder, handle.groupOrder, bundlesNeedingOrder);
+	}
+	createGroupBundle(layerId, handle) {
+		const sourceId = `${layerId}-group-${++handle.nextGroupBundleId}-src`;
+		this.map.addSource(sourceId, {
+			type: "geojson",
+			data: emptyFC(),
+			promoteId: "_fid"
+		});
+		return {
+			sourceId,
+			layerIds: /* @__PURE__ */ new Map(),
+			features: [],
+			featureSignature: "[]",
+			requiredIconIds: /* @__PURE__ */ new Set()
+		};
+	}
+	destroyGroupBundle(bundle) {
+		for (const layerId of bundle.layerIds.values()) if (this.map.getLayer(layerId)) this.map.removeLayer(layerId);
+		if (this.map.getSource(bundle.sourceId)) this.map.removeSource(bundle.sourceId);
+	}
+	clearGroupBundles(handle) {
+		for (const bundle of handle.groupBundles.values()) this.destroyGroupBundle(bundle);
+		handle.groupBundles.clear();
+		handle.groupOrder = [];
+	}
+	requiredIconIds(group) {
+		const referenced = new Set(group.features.flatMap((feature) => {
+			const iconId = feature.properties?.iconId;
+			return typeof iconId === "string" ? [iconId] : [];
+		}));
+		return new Set(group.iconResources.map((resource) => resource.id).filter((resourceId) => referenced.has(resourceId)));
+	}
+	reconcileGroupChannels(handle, bundle, desiredChannels) {
+		let changed = false;
+		for (const channel of PAINT_CHANNELS) {
+			const layerId = bundle.layerIds.get(channel);
+			if (layerId && !desiredChannels.has(channel)) {
+				if (this.map.getLayer(layerId)) this.map.removeLayer(layerId);
+				bundle.layerIds.delete(channel);
+				changed = true;
+			} else if (!layerId && desiredChannels.has(channel)) {
+				const nextLayerId = `${bundle.sourceId}-${channel}`;
+				this.map.addLayer(this.buildGroupLayer(nextLayerId, bundle.sourceId, channel, handle.style), handle.mlLayerIds[0]);
+				bundle.layerIds.set(channel, nextLayerId);
+				changed = true;
 			}
-		} : f);
-		source.setData({
+		}
+		return changed;
+	}
+	buildGroupLayer(id, sourceId, channel, style) {
+		switch (channel) {
+			case "fill": return {
+				id,
+				type: "fill",
+				source: sourceId,
+				filter: buildFillFilter(false),
+				paint: buildFillPaint(style)
+			};
+			case "fill-pattern": return {
+				id,
+				type: "fill",
+				source: sourceId,
+				filter: buildFillFilter(true),
+				paint: FILL_PATTERN_PAINT
+			};
+			case "line": return {
+				id,
+				type: "line",
+				source: sourceId,
+				filter: [
+					"any",
+					[
+						"==",
+						"$type",
+						"LineString"
+					],
+					[
+						"==",
+						"$type",
+						"Polygon"
+					]
+				],
+				paint: buildLinePaint(style),
+				layout: {
+					"line-cap": "round",
+					"line-join": "round"
+				}
+			};
+			case "circle": return {
+				id,
+				type: "circle",
+				source: sourceId,
+				filter: buildCirclePointFilter(style),
+				paint: buildCirclePaint(style)
+			};
+			case "icon": return buildIconLayer(id, sourceId);
+			case "text":
+				if (!style?.text) throw new Error("Cannot create a MapLibre text channel without text style");
+				return buildSymbolLayer(id, sourceId, style.text);
+		}
+	}
+	updateGroupBundleSource(bundle) {
+		const source = this.map.getSource(bundle.sourceId);
+		if (!source) return;
+		const features = [...bundle.requiredIconIds].every((id) => this.map.hasImage(id)) ? bundle.features.map((feature) => this.promoteFeature(feature)) : [];
+		const result = source.setData({
 			type: "FeatureCollection",
 			features
-		});
+		}, true);
+		if (isPromiseLike(result)) Promise.resolve(result).catch(() => {});
+	}
+	orderGroupBundles(handle, previousGroupIds, desiredGroupIds, forcedGroupIds) {
+		let beforeId = handle.mlLayerIds[0];
+		if (!beforeId) return;
+		const stableGroupIds = longestStableGroupIds(previousGroupIds, desiredGroupIds);
+		for (let index = desiredGroupIds.length - 1; index >= 0; index--) {
+			const groupId = desiredGroupIds[index];
+			const bundle = handle.groupBundles.get(groupId);
+			if (!bundle) continue;
+			if (!stableGroupIds.has(groupId) || forcedGroupIds.has(groupId)) for (const channel of PAINT_CHANNELS) {
+				const layerId = bundle.layerIds.get(channel);
+				if (layerId && this.map.getLayer(layerId)) this.map.moveLayer(layerId, beforeId);
+			}
+			beforeId = firstBundleLayerId(bundle) ?? beforeId;
+		}
+	}
+	nativeLayerIds(handle) {
+		return [...handle.mlLayerIds, ...[...handle.groupBundles.values()].flatMap((bundle) => [...bundle.layerIds.values()])];
+	}
+	/**
+	* Promote a source feature for MapLibre: stamp `_fid` (so data-driven paint
+	* and picks can key on the caller's feature id) and, for a hatch-patterned
+	* Polygon, `_fillPatternImageId` (registering the tile image on demand). At
+	* most one object spread — a feature needing neither passes through
+	* untouched.
+	*/
+	promoteFeature(feature) {
+		const extra = {};
+		if (feature.id !== void 0) extra._fid = feature.id;
+		const imageId = this.resolveFillPatternImage(feature);
+		if (imageId !== void 0) extra[FILL_PATTERN_IMAGE_ID_PROPERTY] = imageId;
+		if (Object.keys(extra).length === 0) return feature;
+		return {
+			...feature,
+			properties: {
+				...feature.properties ?? {},
+				...extra
+			}
+		};
+	}
+	/**
+	* Resolve a hatch-patterned Polygon's `style.fillPattern`/`fillColor` to its
+	* hatch-tile image id, registering the image on demand. Returns `undefined`
+	* for features without a hatch pattern, so `fillPatternImageId` stays the
+	* single source of truth for the id baked into `_fillPatternImageId`.
+	*/
+	resolveFillPatternImage(feature) {
+		const props = feature.properties;
+		const pattern = props?.style?.fillPattern;
+		if (!isHatchPattern(pattern)) return void 0;
+		const color = props?.fillColor ?? props?.style?.fillColor ?? "rgba(0,0,0,0)";
+		const imageId = fillPatternImageId(color, pattern);
+		this.ensureFillPatternImage(imageId, color, pattern);
+		return imageId;
+	}
+	/** Register a hatch-tile image once per (color, pattern) pair, keyed by `fillPatternImageId`. */
+	ensureFillPatternImage(imageId, color, pattern) {
+		if (this.map.hasImage(imageId)) return;
+		const image = makeFillPatternImage(color, pattern, 2);
+		this.map.addImage(imageId, image, { pixelRatio: 2 });
+	}
+	applyIconResources(resources) {
+		if (typeof Image === "undefined") return;
+		for (const resource of resources) {
+			if (this.map.hasImage(resource.id) || this.pendingIconImages.has(resource.id)) continue;
+			this.pendingIconImages.add(resource.id);
+			const image = new Image();
+			image.onload = () => {
+				if (!this.pendingIconImages.has(resource.id)) return;
+				this.pendingIconImages.delete(resource.id);
+				if (!this.map.hasImage(resource.id)) this.map.addImage(resource.id, image);
+				for (const handle of this.layers.values()) for (const bundle of handle.groupBundles.values()) if (bundle.requiredIconIds.has(resource.id)) this.updateGroupBundleSource(bundle);
+			};
+			image.onerror = () => this.pendingIconImages.delete(resource.id);
+			image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(centeredSvg(resource))}`;
+		}
+	}
+	removeIconResource(id) {
+		this.pendingIconImages.delete(id);
+		if (this.map.hasImage(id)) this.map.removeImage(id);
 	}
 	attachNativeEvent(type, onEvent) {
 		const mlEvent = type === "pointermove" ? "mousemove" : type === "dblclick" ? "dblclick" : "click";
@@ -318,17 +1015,19 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 	}
 	attachViewChange(handler) {
 		const fn = () => handler();
-		this.map.on("zoom", fn);
-		this.map.on("rotate", fn);
-		this.map.on("pitch", fn);
-		this.map.on("moveend", fn);
+		for (const event of this.viewChangeEvents()) this.map.on(event, fn);
 		return { fn };
 	}
 	detachViewChange(token) {
-		this.map.off("zoom", token.fn);
-		this.map.off("rotate", token.fn);
-		this.map.off("pitch", token.fn);
-		this.map.off("moveend", token.fn);
+		for (const event of this.viewChangeEvents()) this.map.off(event, token.fn);
+	}
+	viewChangeEvents() {
+		return this.viewChangeMode === "settle" ? ["moveend"] : [
+			"zoom",
+			"rotate",
+			"pitch",
+			"moveend"
+		];
 	}
 	createEditPointerDriver() {
 		const map = this.map;
@@ -338,7 +1037,10 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		let disposed = false;
 		let touchDragActive = false;
 		let multiTouchCancelled = false;
-		const TOUCH_INFO = { hitTolerance: TOUCH_HIT_TOLERANCE_PX };
+		const touchInfo = (e) => ({
+			hitTolerance: TOUCH_HIT_TOLERANCE_PX,
+			native: e.originalEvent
+		});
 		const preventMapEventDefaults = (e) => {
 			e.preventDefault();
 			e.originalEvent.preventDefault?.();
@@ -346,22 +1048,32 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		};
 		const onDown = (e) => {
 			const px = [e.point.x, e.point.y];
-			const info = { altKey: e.originalEvent.altKey };
+			const info = {
+				altKey: e.originalEvent.altKey,
+				shiftKey: e.originalEvent.shiftKey,
+				native: e.originalEvent
+			};
 			hub.fireDown(px, info);
 		};
 		const onMove = (e) => {
 			const px = [e.point.x, e.point.y];
-			hub.fireMove(px);
+			hub.fireMove(px, {
+				shiftKey: e.originalEvent.shiftKey,
+				native: e.originalEvent
+			});
 		};
 		const onUp = (e) => {
 			const px = [e.point.x, e.point.y];
-			hub.fireUp(px);
+			hub.fireUp(px, {
+				shiftKey: e.originalEvent.shiftKey,
+				native: e.originalEvent
+			});
 		};
 		const onTouchStart = (e) => {
 			if (e.points.length !== 1) return;
 			const before = dragPanWasEnabled;
 			const px = [e.point.x, e.point.y];
-			hub.fireDown(px, TOUCH_INFO);
+			hub.fireDown(px, touchInfo(e));
 			touchDragActive = dragPanWasEnabled !== before;
 			if (touchDragActive) preventMapEventDefaults(e);
 		};
@@ -370,20 +1082,20 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 			const px = [e.point.x, e.point.y];
 			if (touchCount > 1 && touchDragActive && !multiTouchCancelled) {
 				multiTouchCancelled = true;
-				hub.fireUp(px, TOUCH_INFO);
+				hub.fireUp(px, touchInfo(e));
 				touchDragActive = false;
 				preventMapEventDefaults(e);
 				return;
 			}
 			if (touchCount > 1) return;
 			if (touchCount === 1) multiTouchCancelled = false;
-			hub.fireMove(px, TOUCH_INFO);
+			hub.fireMove(px, touchInfo(e));
 			if (touchDragActive) preventMapEventDefaults(e);
 		};
 		const onTouchEnd = (e) => {
 			multiTouchCancelled = false;
 			const px = [e.point.x, e.point.y];
-			hub.fireUp(px, TOUCH_INFO);
+			hub.fireUp(px, touchInfo(e));
 			touchDragActive = false;
 		};
 		map.on("mousedown", onDown);
@@ -435,40 +1147,72 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 	setLayerStyle(layerId, style) {
 		const handle = this.layers.get(layerId);
 		if (!handle) return;
-		handle.style = style;
+		const resolvedStyle = {
+			...handle.style,
+			...style,
+			...style.text ? { text: {
+				...handle.style?.text,
+				...style.text
+			} } : {}
+		};
+		handle.style = resolvedStyle;
 		for (const mlId of handle.mlLayerIds) {
-			const layer = this.map.getLayer(mlId);
-			if (!layer) continue;
-			const type = layer.type;
-			if (type === "fill") this.map.setPaintProperty(mlId, "fill-color", buildFillPaint(style)["fill-color"]);
-			else if (type === "line") {
-				if (style.strokeColor !== void 0 || style.strokeWidth !== void 0) {
-					const paint = buildLinePaint(style);
-					if (style.strokeColor !== void 0) this.map.setPaintProperty(mlId, "line-color", paint["line-color"]);
-					if (style.strokeWidth !== void 0) this.map.setPaintProperty(mlId, "line-width", paint["line-width"]);
-				}
-				if (style.strokeDash) this.map.setPaintProperty(mlId, "line-dasharray", style.strokeDash);
-			} else if (type === "circle") {
-				const paint = buildCirclePaint(style);
-				this.map.setPaintProperty(mlId, "circle-radius", paint["circle-radius"]);
-				this.map.setPaintProperty(mlId, "circle-color", paint["circle-color"]);
-				this.map.setPaintProperty(mlId, "circle-stroke-color", paint["circle-stroke-color"]);
-				this.map.setPaintProperty(mlId, "circle-stroke-width", paint["circle-stroke-width"]);
-				this.map.setFilter(mlId, buildCirclePointFilter(style));
-			} else if (type === "symbol" && style.text) {
-				if (style.text.text) this.map.setLayoutProperty(mlId, "text-field", style.text.text);
-				else if (style.text.labelProperty) this.map.setLayoutProperty(mlId, "text-field", ["get", style.text.labelProperty]);
-				if (style.text.fillColor) this.map.setPaintProperty(mlId, "text-color", style.text.fillColor);
-				if (style.text.strokeColor) this.map.setPaintProperty(mlId, "text-halo-color", style.text.strokeColor);
-				if (style.text.strokeWidth !== void 0) this.map.setPaintProperty(mlId, "text-halo-width", style.text.strokeWidth);
-			}
+			const channel = this.legacyPaintChannel(mlId);
+			if (channel) this.applyChannelStyle(mlId, channel, style, resolvedStyle);
 		}
+		const bundlesNeedingOrder = /* @__PURE__ */ new Set();
+		for (const [groupId, bundle] of handle.groupBundles) if (this.reconcileGroupChannels(handle, bundle, groupPaintChannels(bundle.features, resolvedStyle))) bundlesNeedingOrder.add(groupId);
+		this.orderGroupBundles(handle, handle.groupOrder, handle.groupOrder, bundlesNeedingOrder);
+		for (const bundle of handle.groupBundles.values()) for (const [channel, mlId] of bundle.layerIds) this.applyChannelStyle(mlId, channel, style, resolvedStyle);
 		if (style.text && !handle.mlLayerIds.some((id) => id.endsWith("-symbol"))) {
 			const symbolId = `${layerId}-symbol`;
-			this.map.addLayer(buildSymbolLayer(symbolId, handle.sourceId, style.text));
+			this.map.addLayer(buildSymbolLayer(symbolId, handle.sourceId, resolvedStyle.text));
 			handle.mlLayerIds.push(symbolId);
 		}
 	}
+	legacyPaintChannel(layerId) {
+		if (layerId.endsWith("-fill-pattern")) return "fill-pattern";
+		if (layerId.endsWith("-fill")) return "fill";
+		if (layerId.endsWith("-line")) return "line";
+		if (layerId.endsWith("-circle")) return "circle";
+		if (layerId.endsWith("-icon")) return "icon";
+		if (layerId.endsWith("-symbol")) return "text";
+	}
+	applyChannelStyle(layerId, channel, styleUpdate, resolvedStyle) {
+		if (!this.map.getLayer(layerId)) return;
+		switch (channel) {
+			case "fill":
+				if (styleUpdate.fillColor === void 0) break;
+				this.map.setPaintProperty(layerId, "fill-color", buildFillPaint(resolvedStyle)["fill-color"]);
+				break;
+			case "fill-pattern": break;
+			case "line": {
+				const paint = buildLinePaint(resolvedStyle);
+				if (styleUpdate.strokeColor !== void 0) this.map.setPaintProperty(layerId, "line-color", paint["line-color"]);
+				if (styleUpdate.strokeWidth !== void 0) this.map.setPaintProperty(layerId, "line-width", paint["line-width"]);
+				if (styleUpdate.strokeDash !== void 0) this.map.setPaintProperty(layerId, "line-dasharray", paint["line-dasharray"]);
+				break;
+			}
+			case "circle": {
+				if (!(styleUpdate.pointRadius !== void 0 || styleUpdate.pointFillColor !== void 0 || styleUpdate.fillColor !== void 0 || styleUpdate.strokeColor !== void 0 || styleUpdate.strokeWidth !== void 0 || styleUpdate.text !== void 0)) break;
+				const paint = buildCirclePaint(resolvedStyle);
+				this.map.setPaintProperty(layerId, "circle-radius", paint["circle-radius"]);
+				this.map.setPaintProperty(layerId, "circle-color", paint["circle-color"]);
+				this.map.setPaintProperty(layerId, "circle-stroke-color", paint["circle-stroke-color"]);
+				this.map.setPaintProperty(layerId, "circle-stroke-width", paint["circle-stroke-width"]);
+				this.map.setFilter(layerId, buildCirclePointFilter(resolvedStyle));
+				break;
+			}
+			case "icon": break;
+			case "text":
+				if (!styleUpdate.text || !resolvedStyle.text) break;
+				if (styleUpdate.text.text || styleUpdate.text.labelProperty) this.map.setLayoutProperty(layerId, "text-field", buildTextFieldExpression(resolvedStyle.text));
+				if (styleUpdate.text.fillColor) this.map.setPaintProperty(layerId, "text-color", resolvedStyle.text.fillColor);
+				if (styleUpdate.text.strokeColor) this.map.setPaintProperty(layerId, "text-halo-color", buildTextHaloColorExpression(resolvedStyle.text));
+				if (styleUpdate.text.strokeWidth !== void 0) this.map.setPaintProperty(layerId, "text-halo-width", buildTextHaloWidthExpression(resolvedStyle.text));
+				break;
+		}
+	}
 	toLonLat(coordinate) {
 		return unproject(coordinate[0], coordinate[1]);
 	}
@@ -479,6 +1223,10 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		const point = this.map.project([this.toContinuousLng(position[0]), position[1]]);
 		return [point.x, point.y];
 	}
+	getCoordinateFromPixel(pixel) {
+		const coordinate = this.map.unproject(pixel);
+		return [this.toContinuousLng(coordinate.lng), coordinate.lat];
+	}
 	getViewportSize() {
 		const container = this.map.getContainer();
 		return {
@@ -508,13 +1256,14 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 		else this.map.doubleClickZoom.disable();
 	}
 	getResolution() {
-		const zoom = this.map.getZoom();
-		const center = this.map.getCenter();
-		return 40075016.686 * Math.cos(center.lat * Math.PI / 180) / Math.pow(2, zoom + 8);
+		return WEB_MERCATOR_CIRCUMFERENCE / Math.pow(2, this.map.getZoom() + 9);
 	}
 	getZoom() {
 		return this.map.getZoom();
 	}
+	getBearing() {
+		return this.map.getBearing() * (Math.PI / 180);
+	}
 	onPick(layerId, handler, opts) {
 		const onMlClick = (e) => {
 			const handle = this.layers.get(layerId);
@@ -523,20 +1272,48 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 			const tol = pickHitTolerance(originalEvent);
 			const { x, y } = e.point;
 			const bbox = [[x - tol, y - tol], [x + tol, y + tol]];
-			const features = this.map.queryRenderedFeatures(bbox, { layers: handle.mlLayerIds });
-			if (features.length === 0) return;
-			const f = features[0];
-			const geojson = {
+			const relevantFeatures = mergeNativeAndCachedPickFeatures(this.map.queryRenderedFeatures(bbox, { layers: this.nativeLayerIds(handle) }).map((feature) => ({
 				type: "Feature",
-				id: f.id,
-				geometry: f.geometry,
-				properties: f.properties
-			};
-			const cmId = tryControlMeasureIdFromFeature(geojson);
+				id: feature.id,
+				geometry: feature.geometry,
+				properties: feature.properties
+			})), this.featureCache.get(layerId) ?? []);
+			const size = this.getViewportSize();
+			const candidate = evaluatePickCandidates(relevantFeatures.map(({ feature, nativeHit, visualOrder }) => {
+				const iconId = feature.properties?.iconId;
+				const icon = typeof iconId === "string" ? this.getIconResource(iconId) : void 0;
+				const featureGroupOrder = this.getFeatureGroupOrder(layerId, feature.id);
+				return {
+					feature,
+					visualOrder,
+					nativeHit,
+					...featureGroupOrder !== void 0 ? { featureGroupOrder } : {},
+					...icon ? { icon } : {},
+					layerStyle: {
+						...handle.style,
+						strokeColor: handle.style?.strokeColor ?? DEFAULT_LINE_COLOR,
+						strokeWidth: handle.style?.strokeWidth ?? DEFAULT_LINE_WIDTH
+					}
+				};
+			}), {
+				pixel: [x, y],
+				pointerType: pickPointerType(originalEvent),
+				tolerance: tol,
+				toPixel: (position) => this.getPixelFromCoordinate(position),
+				viewport: {
+					minX: 0,
+					minY: 0,
+					maxX: size.width,
+					maxY: size.height
+				},
+				bearing: this.getBearing()
+			});
+			if (!candidate) return;
+			const cmId = candidate.graphicId;
 			if (cmId == null) return;
 			handler({
 				id: cmId,
-				feature: geojson,
+				feature: candidate.feature,
 				pixel: [x, y],
 				coordinate: [this.toContinuousLng(e.lngLat.lng), e.lngLat.lat],
 				originalEvent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbat-mapper/tactical-draw-adapter-maplibre",
-  "version": "0.2.0-alpha.2",
+  "version": "0.2.0-alpha.20",
   "description": "MapLibre GL JS engine adapter for @orbat-mapper/tactical-draw. Draw and edit tactical control measures (MIL-STD-2525 / APP-6) on a MapLibre map.",
   "license": "MIT",
   "author": "Orbat Mapper",
@@ -37,17 +37,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@orbat-mapper/control-measures": "^0.2.0-alpha.7",
-    "@orbat-mapper/tactical-draw": "^0.2.0-alpha.6"
+    "@orbat-mapper/control-measures": "^0.2.0-alpha.25",
+    "@orbat-mapper/tactical-draw": "^0.2.0-alpha.35"
   },
   "peerDependencies": {
-    "maplibre-gl": ">=4.0.0 <6.0.0"
+    "maplibre-gl": ">=5.8.0 <6.0.0"
   },
   "devDependencies": {
     "@arethetypeswrong/core": "^0.18.3",
+    "@maplibre/maplibre-gl-style-spec": "^24.10.0",
     "@types/geojson": "^7946.0.16",
     "jsdom": "^27.4.0",
-    "maplibre-gl": "^5.18.0",
+    "maplibre-gl": "^5.24.0",
     "publint": "^0.3.21",
     "tsdown": "^0.22.2",
     "typescript": "~5.9.3",