@mapka/maplibre-gl-sdk 0.12.0 → 0.13.0

package/lib/components/DownloadIcon.d.ts

@@ -0,0 +1,4 @@
+/** biome-ignore-all lint/correctness/noUnusedImports: <explanation> */
+import { h } from "preact";
+export declare const DownloadIcon: () => h.JSX.Element;
+//# sourceMappingURL=DownloadIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadIcon.d.ts","sourceRoot":"","sources":["../../src/components/DownloadIcon.tsx"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAE3B,eAAO,MAAM,YAAY,qBAqBxB,CAAC"}

package/lib/components/DownloadIcon.js

@@ -0,0 +1,10 @@
+/** biome-ignore-all lint/correctness/noUnusedImports: <explanation> */
+import { h } from "preact";
+export const DownloadIcon = () => {
+    return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-label": "Download" },
+        h("title", null, "Download"),
+        h("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        h("path", { d: "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" }),
+        h("path", { d: "M7 11l5 5l5 -5" }),
+        h("path", { d: "M12 4l0 12" })));
+};

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

@@ -1 +1 @@
-{"version":3,"file":"PopupContent.d.ts","sourceRoot":"","sources":["../../src/components/PopupContent.tsx"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,OAAO,EAAE,CAAC,EAAY,MAAM,QAAQ,CAAC;AAErC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,UAAU,UAAW,SAAQ,iBAAiB;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA8LD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,UAAU,EACV,OAAO,GACR,EAAE,UAAU,iBAqBZ"}
+{"version":3,"file":"PopupContent.d.ts","sourceRoot":"","sources":["../../src/components/PopupContent.tsx"],"names":[],"mappings":"AAAA,uEAAuE;AAEvE,OAAO,EAAE,CAAC,EAAY,MAAM,QAAQ,CAAC;AAErC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,UAAU,UAAW,SAAQ,iBAAiB;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA8LD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,UAAU,EACV,OAAO,GACR,EAAE,UAAU,iBAqBZ"}

package/lib/components/ProgressDownIcon.d.ts

@@ -0,0 +1,4 @@
+/** biome-ignore-all lint/correctness/noUnusedImports: <explanation> */
+import { h } from "preact";
+export declare const ProgressDownIcon: () => h.JSX.Element;
+//# sourceMappingURL=ProgressDownIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressDownIcon.d.ts","sourceRoot":"","sources":["../../src/components/ProgressDownIcon.tsx"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAE3B,eAAO,MAAM,gBAAgB,qBAyB5B,CAAC"}

package/lib/components/ProgressDownIcon.js

@@ -0,0 +1,14 @@
+/** biome-ignore-all lint/correctness/noUnusedImports: <explanation> */
+import { h } from "preact";
+export const ProgressDownIcon = () => {
+    return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon icon-tabler icons-tabler-outline icon-tabler-progress-down" },
+        h("title", null, "Progress Download"),
+        h("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        h("path", { d: "M10 20.777a8.942 8.942 0 0 1 -2.48 -.969" }),
+        h("path", { d: "M14 3.223a9.003 9.003 0 0 1 0 17.554" }),
+        h("path", { d: "M4.579 17.093a8.961 8.961 0 0 1 -1.227 -2.592" }),
+        h("path", { d: "M3.124 10.5c.16 -.95 .468 -1.85 .9 -2.675l.169 -.305" }),
+        h("path", { d: "M6.907 4.579a8.954 8.954 0 0 1 3.093 -1.356" }),
+        h("path", { d: "M12 9v6" }),
+        h("path", { d: "M15 12l-3 3l-3 -3" })));
+};

package/lib/controls/MapkaExportControl.d.ts

@@ -0,0 +1,21 @@
+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;
+}
+export declare class MapkaExportControl implements IControl {
+    private map;
+    private container;
+    private options;
+    private isExporting;
+    constructor(options?: MapkaExportControlOptions);
+    private downloadImage;
+    private handleError;
+    private onClick;
+    private render;
+    private unmount;
+    onAdd(map: MapkaMap): HTMLElement;
+    onRemove(): void;
+}
+//# sourceMappingURL=MapkaExportControl.d.ts.map

