@mapka/maplibre-gl-sdk 0.16.3 → 0.17.0

package/lib/components/PopupList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupList.d.ts","sourceRoot":"","sources":["../../src/components/PopupList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAGnE,UAAU,oBAAoB;IAC5B,KAAK,EAAE,yBAAyB,EAAE,CAAC;CACpC;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,CAAA;CAAE,eAEnE;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE,oBAAoB,gCAexD"}
+{"version":3,"file":"PopupList.d.ts","sourceRoot":"","sources":["../../src/components/PopupList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAMnE,UAAU,oBAAoB;IAC5B,KAAK,EAAE,yBAAyB,EAAE,CAAC;CACpC;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,CAAA;CAAE,eAEnE;AA0CD,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE,oBAAoB,gCA8CxD"}

package/lib/components/PopupList.js

@@ -1,8 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { PopupListItem } from "./PopupListItem.js";
+import { useState } from "preact/hooks";
+import { PopupContent } from "./PopupContent.js";
+import { ChevronUpIcon } from "./icons/ChevronUpIcon.js";
+import { ChevronDownIcon } from "./icons/ChevronDownIcon.js";
+import { noop } from "es-toolkit";
 export function PopupCustomElement({ popup }) {
     return popup;
 }
+function PopupListNav({ index, total, onPrev, onNext }) {
+    const isFirst = index === 0;
+    const isLast = index === total - 1;
+    return (_jsxs("div", { class: "mapka-popup-list-nav", children: [_jsx("button", { type: "button", class: "mapka-popup-list-nav-btn", onClick: onPrev, disabled: isFirst, "aria-label": "Previous popup", children: _jsx(ChevronUpIcon, {}) }), _jsxs("div", { class: "mapka-popup-list-nav-counter", children: [_jsx("span", { children: index + 1 }), _jsx("span", { class: "mapka-popup-list-nav-counter-divider" }), _jsx("span", { children: total })] }), _jsx("button", { type: "button", class: "mapka-popup-list-nav-btn", onClick: onNext, disabled: isLast, "aria-label": "Next popup", children: _jsx(ChevronDownIcon, {}) })] }));
+}
 export function PopupList({ items }) {
-    return (_jsxs("div", { class: "mapka-popup-list-wrapper", children: [_jsx("div", { class: "mapka-popup-list", children: items.map(({ content, id }) => content instanceof HTMLElement ? (_jsx(PopupCustomElement, { popup: content }, id)) : (_jsx(PopupListItem, { popup: content }, id))) }), _jsx("div", { class: "mapka-popup-list-gradient" })] }));
+    const [index, setIndex] = useState(0);
+    const safeIndex = Math.min(index, items.length - 1);
+    const handlePrev = (e) => {
+        e.stopPropagation();
+        if (safeIndex > 0) {
+            setIndex(safeIndex - 1);
+        }
+    };
+    const handleNext = (e) => {
+        e.stopPropagation();
+        if (safeIndex < items.length - 1) {
+            setIndex(safeIndex + 1);
+        }
+    };
+    const { id, content } = items[safeIndex];
+    return (_jsxs("div", { class: "mapka-popup-list-wrapper", children: [_jsx("div", { class: "mapka-popup-list", children: content instanceof HTMLElement ? (_jsx(PopupCustomElement, { popup: content }, id)) : (_jsx(PopupContent, { title: content.title, description: content.description, rows: content.rows, imageUrls: content.imageUrls, primaryAction: content.primaryAction, closeButton: false, onClose: noop }, id)) }), items.length > 1 && (_jsx(PopupListNav, { index: safeIndex, total: items.length, onPrev: handlePrev, onNext: handleNext }))] }));
 }

package/lib/components/icons/ChevronDownIcon.d.ts

@@ -0,0 +1,2 @@
+export declare function ChevronDownIcon(): import("preact").JSX.Element;
+//# sourceMappingURL=ChevronDownIcon.d.ts.map

package/lib/components/icons/ChevronDownIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChevronDownIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/ChevronDownIcon.tsx"],"names":[],"mappings":"AAAA,wBAAgB,eAAe,iCAmB9B"}

package/lib/components/icons/ChevronDownIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+export function ChevronDownIcon() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-popup-icon mapka-popup-icon-sm", children: _jsx("path", { d: "M3 6 7.3 10.3a1 1 0 0 0 1.4 0L13 6", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+}

package/lib/components/icons/ChevronUpIcon.d.ts

@@ -0,0 +1,2 @@
+export declare function ChevronUpIcon(): import("preact").JSX.Element;
+//# sourceMappingURL=ChevronUpIcon.d.ts.map

package/lib/components/icons/ChevronUpIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChevronUpIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/ChevronUpIcon.tsx"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,iCAmB5B"}

