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

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { BaseMapAdapter, EditPointerDriver, FeatureOps, LayerId, MapCursor, NativeEventEntry, PickHandler, PickOptions, PixelCoordinate, StyleOptions } from "@orbat-mapper/tactical-draw";
+import { BaseMapAdapter, EditPointerDriver, FeatureOps, IconResource, LayerId, MapCursor, NativeEventEntry, PickHandler, PickOptions, PixelCoordinate, StyleOptions } from "@orbat-mapper/tactical-draw";
 import maplibregl from "maplibre-gl";
 import { Position } from "geojson";
 
@@ -15,11 +15,14 @@ interface MapLibreViewToken {
 }
 declare class MapLibreAdapter extends BaseMapAdapter<MapLibreLayerHandle, MapLibreEventToken, MapLibreViewToken> {
   private map;
+  private readonly pendingIconImages;
   constructor(map: maplibregl.Map);
   private toContinuousLng;
   protected createLayer(layerId: LayerId, style?: StyleOptions): MapLibreLayerHandle;
   protected destroyLayer(handle: MapLibreLayerHandle): void;
   protected applyFeatureOps(layerId: LayerId, ops: FeatureOps): void;
+  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;
@@ -40,6 +43,7 @@ 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;
 }

package/dist/index.mjs

@@ -52,13 +52,67 @@ function buildCirclePointFilter(style) {
 			"$type",
 			"Point"
 		],
+		["!has", "iconId"],
 		["!has", style.text.labelProperty]
 	] : [
-		"==",
-		"$type",
-		"Point"
+		"all",
+		[
+			"==",
+			"$type",
+			"Point"
+		],
+		["!has", "iconId"]
 	];
 }
+function buildIconLayer(id, source) {
+	return {
+		id,
+		type: "symbol",
+		source,
+		filter: [
+			"all",
+			[
+				"==",
+				"$type",
+				"Point"
+			],
+			["has", "iconId"]
+		],
+		layout: {
+			"icon-image": ["get", "iconId"],
+			"icon-size": [
+				"coalesce",
+				["get", "iconScale"],
+				1
+			],
+			"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
+		},
+		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;
 /**
@@ -233,6 +287,7 @@ function buildLinePaint(style) {
 }
 var MapLibreAdapter = class extends BaseMapAdapter {
 	map;
+	pendingIconImages = /* @__PURE__ */ new Set();
 	constructor(map) {
 		super();
 		this.map = map;
@@ -295,6 +350,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));
@@ -327,6 +385,25 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 			features
 		});
 	}
+	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);
+			};
+			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";
 		const fn = (e) => {
@@ -538,6 +615,9 @@ var MapLibreAdapter = class extends BaseMapAdapter {
 	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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbat-mapper/tactical-draw-adapter-maplibre",
-  "version": "0.2.0-alpha.4",
+  "version": "0.2.0-alpha.6",
   "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,8 +37,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@orbat-mapper/control-measures": "^0.2.0-alpha.11",
-    "@orbat-mapper/tactical-draw": "^0.2.0-alpha.14"
+    "@orbat-mapper/control-measures": "^0.2.0-alpha.15",
+    "@orbat-mapper/tactical-draw": "^0.2.0-alpha.20"
   },
   "peerDependencies": {
     "maplibre-gl": ">=4.0.0 <6.0.0"