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

package/dist/index.d.mts

@@ -1,37 +1,101 @@
-import { BaseMapAdapter, EditPointerDriver, FeatureOps, IconResource, 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[];
+  /** Features most recently submitted to the native source, after MapLibre-specific promotion. */
+  sourceFeatures: readonly Feature[];
+  /** Whether the native source has received its first complete dataset. */
+  sourceInitialized: boolean;
+  /** Unset while the stored value describes older features than `features` holds. */
+  featureSignature: string | undefined;
+  /**
+   * Last `FeatureGroup.revision` seen for this bundle, when the producer
+   * supplied one. Two consecutive groups with the same `revision` are known
+   * to carry byte-identical `features`, so it stands in for `featureSignature`
+   * without paying to re-stringify the whole group. A missing revision on
+   * either side falls back to the signature comparison — see `applyFeatureGroups`.
+   */
+  revision?: number;
+  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;
+  private readonly viewChangeMode;
   private readonly pendingIconImages;
-  constructor(map: maplibregl.Map);
+  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;
@@ -48,4 +112,4 @@ declare class MapLibreAdapter extends BaseMapAdapter<MapLibreLayerHandle, MapLib
   setGlobeMode(enabled: boolean): void;
 }
 //#endregion
-export { MapLibreAdapter };
+export { MapLibreAdapter, type MapLibreAdapterOptions };

package/dist/index.mjs

@@ -1,6 +1,115 @@
 import { project, unproject } from "@orbat-mapper/control-measures";
-import { BaseMapAdapter, DEFAULT_TEXT_SIZE_MAX_PIXELS, DEFAULT_TEXT_SIZE_MIN_PIXELS, 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;
+	}
+}
+function sameOrder(a, b) {
+	if (a.length !== b.length) return false;
+	for (let index = 0; index < a.length; index++) if (a[index] !== b[index]) return false;
+	return true;
+}
+/**
+* Replace the contents of shared-id features while adding/removing ids that
+* entered or left a stable group bundle. Remove stale keys explicitly instead
+* of combining `removeAllProperties` with `addOrUpdateProperties`: MapLibre's
+* tile-index diff treats the former as exclusive and otherwise drops the
+* replacement properties, including the promoted feature id.
+*/
+function buildGeoJSONSourceDiff(previousFeatures, nextFeatures) {
+	const previousById = new Map(previousFeatures.map((feature) => [feature.id, feature]));
+	const nextById = new Map(nextFeatures.map((feature) => [feature.id, feature]));
+	const remove = previousFeatures.filter((feature) => !nextById.has(feature.id)).map((feature) => feature.id);
+	const add = [];
+	const update = [];
+	for (const feature of nextFeatures) {
+		const previous = previousById.get(feature.id);
+		if (!previous) {
+			add.push(feature);
+			continue;
+		}
+		if (feature.geometry === null) {
+			remove.push(feature.id);
+			add.push(feature);
+			continue;
+		}
+		const previousProperties = previous.properties ?? {};
+		const nextProperties = feature.properties ?? {};
+		const removeProperties = Object.keys(previousProperties).filter((key) => !Object.hasOwn(nextProperties, key));
+		update.push({
+			id: feature.id,
+			newGeometry: feature.geometry,
+			...removeProperties.length > 0 ? { removeProperties } : {},
+			addOrUpdateProperties: Object.entries(nextProperties).map(([key, value]) => ({
+				key,
+				value
+			}))
+		});
+	}
+	return {
+		...remove.length > 0 ? { remove } : {},
+		...add.length > 0 ? { add } : {},
+		...update.length > 0 ? { update } : {}
+	};
+}
+/**
+* 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",
@@ -80,11 +189,7 @@ function buildIconLayer(id, source) {
 		],
 		layout: {
 			"icon-image": ["get", "iconId"],
-			"icon-size": [
-				"coalesce",
-				["get", "iconScale"],
-				1
-			],
+			"icon-size": buildIconSizeExpression(),
 			"icon-rotate": [
 				"*",
 				[
@@ -97,7 +202,8 @@ function buildIconLayer(id, source) {
 			"icon-rotation-alignment": "viewport",
 			"icon-pitch-alignment": "viewport",
 			"icon-allow-overlap": true,
-			"icon-ignore-placement": true
+			"icon-ignore-placement": true,
+			"symbol-z-order": "source"
 		},
 		paint: { "icon-opacity": [
 			"coalesce",
@@ -126,7 +232,7 @@ const WEB_MERCATOR_CIRCUMFERENCE = 40075016.686;
 * matching `getResolution`); the linear ramp between stops approximates the
 * exponential exactly closely enough at 1-zoom granularity.
 */