package/lib/components/icons/ChevronUpIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+export function ChevronUpIcon() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-popup-icon mapka-popup-icon-sm", children: _jsx("path", { d: "M3 10 7.3 5.7a1 1 0 0 1 1.4 0L13 10", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+}

package/lib/index.d.ts

@@ -9,4 +9,5 @@ export { MapkaMap as Map } from "./map.js";
 export { MapkaMapOptions as MapOptions } from "./map.js";
 export { MapkaExportControl, MapkaExportControlOptions, } from "./controls/MapkaExportControl.js";
 export { MapkaDrawControl, MapkaDrawControlOptions, DrawMode, } from "./controls/MapkaDrawControl.js";
+export { loadMarkerIcon } from "./modules/icons.js";
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAE,QAAQ,IAAI,GAAG,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,eAAe,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EACL,kBAAkB,EAClB,yBAAyB,GAC1B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,QAAQ,GACT,MAAM,gCAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAE,QAAQ,IAAI,GAAG,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,eAAe,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EACL,kBAAkB,EAClB,yBAAyB,GAC1B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,QAAQ,GACT,MAAM,gCAAgC,CAAC;AAExC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC"}

package/lib/index.js

@@ -8,3 +8,4 @@ export * from "./constants/styles.js";
 export { MapkaMap as Map } from "./map.js";
 export { MapkaExportControl, } from "./controls/MapkaExportControl.js";
 export { MapkaDrawControl, } from "./controls/MapkaDrawControl.js";
+export { loadMarkerIcon } from "./modules/icons.js";

