@mapka/maplibre-gl-sdk 0.5.2

package/src/map.ts

@@ -0,0 +1,43 @@
+import * as maplibregl from "maplibre-gl";
+import type { RequestTransformFunction, MapOptions } from "maplibre-gl";
+import { loadLayersIcons } from "./modules/icons.js";
+
+export interface MapkaMapOptions extends MapOptions {
+  apiKey: string;
+  env?: "dev" | "prod" | "local";
+}
+
+const noopTransformRequest: RequestTransformFunction = (url) => {
+  return {
+    url,
+  };
+};
+
+const createTransformRequest =
+  (apiKey: string, transformRequest?: RequestTransformFunction | null): RequestTransformFunction =>
+  (url) => {
+    if (url.includes("mapka.dev") || url.includes("mapka.localhost")) {
+      return {
+        url,
+        headers: {
+          Authorization: `Bearer ${apiKey}`,
+        },
+      };
+    }
+    return transformRequest ? transformRequest(url) : noopTransformRequest(url);
+  };
+
+export class MapkaMap extends maplibregl.Map {
+  static env: string = "prod";
+
+  public constructor({ transformRequest, apiKey, ...props }: MapkaMapOptions) {
+    super({
+      ...props,
+      transformRequest: createTransformRequest(apiKey, transformRequest),
+    });
+
+    super.on("styleimagemissing", (event: maplibregl.MapStyleImageMissingEvent) => {
+      loadLayersIcons(this, event);
+    });
+  }
+}

package/src/modules/icons.ts

@@ -0,0 +1,57 @@
+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;
+}
+
+/**
+ * Load missing icons from Mapka API
+ * Inspired by https://github.com/mapbox/mapbox-gl-js/issues/5529
+ */
+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)}`;
+      });
+    });
+}, 50);
+
+/**
+ * Load any icons that are missing from the map
+ * Only supports icons from Mapka API maki, temaki and tabler
+ * @param map
+ * @param event
+ */
+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);
+}

package/src/utils/url.ts

@@ -0,0 +1,12 @@
+import { MapkaMap } from "../map.js";
+
+export function getMapkaUrl() {
+  console.log("MapkaMap.env", MapkaMap.env);
+  if (MapkaMap.env === "dev") {
+    return "https://api.dev.mapka.dev";
+  }
+  if (MapkaMap.env === "local") {
+    return "https://api.mapka.localhost";
+  }
+  return "https://api.mapka.dev";
+}