@mapka/maplibre-gl-sdk 0.16.4 → 0.17.0

package/lib/types/marker.d.ts

@@ -1,10 +1,12 @@
 import type { MarkerOptions } from "maplibre-gl";
 import type { MapkaMarkerPopupOptions } from "./popup.js";
-export interface MapkaMarkerOptions extends MarkerOptions {
+export interface MapkaMarkerOptions extends Omit<MarkerOptions, "color"> {
     id?: string;
     lngLat: [number, number];
-    color?: string;
+    /** Mapka icon id (e.g. `"maki:restaurant"`). Omit to use the default pin. */
     icon?: string;
+    /** CSS color applied to the SVG fill. Default pin uses `#3FB1CE` when unset. */
+    color?: string;
     popup?: MapkaMarkerPopupOptions;
 }
 //# sourceMappingURL=marker.d.ts.map

package/lib/types/marker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"marker.d.ts","sourceRoot":"","sources":["../../src/types/marker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,uBAAuB,CAAC;CACjC"}
+{"version":3,"file":"marker.d.ts","sourceRoot":"","sources":["../../src/types/marker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC;IACtE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,uBAAuB,CAAC;CACjC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapka/maplibre-gl-sdk",
-  "version": "0.16.4",
+  "version": "0.17.0",
   "type": "module",
   "description": "Mapka JS SDK",
   "sideEffects": false,
@@ -32,6 +32,7 @@
   "dependencies": {
     "es-toolkit": "^1.45.1",
     "html-to-image": "^1.11.13",
+    "ky": "^2.0.1",
     "maplibre-gl": "^5.22.0",
     "preact": "^10.29.1",
     "supercluster": "^8.0.1",
@@ -56,5 +57,5 @@
     "!**/__tests__/",
     "!lib/buildInfo.json"
   ],
-  "gitHead": "5caa83c3e1e7607c5044132dfd0ba40449cf2bc3"
+  "gitHead": "205ea38efd4f49ec5a2f52267b76d19b9f5f1af9"
 }

package/src/components/PopupContent.css

@@ -1,10 +1,10 @@
 /* Mapka Popup Styles */
-.mapka-popup-container {
-  margin-top: -15px;
-  margin-bottom: -15px;
-  margin-left: -10px;
-  margin-right: -10px;
+.mapka-popup-container {}
 
+.maplibregl-popup-content {
+  padding: 0;
+  margin: 0;
+  border-radius: 12px;
 }
 
 .mapka-popup {

package/src/index.ts

@@ -17,3 +17,5 @@ export {
   MapkaDrawControlOptions,
   DrawMode,
 } from "./controls/MapkaDrawControl.js";
+
+export { loadMarkerIcon } from "./modules/icons.js";

package/src/modules/icons.ts

@@ -1,57 +1,93 @@
+import ky from "ky";
 import { debounce, uniq } from "es-toolkit";
 import { getMapkaUrl } from "../utils/url.js";
 import type { MapkaMap } from "../map.js";
 import type { MapStyleImageMissingEvent } from "maplibre-gl";
 
-let missingIcons: string[] = [];
-let loadedIcons: string[] = [];
-
 interface Icon {
   id: string;
   svg: string;
 }
 
+const svgCache = new Map<string, string>();
+const pendingResolvers = new Map<string, PromiseWithResolvers<string>>();
+let pendingIds: string[] = [];
+
 /**
- * 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: MapkaMap) => {
-  if (missingIcons.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())
-    .then((data: Icon[]) => {
-      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)}`;
-      });
+const flushIcons = debounce(() => {
+  const idsToFetch = uniq(pendingIds).filter((id) => !svgCache.has(id));
+  if (idsToFetch.length === 0) return;
+
+  pendingIds = [];
+
+  ky.get(`${getMapkaUrl()}/v1/icons`, {
+    searchParams: idsToFetch.map((id) => ["ids", id]),
+  })
+    .json<Icon[]>()
+    .then((data) => {
+      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: string): Promise<string> {
+  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<string>();
+  pendingResolvers.set(id, resolver);
+  pendingIds.push(id);
+  flushIcons();
+  return resolver.promise;
+}
+
+const isStyleImage = (id: string) => 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: MapkaMap, event: MapStyleImageMissingEvent) {
-  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/src/modules/markers.css

@@ -0,0 +1,18 @@
+.mapka-marker-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+}
+
+/* Icon markers (maki / temaki) render in a fixed 32×32 box. */
+.mapka-marker-icon[data-icon-id] {
+  width: 32px;
+  height: 32px;
+}
+
+.mapka-marker-icon[data-icon-id] svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}

package/src/modules/markers.ts

@@ -1,11 +1,18 @@
 import { Marker } from "maplibre-gl";
 import { get } from "es-toolkit/compat";
 import { remove } from "es-toolkit";
-import type { Offset, StyleSpecification } from "maplibre-gl";
+import { loadMarkerIcon } from "./icons.js";
+import type { MarkerOptions, Offset, StyleSpecification } from "maplibre-gl";
 import type { MapkaMap } from "../map.js";
 import type { MapkaMarkerOptions } from "../types/marker.js";
 import type { MapkaMarkerPopupOptions, MapkaPopupOptions } from "../types/popup.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: [number, number] = [0, -14];
+
 /**
  * Default marker offset
  * @see https://github.com/maplibre/maplibre-gl-js/blob/master/src/ui/marker.ts#L457
@@ -110,10 +117,67 @@ function setupMarkerPopupListeners(
   }
 }
 
+/**
+ * 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: HTMLElement, color?: string) {
+  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: MapkaMap,
+  options: MapkaMarkerOptions,
+): HTMLElement | undefined {
+  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: MapkaMap, markersOptions: MapkaMarkerOptions[]) {
   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: MarkerOptions = {
+      ...rest,
+      element: createMarkerElement(currentMap, markerOptions),
+      offset,
+    };
+
+    const newMarker = new Marker(markerOpts).setLngLat(lngLat).addTo(currentMap);
 
     currentMap.markers.push({
       id: getMarkerId(markerOptions),

package/src/styles.css

@@ -5,3 +5,4 @@
 @import "./components/PopupDataRows.css";
 @import "./components/PopupContent.css";
 @import "./controls/MapkaDrawControl.css";
+@import "./modules/markers.css";

package/src/types/marker.ts

@@ -1,10 +1,12 @@
 import type { MarkerOptions } from "maplibre-gl";
 import type { MapkaMarkerPopupOptions } from "./popup.js";
 
-export interface MapkaMarkerOptions extends MarkerOptions {
+export interface MapkaMarkerOptions extends Omit<MarkerOptions, "color"> {
   id?: string;
   lngLat: [number, number];
-  color?: string;
+  /** Mapka icon id (e.g. `"maki:restaurant"`). Omit to use the default pin. */
   icon?: string;
+  /** CSS color applied to the SVG fill. Default pin uses `#3FB1CE` when unset. */
+  color?: string;
   popup?: MapkaMarkerPopupOptions;
 }