@mapka/maplibre-gl-sdk 0.11.0 → 0.13.0

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";

package/src/map.ts

@@ -5,13 +5,14 @@ import {
   closePopupsById,
   getPopupId,
   openPopup,
+  removePopups,
   updatePopup,
 } from "./modules/popup.js";
 import {
   addMarkers,
   addStyleDiffMarkers,
   addStyleMarkers,
-  clearMarkers,
+  removeMarkers,
   updateMarkers,
 } from "./modules/markers.js";
 import type {
@@ -26,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;
@@ -71,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;
@@ -124,19 +134,27 @@ export class MapkaMap extends maplibregl.Map {
     updateMarkers(this, markers);
   }
 
-  public clearMarkers() {
-    clearMarkers(this);
+  public removeMarkers() {
+    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/markers.ts

@@ -129,7 +129,7 @@ export function updateMarkers(map: MapkaMap, markersOptions: MapkaMarkerOptions[
   addMarkers(map, markersOptions);
 }
 
-export function clearMarkers(map: MapkaMap) {
+export function removeMarkers(map: MapkaMap) {
   for (const marker of map.markers) {
     marker.marker.remove();
   }

package/src/modules/popup.tsx

@@ -24,8 +24,8 @@ export function enforceMaxPopups(map: MapkaMap) {
   }
 }
 
-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 +70,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 +98,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 +119,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,
+    });
   }
 }
 
@@ -153,3 +143,11 @@ export function closePopupsById(map: MapkaMap, id: string) {
     popup.container.remove();
   }
 }
+
+export function removePopups(map: MapkaMap) {
+  for (const popup of map.popups) {
+    popup.popup.remove();
+    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];
+};