@mapka/maplibre-gl-sdk 0.12.0 → 0.13.1

package/src/controls/MapkaExportControl.tsx

@@ -0,0 +1,111 @@
+// biome-ignore lint/correctness/noUnusedImports: preact jsx
+import { h } from "preact";
+import { render } from "preact";
+import { DownloadIcon } from "../components/DownloadIcon.js";
+import { ProgressDownIcon } from "../components/ProgressDownIcon.js";
+import type { IControl } from "maplibre-gl";
+import type { MapkaMap } from "../map.js";
+import type { MapkaExportOptions } from "../types/export.js";
+
+export interface MapkaExportControlOptions extends MapkaExportOptions {
+  filename?: string;
+}
+
+const Button = ({ isExporting, onClick }: { isExporting: boolean; onClick: () => void }) => {
+  return (
+    <button
+      type="button"
+      className="maplibregl-ctrl maplibregl-ctrl-group"
+      title="Export map as PNG"
+      aria-label="Export map as PNG"
+      disabled={isExporting}
+      onClick={onClick}
+    >
+      {isExporting ? <ProgressDownIcon /> : <DownloadIcon />}
+    </button>
+  );
+};
+
+export class MapkaExportControl implements IControl {
+  private map: MapkaMap | undefined;
+  private container: HTMLDivElement | undefined;
+  private options: MapkaExportControlOptions;
+  private isExporting = false;
+
+  constructor(options: MapkaExportControlOptions = {}) {
+    this.options = {
+      filename: "map-export",
+      ...options,
+    };
+  }
+
+  private downloadImage(img: HTMLImageElement): void {
+    const link = document.createElement("a");
+    link.download = `${this.options.filename}.png`;
+    link.href = img.src;
+
+    link.click();
+    link.remove();
+  }
+
+  private handleError(error: Error) {
+    this.map?.logger.error(error, "Failed to export map image");
+  }
+
+  private onClick = async (): Promise<void> => {
+    if (!this.map || this.isExporting) return;
+
+    this.isExporting = true;
+    this.render();
+
+    this.map
+      .export({
+        hideControls: true,
+        hideMarkers: false,
+        hidePopups: false,
+        ...this.options,
+      })
+      .then((img) => this.downloadImage(img))
+      .catch((error) => this.handleError(error))
+      .finally(() => {
+        this.isExporting = false;
+        this.render();
+      });
+  };
+
+  private render(): void {
+    if (!this.container) {
+      this.map?.logger.error("Export control container not found for rendering");
+      return;
+    }
+    render(<Button isExporting={this.isExporting} onClick={this.onClick} />, this.container);
+  }
+
+  private unmount(): void {
+    if (!this.container) {
+      this.map?.logger.error("Export control container not found during unmount");
+      return;
+    }
+    render(null, this.container);
+  }
+
+  public onAdd(map: MapkaMap): HTMLElement {
+    this.map = map;
+
+    this.container = document.createElement("div");
+    this.container.className = "mapka-export-control";
+
+    this.render();
+
+    return this.container;
+  }
+
+  public onRemove(): void {
+    this.unmount();
+
+    this.container?.remove?.();
+
+    this.container = undefined;
+    this.map = undefined;
+  }
+}

package/src/index.ts

@@ -2,6 +2,12 @@ export * from "maplibre-gl";
 export * from "./types/layer.js";
 export * from "./types/marker.js";
 export * from "./types/style.js";
+export * from "./types/export.js";
+export * from "./constants/styles.js";
 
 export { MapkaMap as Map } from "./map.js";
 export { MapkaMapOptions as MapOptions } from "./map.js";
+export {
+  MapkaExportControl,
+  MapkaExportControlOptions,
+} from "./controls/MapkaExportControl.js";

package/src/map.ts

@@ -27,6 +27,8 @@ import type {
   StyleSpecification,
 } from "maplibre-gl";
 import type { MapkaMarkerOptions, MapkaPopupOptions } from "./types/marker.js";