package/lib/map.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"map.d.ts","sourceRoot":"","sources":["../src/map.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,aAAa,CAAC;AAW1C,OAAO,KAAK,EACV,MAAM,EACN,KAAK,EAGL,UAAU,EAEV,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EACnB,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AACrF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAG5D,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;CAChC;AA0BD,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,EAAE,CAAC;IACd,OAAO,EAAE,yBAAyB,EAAE,CAAC;IACrC,SAAS,EAAE,WAAW,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,kBAAkB,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,UAAU,MAAM;IACd,GAAG,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IAClC,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACnC,KAAK,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;CACrC;AAED,qBAAa,QAAS,SAAQ,UAAU,CAAC,GAAG;IAC1C,MAAM,CAAC,GAAG,EAAE,MAAM,CAAU;IAErB,MAAM,EAAE,MAAM,CAAW;IACzB,OAAO,EAAE,cAAc,EAAE,CAAM;IAE/B,SAAS,EAAE,MAAM,CAAK;IACtB,YAAY,EAAE,OAAO,CAAQ;IAC7B,MAAM,EAAE,aAAa,EAAE,CAAM;gBAEjB,EAAE,gBAAgB,EAAE,MAAM,EAAE,SAAa,EAAE,YAAmB,EAAE,GAAG,OAAO,EAAE,EAAE,eAAe;IA0BzG,QAAQ,CACb,KAAK,EAAE,MAAM,GAAG,kBAAkB,EAClC,OAAO,GAAE,gBAAgB,GAAG,YAAiB;IAexC,UAAU,CAAC,OAAO,EAAE,kBAAkB,EAAE;IAIxC,aAAa,CAAC,OAAO,EAAE,kBAAkB,EAAE;IAI3C,aAAa;IAIb,SAAS,CAAC,KAAK,EAAE,iBAAiB,GAAG,iBAAiB,EAAE;IAIxD,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE;IAIhC,WAAW,CAAC,KAAK,EAAE,iBAAiB;IAIpC,SAAS;IAIT,YAAY;IAIN,MAAM,CAAC,OAAO,CAAC,EAAE,kBAAkB;IAIzC,QAAQ,CAAC,KAAK,EAAE,mBAAmB,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAIrE"}
+{"version":3,"file":"map.d.ts","sourceRoot":"","sources":["../src/map.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,aAAa,CAAC;AAW1C,OAAO,KAAK,EACV,MAAM,EACN,KAAK,EAGL,UAAU,EAEV,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EACnB,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AACrF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAG5D,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;CAChC;AA0BD,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,EAAE,CAAC;IACd,OAAO,EAAE,yBAAyB,EAAE,CAAC;IACrC,SAAS,EAAE,WAAW,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,kBAAkB,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,UAAU,MAAM;IACd,GAAG,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IAClC,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACnC,KAAK,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;CACrC;AAED,qBAAa,QAAS,SAAQ,UAAU,CAAC,GAAG;IAC1C,MAAM,CAAC,GAAG,EAAE,MAAM,CAAU;IAErB,MAAM,EAAE,MAAM,CAAW;IACzB,OAAO,EAAE,cAAc,EAAE,CAAM;IAE/B,SAAS,EAAE,MAAM,CAAK;IACtB,YAAY,EAAE,OAAO,CAAQ;IAC7B,MAAM,EAAE,aAAa,EAAE,CAAM;gBAEjB,EACjB,gBAAgB,EAChB,MAAM,EACN,SAAa,EACb,YAAmB,EACnB,GAAG,OAAO,EACX,EAAE,eAAe;IA0BX,QAAQ,CACb,KAAK,EAAE,MAAM,GAAG,kBAAkB,EAClC,OAAO,GAAE,gBAAgB,GAAG,YAAiB;IAexC,UAAU,CAAC,OAAO,EAAE,kBAAkB,EAAE;IAIxC,aAAa,CAAC,OAAO,EAAE,kBAAkB,EAAE;IAI3C,aAAa;IAIb,SAAS,CAAC,KAAK,EAAE,iBAAiB,GAAG,iBAAiB,EAAE;IAIxD,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE;IAIhC,WAAW,CAAC,KAAK,EAAE,iBAAiB;IAIpC,SAAS;IAIT,YAAY;IAIN,MAAM,CAAC,OAAO,CAAC,EAAE,kBAAkB;IAIzC,QAAQ,CAAC,KAAK,EAAE,mBAAmB,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAIrE"}

package/lib/modules/icons.d.ts

@@ -1,10 +1,14 @@
 import type { MapkaMap } from "../map.js";
 import type { MapStyleImageMissingEvent } from "maplibre-gl";
 /**
- * Load any icons that are missing from the map
- * Only supports icons from Mapka API maki, temaki and tabler
- * @param map
- * @param event
+ * Fetch an icon's SVG source from the Mapka API.
+ * Batched and cached across callers; concurrent requests for the same
+ * id share one fetch.
+ */
+export declare function loadMarkerIcon(id: string): Promise<string>;
+/**
+ * Load any icons that are missing from the map from the Mapka API.
+ * @see https://github.com/mapbox/mapbox-gl-js/issues/5529
  */
 export declare function loadLayersIcons(map: MapkaMap, event: MapStyleImageMissingEvent): void;
 //# sourceMappingURL=icons.d.ts.map

package/lib/modules/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/modules/icons.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAsC7D;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,yBAAyB,QAS9E"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/modules/icons.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AA8C7D;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAY1D;AAID;;;GAGG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,yBAAyB,QAiB9E"}

package/lib/modules/icons.js

@@ -1,43 +1,81 @@
+import ky from "ky";
 import { debounce, uniq } from "es-toolkit";
 import { getMapkaUrl } from "../utils/url.js";
-let missingIcons = [];
-let loadedIcons = [];
+const svgCache = new Map();
+const pendingResolvers = new Map();
+let pendingIds = [];
 /**
- * Load missing icons from Mapka API
- * Inspired by https://github.com/mapbox/mapbox-gl-js/issues/5529
+ * Debounced batch fetch: pulls unique pending ids, hits the icons API
+ * in one request, populates svgCache, and resolves waiting callers.
  */