package/lib/controls/MapkaExportControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapkaExportControl.d.ts","sourceRoot":"","sources":["../../src/controls/MapkaExportControl.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAiBD,qBAAa,kBAAmB,YAAW,QAAQ;IACjD,OAAO,CAAC,GAAG,CAAuB;IAClC,OAAO,CAAC,SAAS,CAA6B;IAC9C,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,WAAW,CAAS;gBAEhB,OAAO,GAAE,yBAA8B;IAOnD,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,OAAO,CAmBb;IAEF,OAAO,CAAC,MAAM;IAQd,OAAO,CAAC,OAAO;IAQR,KAAK,CAAC,GAAG,EAAE,QAAQ,GAAG,WAAW;IAWjC,QAAQ,IAAI,IAAI;CAQxB"}

package/lib/controls/MapkaExportControl.js

@@ -0,0 +1,76 @@
+// 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";
+const Button = ({ isExporting, onClick }) => {
+    return (h("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 ? h(ProgressDownIcon, null) : h(DownloadIcon, null)));
+};
+export class MapkaExportControl {
+    map;
+    container;
+    options;
+    isExporting = false;
+    constructor(options = {}) {
+        this.options = {
+            filename: "map-export",
+            ...options,
+        };
+    }
+    downloadImage(img) {
+        const link = document.createElement("a");
+        link.download = `${this.options.filename}.png`;
+        link.href = img.src;
+        link.click();
+        link.remove();
+    }
+    handleError(error) {
+        this.map?.logger.error(error, "Failed to export map image");
+    }
+    onClick = async () => {
+        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();
+        });
+    };
+    render() {
+        if (!this.container) {
+            this.map?.logger.error("Export control container not found for rendering");
+            return;
+        }
+        render(h(Button, { isExporting: this.isExporting, onClick: this.onClick }), this.container);
+    }
+    unmount() {
+        if (!this.container) {
+            this.map?.logger.error("Export control container not found during unmount");
+            return;
+        }
+        render(null, this.container);
+    }
+    onAdd(map) {
+        this.map = map;
+        this.container = document.createElement("div");
+        this.container.className = "mapka-export-control";
+        this.render();
+        return this.container;
+    }
+    onRemove() {
+        this.unmount();
+        this.container?.remove?.();
+        this.container = undefined;
+        this.map = undefined;
+    }
+}

package/lib/index.d.ts

@@ -2,6 +2,8 @@ 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 { MapkaMap as Map } from "./map.js";
 export { MapkaMapOptions as MapOptions } from "./map.js";
+export { MapkaExportControl, MapkaExportControlOptions, } from "./controls/MapkaExportControl.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;AAEjC,OAAO,EAAE,QAAQ,IAAI,GAAG,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,eAAe,IAAI,UAAU,EAAE,MAAM,UAAU,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,mBAAmB,CAAC;AAElC,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"}

package/lib/index.js

@@ -2,4 +2,6 @@ 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 { MapkaMap as Map } from "./map.js";
+export { MapkaExportControl, } from "./controls/MapkaExportControl.js";

package/lib/map.d.ts

@@ -1,6 +1,7 @@
 import * as maplibregl from "maplibre-gl";
 import type { Marker, Popup, MapOptions, StyleSwapOptions, StyleOptions, StyleSpecification } from "maplibre-gl";
 import type { MapkaMarkerOptions, MapkaPopupOptions } from "./types/marker.js";