+import type { MapkaExportOptions } from "./types/export.js";
+import { exportMap } from "./modules/export.js";
 
 export interface MapkaMapOptions extends MapOptions {
   maxPopups?: number;
@@ -72,9 +74,16 @@ export type MapMapkaMarker = {
   marker: Marker;
 };
 
+interface Logger {
+  log: (...args: unknown[]) => void;
+  warn: (...args: unknown[]) => void;
+  error: (...args: unknown[]) => void;
+}
+
 export class MapkaMap extends maplibregl.Map {
   static env: string = "prod";
 
+  public logger: Logger = console;
   public markers: MapMapkaMarker[] = [];
 
   public maxPopups: number = 1;
@@ -129,19 +138,23 @@ export class MapkaMap extends maplibregl.Map {
     removeMarkers(this);
   }
 
-  public openPopup(popup: MapkaPopupOptions, id: string = getPopupId(popup)) {
-    return openPopup(this, popup, id);
+  public openPopup(popup: MapkaPopupOptions) {
+    return openPopup(this, popup);
   }
 
   public closePopup(id: string) {
     closePopupsById(this, id);
   }
 
-  public updatePopup(popup: MapkaPopupOptions, id: string = getPopupId(popup)) {
-    return updatePopup(this, popup, id);
+  public updatePopup(popup: MapkaPopupOptions) {
+    return updatePopup(this, popup);
   }
 
   public removePopups() {
     removePopups(this);
   }
+
+  public async export(options?: MapkaExportOptions) {
+    return exportMap(this, options);
+  }
 }

package/src/modules/export.ts

@@ -0,0 +1,55 @@
+import { toPng } from "html-to-image";
+import type { MapkaMap } from "../map.js";
+import type { MapkaExportOptions } from "../types/export.js";
+
+export async function exportMap(
+  map: MapkaMap,
+  options: MapkaExportOptions = {},
+): Promise<HTMLImageElement> {
+  const { hideControls = false, hideMarkers = false, hidePopups = false, bbox } = options;
+
+  const container = map.getContainer();
+  const originalBounds = map.getBounds();
+
+  if (bbox) {
+    map.fitBounds(bbox, { padding: 20, animate: false });
+  }
+
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    map.once("render", () => {
+      toPng(container, {
+        skipFonts: navigator.userAgent.includes("Firefox"),
+        filter: (node) => {
+          if (node.classList) {
+            const isControlsVisibleOrNotControl =
+              !hideControls || !node.classList.contains("maplibregl-control-container");
+            const isMarkersVisibleOrNotMarker =
+              !hideMarkers || !node.classList.contains("maplibregl-marker");
+            const isPopupsVisibleOrNotPopup =
+              !hidePopups || !node.classList.contains("maplibregl-popup");
+
+            return (
+              isControlsVisibleOrNotControl &&
+              isMarkersVisibleOrNotMarker &&
+              isPopupsVisibleOrNotPopup
+            );
+          }
+          return true;
+        },
+      })
+        .then((dataUrl) => {
+          const img = new Image();
+          img.src = dataUrl;
+          img.onload = () => resolve(img);
+          img.onerror = reject;
+        })
+        .catch(reject)
+        .finally(() => {
+          if (bbox) {
+            map.fitBounds(originalBounds, { animate: false });
+          }
+        });
+    });
+    map.triggerRepaint();
+  });
+}

package/src/modules/popup.tsx

@@ -6,7 +6,7 @@ import { render } from "preact";
 import { remove } from "es-toolkit/array";
 import type { MapkaPopupOptions } from "../types/marker.js";
 import type { MapkaMap } from "../map.js";
-import { isEqual } from "es-toolkit";
+import { isEqual, isPlainObject } from "es-toolkit";
 
 export function getPopupId(popup: { id?: string }) {
   return popup.id ?? `popup-${crypto.randomUUID()}`;
@@ -20,12 +20,15 @@ export function enforceMaxPopups(map: MapkaMap) {
   if (map.popups.length > map.maxPopups) {
     const popupToRemove = map.popups.shift();
     popupToRemove?.popup.remove();
+    if (isPlainObject(popupToRemove?.options.content)) {
+      render(null, popupToRemove.container);
+    }
     popupToRemove?.container.remove();
   }
 }
 
-export function openPopup(map: MapkaMap, options: MapkaPopupOptions, id: string) {
-  const { lngLat, content, closeButton, ...popupOptions } = options;
+export function openPopup(map: MapkaMap, options: MapkaPopupOptions) {
+  const { lngLat, content, closeButton, id = getPopupId(options), ...popupOptions } = options;
   if (content instanceof HTMLElement) {
     const popup = new Popup({
       ...popupOptions,
@@ -70,14 +73,10 @@ export function openPopup(map: MapkaMap, options: MapkaPopupOptions, id: string)
     return id;
   } else if (typeof content === "function") {
     const newContent = content(id);
-    return openPopup(
-      map,
-      {
-        ...options,
-        content: newContent,
-      },
-      id,
-    );
+    return openPopup(map, {
+      ...options,
+      content: newContent,
+    });
   }
 
   throw new Error("Invalid popup content");
@@ -102,11 +101,9 @@ export function updatePopupBaseOptions(
   return popup;
 }
 
-export function updatePopup(
-  map: MapkaMap,
-  { content, ...newOptions }: MapkaPopupOptions,
-  id: string,
-) {
+export function updatePopup(map: MapkaMap, { content, ...newOptions }: MapkaPopupOptions) {
+  const id = getPopupId(newOptions);
+
   if (content instanceof HTMLElement) {
     const mapkaPopups = map.popups.filter((popup) => popup.id === id);
     for (const { popup, options } of mapkaPopups) {
@@ -125,14 +122,10 @@ export function updatePopup(
     }
   } else if (typeof content === "function") {
     const newContent = content(id);
-    return updatePopup(
-      map,
-      {
-        ...newOptions,
-        content: newContent,
-      },
-      id,
-    );
+    return updatePopup(map, {
+      ...newOptions,
+      content: newContent,
+    });
   }
 }
 
@@ -142,6 +135,9 @@ export function closeOnMapClickPopups(map: MapkaMap) {
   );
   for (const popup of popupsToCloseOnMapClick) {
     popup.popup.remove();
+    if (isPlainObject(popup.options.content)) {
+      render(null, popup.container);
+    }
     popup.container.remove();
   }
 }
@@ -150,6 +146,9 @@ export function closePopupsById(map: MapkaMap, id: string) {
   const removedPopups = remove(map.popups, (popup) => popup.id === id);
   for (const popup of removedPopups) {
     popup.popup.remove();
+    if (isPlainObject(popup.options.content)) {
+      render(null, popup.container);
+    }
     popup.container.remove();
   }
 }
@@ -157,6 +156,9 @@ export function closePopupsById(map: MapkaMap, id: string) {
 export function removePopups(map: MapkaMap) {
   for (const popup of map.popups) {
     popup.popup.remove();
+    if (isPlainObject(popup.options.content)) {
+      render(null, popup.container);
+    }
     popup.container.remove();
   }
   map.popups = [];

package/src/types/export.ts

@@ -0,0 +1,6 @@
+export type MapkaExportOptions = {
+  hideControls?: boolean;
+  hideMarkers?: boolean;
+  hidePopups?: boolean;
+  bbox?: [number, number, number, number];
+};