-function buildTextSizeExpression(text) {
+function textSizeAtZoom(text, zoom) {
 	const minPx = text.textSizeMinPixels ?? DEFAULT_TEXT_SIZE_MIN_PIXELS;
 	const maxPx = text.textSizeMaxPixels ?? DEFAULT_TEXT_SIZE_MAX_PIXELS;
 	const screenOrDefault = [
@@ -134,31 +240,149 @@ function buildTextSizeExpression(text) {
 		["get", "textSizePixels"],
 		14
 	];
-	const sizeAtZoom = (zoom) => {
-		return [
+	const groundPx = [
+		"*",
+		["get", "textSizeMeters"],
+		Math.pow(2, zoom + 9) / WEB_MERCATOR_CIRCUMFERENCE
+	];
+	return [
+		"case",
+		["has", "textSizeMeters"],
+		[
 			"case",
-			["has", "textSizeMeters"],
+			["has", "textMaxSizePixels"],
+			[
+				"min",
+				["get", "textMaxSizePixels"],
+				groundPx
+			],
 			[
 				"min",
 				maxPx,
 				[
 					"max",
 					minPx,
+					groundPx
+				]
+			]
+		],
+		screenOrDefault
+	];
+}
+/**
+* Wrap a per-zoom expression builder in the top-level zoom `interpolate` every
+* zoom-driven property here needs. MapLibre only accepts `["zoom"]` as the
+* input of a top-level `step`/`interpolate`, never nested inside a `case`, so
+* the ramp must be outermost and the per-feature branching evaluated at each
+* stop — not the other way round.
+*/
+function interpolateOverZoom(at) {
+	return [
+		"interpolate",
+		["linear"],
+		["zoom"],
+		...Array.from({ length: 25 }, (_, zoom) => [zoom, at(zoom)]).flat()
+	];
+}
+function buildTextSizeExpression(text) {
+	return interpolateOverZoom((zoom) => textSizeAtZoom(text, zoom));
+}
+/**
+* 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", "iconMinPixels"],
+		0
+	];
+	const maxExpr = [
+		"coalesce",
+		["get", "iconMaxPixels"],
+		1e9
+	];
+	const scaleAtZoom = (zoom) => {
+		return [
+			"case",
+			["has", "iconSizeMeters"],
+			[
+				"/",
+				[
+					"max",
+					minExpr,
+					[
+						"min",
+						maxExpr,
+						[
+							"*",
+							["get", "iconSizeMeters"],
+							Math.pow(2, zoom + 9) / WEB_MERCATOR_CIRCUMFERENCE
+						]
 					]
-				]
+				],
+				["get", "iconOctagonSize"]
 			],
-			screenOrDefault
+			[
+				"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()
 	];
 }
 /**
@@ -166,6 +390,133 @@ function buildTextSizeExpression(text) {
 * `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).
+*
+* The width is derived from `textSizeAtZoom` — the same size `text-size`
+* renders at — not from `textSizePixels` alone. A ground-anchored label
+* (ADR-0028) carries only `textSizeMeters`, so reading the pixel size directly
+* would fall back to a constant and pin the halo at one width while the glyphs
+* grew and shrank with zoom: far too heavy on small text, hairline on large.
+* OL and Leaflet already halo off their resolved size; this brings MapLibre in
+* line. The ratio stays well under MapLibre's SDF halo ceiling (~¼ em), so the
+* halo never clips into blocky corners.
+*/
+function buildTextHaloWidthExpression(text) {
+	const fallback = text.strokeColor ? text.strokeWidth ?? 1 : [
+		"case",
+		HAS_TEXT_BACKGROUND,
+		3,
+		0
+	];
+	return interpolateOverZoom((zoom) => [
+		"case",
+		HAS_TEXT_HALO,
+		haloWidthAtZoom(text, zoom),
+		fallback
+	]);
+}
+/**
+* `text-halo-blur` as a fraction of the halo width. MapLibre's halo edge is
+* hard at blur 0, which reads harsher over a vector basemap than the basemap's
+* own labels — OpenFreeMap Liberty, the preview's default style, blurs nearly
+* every one of its halos. Scaled off the width rather than a flat pixel value
+* so the softness stays proportional as the halo grows with zoom.
+*
+* MapLibre-only: OpenLayers canvas strokes have no blur, and Leaflet's stacked
+* `text-shadow` halo would need a blur radius threaded through each shadow.
+* The three engines' halos therefore differ slightly at the edge.
+*/
+const TEXT_HALO_BLUR_RATIO = .25;
+/** The halo's outward depth at one zoom stop; shared by the width and blur builders. */
+function haloWidthAtZoom(text, zoom) {
+	return [
+		"max",
+		1.5,
+		[
+			"/",
+			textSizeAtZoom(text, zoom),
+			8
+		]
+	];
+}
+/**
+* Per-feature `text-halo-blur`, softening only a `textHalo` halo's edge.
+* Everything else stays at 0 so the `textBackground` backdrop and a
+* layer-level text stroke keep the crisp edge they render today.
+*/
+function buildTextHaloBlurExpression(text) {
+	return interpolateOverZoom((zoom) => [
+		"case",
+		HAS_TEXT_HALO,
+		[
+			"*",
+			TEXT_HALO_BLUR_RATIO,
+			haloWidthAtZoom(text, zoom)
+		],
+		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
@@ -214,26 +565,60 @@ function buildSymbolLayer(symbolId, sourceId, text) {
 		"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-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-halo-blur": buildTextHaloBlurExpression(text),
+			"text-opacity": TEXT_OPACITY_EXPRESSION
 		}
 	};
 }
@@ -255,14 +640,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",
@@ -282,15 +732,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;
+	viewChangeMode;
 	pendingIconImages = /* @__PURE__ */ new Set();
-	constructor(map) {
+	scalesGroundPointSymbolsNatively = true;
+	constructor(map, options = {}) {
 		super();
 		this.map = map;
+		this.viewChangeMode = options.viewChangeMode ?? "continuous";
 	}
 	toContinuousLng(lng) {
 		return nearestWorldCopyLng(lng, this.map.getCenter().lng);
@@ -308,14 +806,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,
@@ -361,29 +864,228 @@ 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);
+			}
+			let contentChanged;
+			if (!isNewBundle && bundle.revision !== void 0 && group.revision !== void 0) {
+				contentChanged = bundle.revision !== group.revision;
+				if (contentChanged) bundle.featureSignature = void 0;
+			} else {
+				const featureSignature = JSON.stringify(group.features);
+				contentChanged = isNewBundle || bundle.featureSignature !== featureSignature;
+				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.revision = group.revision;
+			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: [],
+			sourceFeatures: [],
+			sourceInitialized: false,
+			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 = bundle.sourceInitialized && typeof source.updateData === "function" ? source.updateData(buildGeoJSONSourceDiff(bundle.sourceFeatures, features), true) : source.setData({
 			type: "FeatureCollection",
 			features
-		});
+		}, true);
+		bundle.sourceFeatures = features;
+		bundle.sourceInitialized = true;
+		if (isPromiseLike(result)) Promise.resolve(result).catch(() => {});
+	}
+	orderGroupBundles(handle, previousGroupIds, desiredGroupIds, forcedGroupIds) {
+		let beforeId = handle.mlLayerIds[0];
+		if (!beforeId) return;
+		const stableGroupIds = sameOrder(previousGroupIds, desiredGroupIds) ? null : 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 (forcedGroupIds.has(groupId) || stableGroupIds !== null && !stableGroupIds.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;
@@ -395,6 +1097,7 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 				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))}`;
@@ -420,17 +1123,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;
@@ -550,40 +1255,75 @@ 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));
+					this.map.setPaintProperty(layerId, "text-halo-blur", buildTextHaloBlurExpression(resolvedStyle.text));
+				}
+				break;
+		}
+	}
 	toLonLat(coordinate) {
 		return unproject(coordinate[0], coordinate[1]);
 	}
@@ -594,6 +1334,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 {
@@ -639,20 +1383,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.8",
+  "version": "0.2.0",
   "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.15",
-    "@orbat-mapper/tactical-draw": "^0.2.0-alpha.23"
+    "@orbat-mapper/control-measures": "^0.2.0",
+    "@orbat-mapper/tactical-draw": "^0.2.0"
   },
   "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",