-const loadIcons = debounce((map) => {
-    if (missingIcons.length === 0) {
+const flushIcons = debounce(() => {
+    const idsToFetch = uniq(pendingIds).filter((id) => !svgCache.has(id));
+    if (idsToFetch.length === 0)
         return;
-    }
-    const iconsToLoad = uniq(missingIcons).filter((id) => !loadedIcons.includes(id));
-    loadedIcons = loadedIcons.concat(iconsToLoad);
-    missingIcons = [];
-    if (iconsToLoad.length === 0) {
-        return;
-    }
-    const search = new URLSearchParams(iconsToLoad.map((id) => ["ids", id]));
-    fetch(`${getMapkaUrl()}/v1/icons?${search}`)
-        .then((response) => response.json())
+    pendingIds = [];
+    ky.get(`${getMapkaUrl()}/v1/icons`, {
+        searchParams: idsToFetch.map((id) => ["ids", id]),
+    })
+        .json()
         .then((data) => {
-        data.forEach(({ svg, id }) => {
-            const img = new Image(15, 15);
-            img.onload = () => map.addImage(id, img);
-            img.src = `data:image/svg+xml;charset=utf-8;base64,${btoa(svg)}`;
-        });
+        for (const { id, svg } of data) {
+            svgCache.set(id, svg);
+            const resolver = pendingResolvers.get(id);
+            if (resolver) {
+                resolver.resolve(svg);
+                pendingResolvers.delete(id);
+            }
+        }
+    })
+        .catch((err) => {
+        for (const id of idsToFetch) {
+            const resolver = pendingResolvers.get(id);
+            if (resolver) {
+                resolver.reject(err);
+                pendingResolvers.delete(id);
+            }
+        }
     });
 }, 50);
 /**
- * Load any icons that are missing from the map
- * Only supports icons from Mapka API maki, temaki and tabler
- * @param map
- * @param event
+ * Fetch an icon's SVG source from the Mapka API.
+ * Batched and cached across callers; concurrent requests for the same
+ * id share one fetch.
+ */
+export function loadMarkerIcon(id) {
+    const cached = svgCache.get(id);
+    if (cached)
+        return Promise.resolve(cached);
+    const existing = pendingResolvers.get(id);
+    if (existing)
+        return existing.promise;
+    const resolver = Promise.withResolvers();
+    pendingResolvers.set(id, resolver);
+    pendingIds.push(id);
+    flushIcons();
+    return resolver.promise;
+}
+const isStyleImage = (id) => id.includes(":");
+/**
+ * Load any icons that are missing from the map from the Mapka API.
+ * @see https://github.com/mapbox/mapbox-gl-js/issues/5529
  */
 export function loadLayersIcons(map, event) {
-    if (event.id.startsWith("maki:") ||
-        event.id.startsWith("temaki:") ||
-        event.id.startsWith("tabler:")) {
-        missingIcons.push(event.id);
-    }
-    loadIcons(map);
+    if (map.hasImage(event.id) || !isStyleImage(event.id))
+        return;
+    loadMarkerIcon(event.id)
+        .then((svg) => {
+        if (map.hasImage(event.id))
+            return;
+        const img = new Image(15, 15);
+        img.onload = () => {
+            if (!map.hasImage(event.id)) {
+                map.addImage(event.id, img);
+            }
+        };
+        img.src = `data:image/svg+xml;charset=utf-8;base64,${btoa(svg)}`;
+    })
+        .catch((err) => {
+        map.logger.warn(`[mapka] Failed to load layer icon "${event.id}":`, err);
+    });
 }

package/lib/modules/markers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markers.d.ts","sourceRoot":"","sources":["../../src/modules/markers.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAU,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAkB7D,wBAAgB,WAAW,CAAC,MAAM,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,UAElD;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,KAAK,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,UAE/E;AAmFD,wBAAgB,UAAU,CAAC,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,kBAAkB,EAAE,QAcpF;AAED,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QAK9D;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,QAAQ,EAAE,cAAc,EAAE,kBAAkB,EAAE,QAKhF;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,QAAQ,QAK1C;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,QAAQ,QAK5C;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,kBAAkB,QAG1E"}
+{"version":3,"file":"markers.d.ts","sourceRoot":"","sources":["../../src/modules/markers.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAyB,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAwB7D,wBAAgB,WAAW,CAAC,MAAM,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,UAElD;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,KAAK,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,UAE/E;AAqID,wBAAgB,UAAU,CAAC,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,kBAAkB,EAAE,QAqBpF;AAED,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QAK9D;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,QAAQ,EAAE,cAAc,EAAE,kBAAkB,EAAE,QAKhF;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,QAAQ,QAK1C;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,QAAQ,QAK5C;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,kBAAkB,QAG1E"}

package/lib/modules/markers.js

@@ -1,6 +1,12 @@
 import { Marker } from "maplibre-gl";
 import { get } from "es-toolkit/compat";
 import { remove } from "es-toolkit";
+import { loadMarkerIcon } from "./icons.js";
+/**
+ * Offset for the default pin so the tip sits on the LngLat anchor point.
+ * Value taken from maplibre-gl-js: (shadow translate-y + ellipse cy) - (height/2) ≈ 14.
+ */
+const DEFAULT_PIN_OFFSET = [0, -14];
 /**
  * Default marker offset
  * @see https://github.com/maplibre/maplibre-gl-js/blob/master/src/ui/marker.ts#L457
@@ -90,10 +96,57 @@ function setupMarkerPopupListeners(map, marker, popup, options) {
         });
     }
 }
+/**
+ * Apply `color` (as SVG `fill`) to the fetched icon SVG inside `element`.
+ *
+ * Override every descendant whose `fill` attribute is set and not `"none"`,
+ * then set `fill` on the root `<svg>` itself so paths that omit the
+ * attribute (common in maki — they inherit the browser default) pick up the
+ * user color via SVG cascading. `fill="none"` is preserved so outline-only
+ * shapes keep their transparency.
+ *
+ * Only invoked for icon markers; the default maplibre pin handles its own
+ * color via `MarkerOptions.color`.
+ */
+function applyMarkerColors(element, color) {
+    if (!color) {
+        return;
+    }
+    for (const el of element.querySelectorAll('[fill]:not([fill="none"])')) {
+        el.setAttribute("fill", color);
+    }
+    const svg = element.querySelector("svg");
+    if (svg && !svg.hasAttribute("fill")) {
+        svg.setAttribute("fill", color);
+    }
+}
+function createMarkerElement(currentMap, options) {
+    const { color, icon } = options;
+    if (!icon) {
+        return;
+    }
+    const element = document.createElement("div");
+    element.className = "mapka-marker-icon";
+    element.dataset.iconId = icon;
+    loadMarkerIcon(icon)
+        .then((svg) => {
+        element.innerHTML = svg;
+        applyMarkerColors(element, color);
+    })
+        .catch((err) => {
+        currentMap.logger.warn(`[mapka] Failed to load marker icon "${icon}":`, err);
+    });
+    return element;
+}
 export function addMarkers(currentMap, markersOptions) {
     for (const markerOptions of markersOptions) {
-        const { lngLat, popup, ...options } = markerOptions;
-        const newMarker = new Marker(options).setLngLat(lngLat).addTo(currentMap);
+        const { lngLat, popup, icon, offset = DEFAULT_PIN_OFFSET, ...rest } = markerOptions;
+        const markerOpts = {
+            ...rest,
+            element: createMarkerElement(currentMap, markerOptions),
+            offset,
+        };
+        const newMarker = new Marker(markerOpts).setLngLat(lngLat).addTo(currentMap);
         currentMap.markers.push({
             id: getMarkerId(markerOptions),
             options: markerOptions,

package/lib/modules/popupGroups.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popupGroups.d.ts","sourceRoot":"","sources":["../../src/modules/popupGroups.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AACzD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,MAAM,MAAM,gBAAgB,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,GAAG,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,OAAO,EAAE,yBAAyB,EAAE,CAAA;CAAE,CAAC;AAEzF,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG,iBAAiB,CAAC;AAkJpE,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,aAAa,EAAE,EACvB,UAAU,EAAE,yBAAyB,EAAE,GACtC,gBAAgB,EAAE,CAmBpB;AAED,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,QAAQ,EACb,UAAU,EAAE,yBAAyB,EAAE,GACtC,gBAAgB,EAAE,CASpB"}
+{"version":3,"file":"popupGroups.d.ts","sourceRoot":"","sources":["../../src/modules/popupGroups.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AACzD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,MAAM,MAAM,gBAAgB,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,GAAG,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,OAAO,EAAE,yBAAyB,EAAE,CAAA;CAAE,CAAC;AAEzF,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG,iBAAiB,CAAC;AAiJpE,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,aAAa,EAAE,EACvB,UAAU,EAAE,yBAAyB,EAAE,GACtC,gBAAgB,EAAE,CAmBpB;AAED,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,QAAQ,EACb,UAAU,EAAE,yBAAyB,EAAE,GACtC,gBAAgB,EAAE,CASpB"}