+import type { MapkaExportOptions } from "./types/export.js";
 export interface MapkaMapOptions extends MapOptions {
     maxPopups?: number;
     apiKey: string;
@@ -17,8 +18,14 @@ export type MapMapkaMarker = {
     options: MapkaMarkerOptions;
     marker: Marker;
 };
+interface Logger {
+    log: (...args: unknown[]) => void;
+    warn: (...args: unknown[]) => void;
+    error: (...args: unknown[]) => void;
+}
 export declare class MapkaMap extends maplibregl.Map {
     static env: string;
+    logger: Logger;
     markers: MapMapkaMarker[];
     maxPopups: number;
     popups: MapMapkaPopup[];
@@ -27,9 +34,11 @@ export declare class MapkaMap extends maplibregl.Map {
     addMarkers(markers: MapkaMarkerOptions[]): void;
     updateMarkers(markers: MapkaMarkerOptions[]): void;
     removeMarkers(): void;
-    openPopup(popup: MapkaPopupOptions, id?: string): string;
+    openPopup(popup: MapkaPopupOptions): string;
     closePopup(id: string): void;
-    updatePopup(popup: MapkaPopupOptions, id?: string): void;
+    updatePopup(popup: MapkaPopupOptions): void;
     removePopups(): void;
+    export(options?: MapkaExportOptions): Promise<HTMLImageElement>;
 }
+export {};
 //# sourceMappingURL=map.d.ts.map

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;AAiB1C,OAAO,KAAK,EACV,MAAM,EACN,KAAK,EAGL,UAAU,EAEV,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EACnB,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE/E,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;CAChC;AA0BD,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,WAAW,CAAC;IACvB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,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,qBAAa,QAAS,SAAQ,UAAU,CAAC,GAAG;IAC1C,MAAM,CAAC,GAAG,EAAE,MAAM,CAAU;IAErB,OAAO,EAAE,cAAc,EAAE,CAAM;IAE/B,SAAS,EAAE,MAAM,CAAK;IACtB,MAAM,EAAE,aAAa,EAAE,CAAM;gBAEjB,EAAE,gBAAgB,EAAE,MAAM,EAAE,SAAa,EAAE,GAAG,OAAO,EAAE,EAAE,eAAe;IAoBpF,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,EAAE,EAAE,GAAE,MAA0B;IAIlE,UAAU,CAAC,EAAE,EAAE,MAAM;IAIrB,WAAW,CAAC,KAAK,EAAE,iBAAiB,EAAE,EAAE,GAAE,MAA0B;IAIpE,YAAY;CAGpB"}
+{"version":3,"file":"map.d.ts","sourceRoot":"","sources":["../src/map.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,aAAa,CAAC;AAiB1C,OAAO,KAAK,EACV,MAAM,EACN,KAAK,EAGL,UAAU,EAEV,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EACnB,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAG5D,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;CAChC;AA0BD,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,WAAW,CAAC;IACvB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,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,MAAM,EAAE,aAAa,EAAE,CAAM;gBAEjB,EAAE,gBAAgB,EAAE,MAAM,EAAE,SAAa,EAAE,GAAG,OAAO,EAAE,EAAE,eAAe;IAoBpF,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;IAIlC,UAAU,CAAC,EAAE,EAAE,MAAM;IAIrB,WAAW,CAAC,KAAK,EAAE,iBAAiB;IAIpC,YAAY;IAIN,MAAM,CAAC,OAAO,CAAC,EAAE,kBAAkB;CAGjD"}

package/lib/map.js

@@ -1,7 +1,8 @@
 import * as maplibregl from "maplibre-gl";
 import { loadLayersIcons } from "./modules/icons.js";
-import { closeOnMapClickPopups, closePopupsById, getPopupId, openPopup, removePopups, updatePopup, } from "./modules/popup.js";
+import { closeOnMapClickPopups, closePopupsById, openPopup, removePopups, updatePopup, } from "./modules/popup.js";
 import { addMarkers, addStyleDiffMarkers, addStyleMarkers, removeMarkers, updateMarkers, } from "./modules/markers.js";
+import { exportMap } from "./modules/export.js";
 const noopTransformRequest = (url) => {
     return {
         url,
@@ -23,6 +24,7 @@ const noopTransformStyle = (_, next) => {
 };
 export class MapkaMap extends maplibregl.Map {
     static env = "prod";
+    logger = console;
     markers = [];
     maxPopups = 1;
     popups = [];
@@ -62,16 +64,19 @@ export class MapkaMap extends maplibregl.Map {
     removeMarkers() {
         removeMarkers(this);
     }
-    openPopup(popup, id = getPopupId(popup)) {
-        return openPopup(this, popup, id);
+    openPopup(popup) {
+        return openPopup(this, popup);
     }
     closePopup(id) {
         closePopupsById(this, id);
     }
-    updatePopup(popup, id = getPopupId(popup)) {
-        return updatePopup(this, popup, id);
+    updatePopup(popup) {
+        return updatePopup(this, popup);
     }
     removePopups() {
         removePopups(this);
     }
+    async export(options) {
+        return exportMap(this, options);
+    }
 }

package/lib/modules/export.d.ts

@@ -0,0 +1,4 @@
+import type { MapkaMap } from "../map.js";
+import type { MapkaExportOptions } from "../types/export.js";
+export declare function exportMap(map: MapkaMap, options?: MapkaExportOptions): Promise<HTMLImageElement>;
+//# sourceMappingURL=export.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"export.d.ts","sourceRoot":"","sources":["../../src/modules/export.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D,wBAAsB,SAAS,CAC7B,GAAG,EAAE,QAAQ,EACb,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,gBAAgB,CAAC,CA+C3B"}

package/lib/modules/export.js

@@ -0,0 +1,40 @@
+import { toPng } from "html-to-image";
+export async function exportMap(map, options = {}) {
+    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((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/lib/modules/popup.d.ts

@@ -6,9 +6,9 @@ export declare function getPopupId(popup: {
 }): string;
 export declare function getOnClose(map: MapkaMap, id: string): () => void;
 export declare function enforceMaxPopups(map: MapkaMap): void;
-export declare function openPopup(map: MapkaMap, options: MapkaPopupOptions, id: string): string;
+export declare function openPopup(map: MapkaMap, options: MapkaPopupOptions): string;
 export declare function updatePopupBaseOptions(popup: Popup, options: MapkaPopupOptions, newOptions: Omit<MapkaPopupOptions, "content">): Popup;
-export declare function updatePopup(map: MapkaMap, { content, ...newOptions }: MapkaPopupOptions, id: string): void;
+export declare function updatePopup(map: MapkaMap, { content, ...newOptions }: MapkaPopupOptions): void;
 export declare function closeOnMapClickPopups(map: MapkaMap): void;
 export declare function closePopupsById(map: MapkaMap, id: string): void;
 export declare function removePopups(map: MapkaMap): void;

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

@@ -1 +1 @@
-{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/modules/popup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIpC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAG1C,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,UAEhD;AAED,wBAAgB,UAAU,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,cAEnD;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,QAAQ,QAM7C;AAED,wBAAgB,SAAS,CAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,iBAAiB,EAAE,EAAE,EAAE,MAAM,UAyD9E;AAID,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,iBAAiB,EAC1B,UAAU,EAAE,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,SAY/C;AAED,wBAAgB,WAAW,CACzB,GAAG,EAAE,QAAQ,EACb,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,EAAE,iBAAiB,EAC7C,EAAE,EAAE,MAAM,QA6BX;AAED,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,QAAQ,QAQlD;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,QAMxD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,QAMzC"}
+{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/modules/popup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIpC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAG1C,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,UAEhD;AAED,wBAAgB,UAAU,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,cAEnD;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,QAAQ,QAM7C;AAED,wBAAgB,SAAS,CAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,iBAAiB,UAqDlE;AAID,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,iBAAiB,EAC1B,UAAU,EAAE,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,SAY/C;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,EAAE,iBAAiB,QA0BvF;AAED,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,QAAQ,QAQlD;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,QAMxD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,QAMzC"}

package/lib/modules/popup.js

@@ -18,8 +18,8 @@ export function enforceMaxPopups(map) {
         popupToRemove?.container.remove();
     }
 }
-export function openPopup(map, options, id) {
-    const { lngLat, content, closeButton, ...popupOptions } = options;
+export function openPopup(map, options) {
+    const { lngLat, content, closeButton, id = getPopupId(options), ...popupOptions } = options;
     if (content instanceof HTMLElement) {
         const popup = new Popup({
             ...popupOptions,
@@ -65,7 +65,7 @@ export function openPopup(map, options, id) {
         return openPopup(map, {
             ...options,
             content: newContent,
-        }, id);
+        });
     }
     throw new Error("Invalid popup content");
 }
@@ -82,7 +82,8 @@ export function updatePopupBaseOptions(popup, options, newOptions) {
     }
     return popup;
 }
-export function updatePopup(map, { content, ...newOptions }, id) {
+export function updatePopup(map, { content, ...newOptions }) {
+    const id = getPopupId(newOptions);
     if (content instanceof HTMLElement) {
         const mapkaPopups = map.popups.filter((popup) => popup.id === id);
         for (const { popup, options } of mapkaPopups) {
@@ -105,7 +106,7 @@ export function updatePopup(map, { content, ...newOptions }, id) {
         return updatePopup(map, {
             ...newOptions,
             content: newContent,
-        }, id);
+        });
     }
 }
 export function closeOnMapClickPopups(map) {

package/lib/types/export.d.ts

@@ -0,0 +1,7 @@
+export type MapkaExportOptions = {
+    hideControls?: boolean;
+    hideMarkers?: boolean;
+    hidePopups?: boolean;
+    bbox?: [number, number, number, number];
+};
+//# sourceMappingURL=export.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"export.d.ts","sourceRoot":"","sources":["../../src/types/export.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CACzC,CAAC"}

package/lib/types/export.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapka/maplibre-gl-sdk",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "type": "module",
   "description": "Mapka JS SDK",
   "sideEffects": false,
@@ -24,6 +24,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "es-toolkit": "^1.43.0",
+    "html-to-image": "^1.11.13",
     "maplibre-gl": "^5.15.0",
     "preact": "^10.28.0"
   },
@@ -34,5 +35,5 @@
     "!**/__tests__/",
     "!lib/buildInfo.json"
   ],
-  "gitHead": "b69a4f7130ea4d7d9d6c3a16ef26308cb39e1555"
+  "gitHead": "912eb7ca07c1c2ab1e9eaadab20e2c1786c0e967"
 }

package/src/components/DownloadIcon.tsx

@@ -0,0 +1,25 @@
+/** biome-ignore-all lint/correctness/noUnusedImports: <explanation> */
+import { h } from "preact";
+
+export const DownloadIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-label="Download"
+    >
+      <title>Download</title>
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
+      <path d="M7 11l5 5l5 -5" />
+      <path d="M12 4l0 12" />
+    </svg>
+  );
+};

package/src/components/PopupContent.tsx

@@ -1,4 +1,5 @@
 /** biome-ignore-all lint/correctness/noUnusedImports: <explanation> */
+
 import { h, Fragment } from "preact";
 import { useState } from "preact/hooks";
 import type { MapkaPopupContent } from "../types/marker.js";

package/src/components/ProgressDownIcon.tsx

@@ -0,0 +1,29 @@
+/** biome-ignore-all lint/correctness/noUnusedImports: <explanation> */
+import { h } from "preact";
+
+export const ProgressDownIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="icon icon-tabler icons-tabler-outline icon-tabler-progress-down"
+    >
+      <title>Progress Download</title>
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M10 20.777a8.942 8.942 0 0 1 -2.48 -.969" />
+      <path d="M14 3.223a9.003 9.003 0 0 1 0 17.554" />
+      <path d="M4.579 17.093a8.961 8.961 0 0 1 -1.227 -2.592" />
+      <path d="M3.124 10.5c.16 -.95 .468 -1.85 .9 -2.675l.169 -.305" />
+      <path d="M6.907 4.579a8.954 8.954 0 0 1 3.093 -1.356" />
+      <path d="M12 9v6" />
+      <path d="M15 12l-3 3l-3 -3" />
+    </svg>
+  );
+};

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,11 @@ 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 { MapkaMap as Map } from "./map.js";
 export { MapkaMapOptions as MapOptions } from "./map.js";
+export {
+  MapkaExportControl,
+  MapkaExportControlOptions,
+} from "./controls/MapkaExportControl.js";