@mapka/maplibre-gl-sdk 0.9.0 → 0.11.0

package/lib/components/PopupContent.d.ts

@@ -0,0 +1,10 @@
+/** biome-ignore-all lint/correctness/noUnusedImports: <explanation> */
+import { h } from "preact";
+import type { MapkaPopupContent } from "../types/marker.js";
+interface PopupProps extends MapkaPopupContent {
+    onClose?: () => void;
+    closeButton?: boolean;
+}
+export declare function PopupContent({ title, description, closeButton, imageUrls, onFavorite, onClose, }: PopupProps): h.JSX.Element;
+export {};
+//# sourceMappingURL=PopupContent.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/PopupContent.js

@@ -0,0 +1,64 @@
+/** biome-ignore-all lint/correctness/noUnusedImports: <explanation> */
+import { h, Fragment } from "preact";
+import { useState } from "preact/hooks";
+function HeartIcon({ filled }) {
+    return (h("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-popup-icon" },
+        h("path", { d: "M16 28c7-4.73 14-10 14-17a6.98 6.98 0 0 0-7-7c-1.8 0-3.58.68-4.95 2.05L16 8.1l-2.05-2.05a6.98 6.98 0 0 0-9.9 0A6.98 6.98 0 0 0 2 11c0 7 7 12.27 14 17z", fill: filled ? "currentColor" : "none", stroke: "currentColor", "stroke-width": "2" })));
+}
+function CloseIcon() {
+    return (h("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-popup-icon" },
+        h("path", { d: "m6 6 20 20M26 6 6 26", fill: "none", stroke: "currentColor", "stroke-width": "3" })));
+}
+function ChevronLeftIcon() {
+    return (h("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-popup-icon mapka-popup-icon-sm" },
+        h("path", { d: "M20 28 8.7 16.7a1 1 0 0 1 0-1.4L20 4", fill: "none", stroke: "currentColor", "stroke-width": "4" })));
+}
+function ChevronRightIcon() {
+    return (h("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-popup-icon mapka-popup-icon-sm" },
+        h("path", { d: "m12 4 11.3 11.3a1 1 0 0 1 0 1.4L12 28", fill: "none", stroke: "currentColor", "stroke-width": "4" })));
+}
+function ImageCarousel({ imageUrls, title, onFavorite, id, closeButton, onClose, }) {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const handlePrev = (e) => {
+        e.stopPropagation();
+        setCurrentIndex((prev) => (prev === 0 ? imageUrls.length - 1 : prev - 1));
+    };
+    const handleNext = (e) => {
+        e.stopPropagation();
+        setCurrentIndex((prev) => (prev + 1) % imageUrls.length);
+    };
+    const handleFavoriteClick = (e) => {
+        e.stopPropagation();
+        if (onFavorite && id) {
+            onFavorite(id);
+        }
+    };
+    const handleCloseClick = (e) => {
+        e.stopPropagation();
+        onClose?.();
+    };
+    return (h("div", { class: "mapka-popup-carousel" },
+        h("div", { class: "mapka-popup-carousel-track", style: { transform: `translateX(-${currentIndex * 100}%)` } }, imageUrls.map((url, index) => (h("img", { key: index, src: url, alt: title || `Image ${index + 1}`, class: "mapka-popup-carousel-image" })))),
+        h("div", { class: "mapka-popup-carousel-actions" },
+            onFavorite && (h("button", { type: "button", class: "mapka-popup-action-btn", onClick: handleFavoriteClick, "aria-label": "Add to favorites" },
+                h(HeartIcon, null))),
+            closeButton && (h("button", { type: "button", class: "mapka-popup-action-btn", onClick: handleCloseClick, "aria-label": "Close" },
+                h(CloseIcon, null)))),
+        imageUrls.length > 1 && (h(Fragment, null,
+            h("button", { type: "button", class: "mapka-popup-carousel-btn mapka-popup-carousel-prev", onClick: handlePrev, "aria-label": "Previous image" },
+                h(ChevronLeftIcon, null)),
+            h("button", { type: "button", class: "mapka-popup-carousel-btn mapka-popup-carousel-next", onClick: handleNext, "aria-label": "Next image" },
+                h(ChevronRightIcon, null)),
+            h("div", { class: "mapka-popup-dots" }, imageUrls.map((_, index) => (h("button", { key: index, type: "button", class: `mapka-popup-dot ${index === currentIndex ? "mapka-popup-dot-active" : ""}`, onClick: (e) => {
+                    e.stopPropagation();
+                    setCurrentIndex(index);
+                }, "aria-label": `Go to image ${index + 1}` }))))))));
+}
+export function PopupContent({ title, description, closeButton, imageUrls, onFavorite, onClose, }) {
+    const hasImages = imageUrls && imageUrls.length > 0;
+    return (h("div", { class: "mapka-tooltip" },
+        hasImages && (h(ImageCarousel, { imageUrls: imageUrls, title: title, closeButton: closeButton, onFavorite: onFavorite, onClose: onClose })),
+        h("div", { class: "mapka-popup-content" },
+            title && h("h3", { class: "mapka-popup-title" }, title),
+            description && h("p", { class: "mapka-popup-description" }, description))));
+}

package/lib/map.d.ts

@@ -1,12 +1,34 @@
 import * as maplibregl from "maplibre-gl";
-import type { MapOptions, StyleSwapOptions, StyleOptions, StyleSpecification } from "maplibre-gl";
+import type { Marker, Popup, MapOptions, StyleSwapOptions, StyleOptions, StyleSpecification } from "maplibre-gl";
+import type { MapkaMarkerOptions, MapkaPopupOptions } from "./types/marker.js";
 export interface MapkaMapOptions extends MapOptions {
+    maxPopups?: number;
     apiKey: string;
     env?: "dev" | "prod" | "local";
 }
+export type MapMapkaPopup = {
+    id: string;
+    container: HTMLElement;
+    options: MapkaPopupOptions;
+    popup: Popup;
+};
+export type MapMapkaMarker = {
+    id: string;
+    options: MapkaMarkerOptions;
+    marker: Marker;
+};
 export declare class MapkaMap extends maplibregl.Map {
     static env: string;
-    constructor({ transformRequest, apiKey, ...options }: MapkaMapOptions);
+    markers: MapMapkaMarker[];
+    maxPopups: number;
+    popups: MapMapkaPopup[];
+    constructor({ transformRequest, apiKey, maxPopups, ...options }: MapkaMapOptions);
     setStyle(style: string | StyleSpecification, options?: StyleSwapOptions & StyleOptions): this;
+    addMarkers(markers: MapkaMarkerOptions[]): void;
+    updateMarkers(markers: MapkaMarkerOptions[]): void;
+    clearMarkers(): void;
+    openPopup(popup: MapkaPopupOptions, id?: string): string;
+    closePopup(id: string): void;
+    updatePopup(popup: MapkaPopupOptions, id?: string): void;
 }
 //# 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;AAG1C,OAAO,KAAK,EAGV,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;CAChC;AA0BD,qBAAa,QAAS,SAAQ,UAAU,CAAC,GAAG;IAC1C,MAAM,CAAC,GAAG,EAAE,MAAM,CAAU;gBAET,EAAE,gBAAgB,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE,EAAE,eAAe;IAerE,QAAQ,CACb,KAAK,EAAE,MAAM,GAAG,kBAAkB,EAClC,OAAO,GAAE,gBAAgB,GAAG,YAAiB;CAchD"}
+{"version":3,"file":"map.d.ts","sourceRoot":"","sources":["../src/map.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,aAAa,CAAC;AAgB1C,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,YAAY;IAIZ,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;CAG5E"}

package/lib/map.js

@@ -1,6 +1,7 @@
 import * as maplibregl from "maplibre-gl";
 import { loadLayersIcons } from "./modules/icons.js";
-import { addMarkers, addMarkersStyleDiff } from "./modules/markers.js";
+import { closeOnMapClickPopups, closePopupsById, getPopupId, openPopup, updatePopup, } from "./modules/popup.js";
+import { addMarkers, addStyleDiffMarkers, addStyleMarkers, clearMarkers, updateMarkers, } from "./modules/markers.js";
 const noopTransformRequest = (url) => {
     return {
         url,
@@ -22,27 +23,52 @@ const noopTransformStyle = (_, next) => {
 };
 export class MapkaMap extends maplibregl.Map {
     static env = "prod";
-    constructor({ transformRequest, apiKey, ...options }) {
+    markers = [];
+    maxPopups = 1;
+    popups = [];
+    constructor({ transformRequest, apiKey, maxPopups = 1, ...options }) {
         super({
             ...options,
             transformRequest: createTransformRequest(apiKey, transformRequest),
         });
-        super.on("styledata", (_) => {
-            addMarkers(this);
-        });
+        this.maxPopups = maxPopups;
         super.on("styleimagemissing", (event) => {
             loadLayersIcons(this, event);
         });
+        super.on("click", () => {
+            closeOnMapClickPopups(this);
+        });
+        super.on("style.load", () => {
+            addStyleMarkers(this);
+        });
     }
     setStyle(style, options = {}) {
         const { transformStyle = noopTransformStyle, ...rest } = options;
         super.setStyle(style, {
             ...rest,
             transformStyle: (prev, next) => {
-                addMarkersStyleDiff(this, next);
+                addStyleDiffMarkers(this, next);
                 return transformStyle(prev, next);
             },
         });
         return this;
     }
+    addMarkers(markers) {
+        addMarkers(this, markers);
+    }
+    updateMarkers(markers) {
+        updateMarkers(this, markers);
+    }
+    clearMarkers() {
+        clearMarkers(this);
+    }
+    openPopup(popup, id = getPopupId(popup)) {
+        return openPopup(this, popup, id);
+    }
+    closePopup(id) {
+        closePopupsById(this, id);
+    }
+    updatePopup(popup, id = getPopupId(popup)) {
+        return updatePopup(this, popup, id);
+    }
 }

package/lib/modules/markers.d.ts

@@ -1,5 +1,13 @@
 import type { StyleSpecification } from "maplibre-gl";
 import type { MapkaMap } from "../map.js";
-export declare function addMarkers(map: MapkaMap): void;
-export declare function addMarkersStyleDiff(map: MapkaMap, next: StyleSpecification): void;
+import type { MapkaMarkerOptions } from "../types/marker.js";
+export declare function getMarkerId(marker: {
+    id?: string;
+}): string;
+export declare function addMarkers(currentMap: MapkaMap, markersOptions: MapkaMarkerOptions[]): void;
+export declare function removeMarkersByIds(map: MapkaMap, ids: string[]): void;
+export declare function updateMarkers(map: MapkaMap, markersOptions: MapkaMarkerOptions[]): void;
+export declare function clearMarkers(map: MapkaMap): void;
+export declare function addStyleMarkers(map: MapkaMap): void;
+export declare function addStyleDiffMarkers(map: MapkaMap, next: StyleSpecification): void;
 //# sourceMappingURL=markers.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"markers.d.ts","sourceRoot":"","sources":["../../src/modules/markers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AA8C1C,wBAAgB,UAAU,CAAC,GAAG,EAAE,QAAQ,QAIvC;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,kBAAkB,QAG1E"}
+{"version":3,"file":"markers.d.ts","sourceRoot":"","sources":["../../src/modules/markers.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAU,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,KAAK,EAAE,kBAAkB,EAAqB,MAAM,oBAAoB,CAAC;AAkBhF,wBAAgB,WAAW,CAAC,MAAM,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,UAElD;AA4ED,wBAAgB,UAAU,CAAC,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,kBAAkB,EAAE,QAcpF;AAED,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QAK9D;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,QAAQ,EAAE,cAAc,EAAE,kBAAkB,EAAE,QAKhF;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,QAKzC;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,QAAQ,QAK5C;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,kBAAkB,QAG1E"}

package/lib/modules/markers.js

@@ -1,47 +1,127 @@
-import * as maplibregl from "maplibre-gl";
+import { Marker } from "maplibre-gl";
 import { get } from "es-toolkit/compat";
-import { showTooltip, hideTooltip } from "./tooltip.js";
-const prevMarkers = new Set();
-function addMarkersToMap(map, markers) {
-    for (const marker of prevMarkers) {
-        marker.remove();
-    }
-    prevMarkers.clear();
-    for (const markerConfig of markers) {
-        const { position, color, tooltip } = markerConfig;
-        const newMarker = new maplibregl.Marker({
-            color,
-        })
-            .setLngLat(position)
-            .addTo(map);
-        if (tooltip?.trigger === "click") {
-            const markerElement = newMarker.getElement();
-            markerElement.style.cursor = "pointer";
-            markerElement.addEventListener("click", (e) => {
-                e.stopPropagation();
-                showTooltip(newMarker, tooltip, map);
-            });
-        }
-        else if (tooltip?.trigger === "hover") {
-            const markerElement = newMarker.getElement();
-            markerElement.addEventListener("mouseenter", (e) => {
-                e.stopPropagation();
-                showTooltip(newMarker, tooltip, map);
-            });
-            markerElement.addEventListener("mouseleave", (e) => {
-                e.stopPropagation();
-                hideTooltip();
-            });
+import { getPopupId } from "./popup.js";
+import { remove } from "es-toolkit";
+/**
+ * Default marker offset
+ * @see https://github.com/maplibre/maplibre-gl-js/blob/master/src/ui/marker.ts#L457
+ */
+const DEFAULT_MARKET_OFFSET = {
+    top: [0, 0],
+    "top-left": [0, 0],
+    "top-right": [0, 0],
+    bottom: [0, -38.1],
+    "bottom-left": [9.54594154601839, -34.14594154601839],
+    "bottom-right": [-9.54594154601839, -34.14594154601839],
+    left: [13.5, -24.6],
+    right: [-13.5, -24.6],
+};
+export function getMarkerId(marker) {
+    return marker.id ?? `marker-${crypto.randomUUID()}`;
+}
+const markerPopupOptions = (marker, popupOptions) => {
+    const latLng = marker.getLngLat().toArray();
+    if ("offset" in popupOptions) {
+        return {
+            ...popupOptions,
+            lngLat: latLng,
+        };
+    }
+    else {
+        return {
+            ...popupOptions,
+            lngLat: latLng,
+            offset: DEFAULT_MARKET_OFFSET,
+        };
+    }
+};
+function setupMarkerPopupListeners(map, marker, popup, options) {
+    const popupId = getPopupId(popup);
+    const markerElement = marker.getElement();
+    if (options.draggable) {
+        marker.on("dragend", () => {
+            if (map.popups.find((p) => p.id === popupId)) {
+                map.updatePopup(markerPopupOptions(marker, popup), popupId);
+            }
+        });
+        marker.on("drag", () => {
+            if (map.popups.find((p) => p.id === popupId)) {
+                map.updatePopup(markerPopupOptions(marker, popup), popupId);
+            }
+        });
+    }
+    if (popup.trigger === "always") {
+        if (!map.popups.find((p) => p.id === popupId)) {
+            map.openPopup(markerPopupOptions(marker, popup), popupId);
         }
-        prevMarkers.add(newMarker);
+        markerElement.addEventListener("click", (e) => {
+            e.stopPropagation();
+            if (!map.popups.find((p) => p.id === popupId)) {
+                map.openPopup(markerPopupOptions(marker, popup), popupId);
+            }
+        });
+    }
+    else if (popup.trigger === "click") {
+        markerElement.style.cursor = "pointer";
+        markerElement.addEventListener("click", (e) => {
+            e.stopPropagation();
+            if (!map.popups.find((p) => p.id === popupId)) {
+                map.openPopup(markerPopupOptions(marker, popup), popupId);
+            }
+        });
+    }
+    else if (popup.trigger === "hover") {
+        markerElement.addEventListener("mouseenter", (e) => {
+            e.stopPropagation();
+            if (!map.popups.find((p) => p.id === popupId)) {
+                map.openPopup(markerPopupOptions(marker, popup), popupId);
+            }
+        });
+        markerElement.addEventListener("mouseleave", (e) => {
+            e.stopPropagation();
+            if (map.popups.find((p) => p.id === popupId)) {
+                map.closePopup(popupId);
+            }
+        });
+    }
+}
+export function addMarkers(currentMap, markersOptions) {
+    for (const markerOptions of markersOptions) {
+        const { lngLat, popup, ...options } = markerOptions;
+        const newMarker = new Marker(options).setLngLat(lngLat).addTo(currentMap);
+        currentMap.markers.push({
+            id: getMarkerId(markerOptions),
+            options: markerOptions,
+            marker: newMarker,
+        });
+        if (!popup)
+            continue;
+        setupMarkerPopupListeners(currentMap, newMarker, popup, markerOptions);
+    }
+}
+export function removeMarkersByIds(map, ids) {
+    const removedMarkers = remove(map.markers, (marker) => ids.includes(marker.id));
+    for (const marker of removedMarkers) {
+        marker.marker.remove();
+    }
+}
+export function updateMarkers(map, markersOptions) {
+    const markersIds = markersOptions.map(getMarkerId);
+    removeMarkersByIds(map, markersIds);
+    addMarkers(map, markersOptions);
+}
+export function clearMarkers(map) {
+    for (const marker of map.markers) {
+        marker.marker.remove();
     }
+    map.markers = [];
 }
-export function addMarkers(map) {
+export function addStyleMarkers(map) {
     const style = map.getStyle();
     const markers = get(style, "metadata.mapka.markers", []);
-    addMarkersToMap(map, markers);
+    addMarkers(map, markers);
 }
-export function addMarkersStyleDiff(map, next) {
+export function addStyleDiffMarkers(map, next) {
     const markers = get(next, "metadata.mapka.markers", []);
-    addMarkersToMap(map, markers);
+    addMarkers(map, markers);
 }

package/lib/modules/popup.d.ts

@@ -0,0 +1,14 @@
+import { Popup } from "maplibre-gl";
+import type { MapkaPopupOptions } from "../types/marker.js";
+import type { MapkaMap } from "../map.js";
+export declare function getPopupId(popup: {
+    id?: string;
+}): 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 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 closeOnMapClickPopups(map: MapkaMap): void;
+export declare function closePopupsById(map: MapkaMap, id: string): void;
+//# sourceMappingURL=popup.d.ts.map

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

@@ -0,0 +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"}

package/lib/modules/popup.js

@@ -0,0 +1,124 @@
+// biome-ignore lint/correctness/noUnusedImports: later fix
+import { h } from "preact";
+import { Popup } from "maplibre-gl";
+import { PopupContent } from "../components/PopupContent.js";
+import { render } from "preact";
+import { remove } from "es-toolkit/array";
+import { isEqual } from "es-toolkit";
+export function getPopupId(popup) {
+    return popup.id ?? `popup-${crypto.randomUUID()}`;
+}
+export function getOnClose(map, id) {
+    return () => map.closePopup(id);
+}
+export function enforceMaxPopups(map) {
+    if (map.popups.length > map.maxPopups) {
+        const popupToRemove = map.popups.shift();
+        popupToRemove?.popup.remove();
+        popupToRemove?.container.remove();
+    }
+}
+export function openPopup(map, options, id) {
+    const { lngLat, content, closeButton, ...popupOptions } = options;
+    if (content instanceof HTMLElement) {
+        const popup = new Popup({
+            ...popupOptions,
+            closeButton: false,
+            closeOnClick: false,
+        })
+            .setLngLat(lngLat)
+            .setDOMContent(content)
+            .addTo(map);
+        map.popups.push({
+            container: content,
+            id,
+            options,
+            popup,
+        });
+        enforceMaxPopups(map);
+        return id;
+    }
+    else if (typeof content === "object") {
+        const onClose = getOnClose(map, id);
+        const container = document.createElement("div");
+        container.classList.add("mapka-popup-container");
+        render(h(PopupContent, { ...content, closeButton: closeButton, onClose: onClose }), container);
+        const popup = new Popup({
+            ...popupOptions,
+            closeButton: false,
+            closeOnClick: false,
+        })
+            .setLngLat(lngLat)
+            .setDOMContent(container)
+            .addTo(map);
+        map.popups.push({
+            container,
+            id,
+            options,
+            popup,
+        });
+        enforceMaxPopups(map);
+        return id;
+    }
+    else if (typeof content === "function") {
+        const newContent = content(id);
+        return openPopup(map, {
+            ...options,
+            content: newContent,
+        }, id);
+    }
+    throw new Error("Invalid popup content");
+}
+const DEFAULT_POPUP_MAX_WIDTH = "240px";
+export function updatePopupBaseOptions(popup, options, newOptions) {
+    if (!isEqual(options.maxWidth, newOptions.maxWidth)) {
+        popup.setMaxWidth(newOptions.maxWidth ?? DEFAULT_POPUP_MAX_WIDTH);
+    }
+    if (!isEqual(options.offset, newOptions.offset)) {
+        popup.setOffset(newOptions.offset);
+    }
+    if (!isEqual(options.lngLat, newOptions.lngLat)) {
+        popup.setLngLat(newOptions.lngLat);
+    }
+    return popup;
+}
+export function updatePopup(map, { content, ...newOptions }, id) {
+    if (content instanceof HTMLElement) {
+        const mapkaPopups = map.popups.filter((popup) => popup.id === id);
+        for (const { popup, options } of mapkaPopups) {
+            updatePopupBaseOptions(popup, options, newOptions);
+            popup.setDOMContent(content);
+        }
+    }
+    else if (typeof content === "object") {
+        const onClose = getOnClose(map, id);
+        const mapkaPopups = map.popups.filter((popup) => popup.id === id);
+        for (const { popup, container, options } of mapkaPopups) {
+            const { closeButton } = options;
+            render(h(PopupContent, { ...content, closeButton: closeButton, onClose: onClose }), container);
+            updatePopupBaseOptions(popup, options, newOptions);
+            popup.setDOMContent(container);
+        }
+    }
+    else if (typeof content === "function") {
+        const newContent = content(id);
+        return updatePopup(map, {
+            ...newOptions,
+            content: newContent,
+        }, id);
+    }
+}
+export function closeOnMapClickPopups(map) {
+    const popupsToCloseOnMapClick = remove(map.popups, (popup) => Boolean(popup.options.closeOnClick));
+    for (const popup of popupsToCloseOnMapClick) {
+        popup.popup.remove();
+        popup.container.remove();
+    }
+}
+export function closePopupsById(map, id) {
+    const removedPopups = remove(map.popups, (popup) => popup.id === id);
+    for (const popup of removedPopups) {
+        popup.popup.remove();
+        popup.container.remove();
+    }
+}

package/lib/types/id.d.ts

@@ -0,0 +1,6 @@
+export type WithId<T extends {
+    id: string;
+}> = T & {
+    id: string;
+};
+//# sourceMappingURL=id.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"id.d.ts","sourceRoot":"","sources":["../../src/types/id.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI,CAAC,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC"}

package/lib/types/id.js

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

package/lib/types/marker.d.ts

@@ -1,27 +1,25 @@
-export interface MapkaTooltipRating {
-    value: number;
-    count: number;
-}
-export interface MapkaTooltipPrice {
-    current: string;
-    original?: string;
-    suffix?: string;
-}
-export interface MapkaTooltipOptions {
-    id?: string;
-    trigger?: "hover" | "click";
+import type { MarkerOptions, PopupOptions } from "maplibre-gl";
+export interface MapkaPopupContent {
     title?: string;
-    rating?: MapkaTooltipRating;
     description?: string;
-    subtitle?: string;
-    price?: MapkaTooltipPrice;
     imageUrls?: string[];
     onFavorite?: (id: string) => void;
 }
-export interface MapkaMarkerOptions {
-    position: [number, number];
+type CreatePopupElement = (id: string) => HTMLElement;
+type CreatePopupContent = (id: string) => MapkaPopupContent;
+export interface MapkaPopupOptions extends PopupOptions {
+    id?: string;
+    lngLat: [number, number];
+    trigger?: "hover" | "click" | "always";
+    content: MapkaPopupContent | HTMLElement | CreatePopupElement | CreatePopupContent;
+}
+export type MapkaMarkerPopupOptions = Omit<MapkaPopupOptions, "lngLat">;
+export interface MapkaMarkerOptions extends MarkerOptions {
+    id?: string;
+    lngLat: [number, number];
     color?: string;
     icon?: string;
-    tooltip?: MapkaTooltipOptions;
+    popup?: Omit<MapkaPopupOptions, "lngLat">;
 }
+export {};
 //# 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,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B"}
+{"version":3,"file":"marker.d.ts","sourceRoot":"","sources":["../../src/types/marker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE/D,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,KAAK,kBAAkB,GAAG,CAAC,EAAE,EAAE,MAAM,KAAK,WAAW,CAAC;AACtD,KAAK,kBAAkB,GAAG,CAAC,EAAE,EAAE,MAAM,KAAK,iBAAiB,CAAC;AAE5D,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IACvC,OAAO,EAAE,iBAAiB,GAAG,WAAW,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;CACpF;AAED,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC;AAExE,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,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC;CAC3C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapka/maplibre-gl-sdk",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "type": "module",
   "description": "Mapka JS SDK",
   "sideEffects": false,
@@ -24,7 +24,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "es-toolkit": "^1.43.0",
-    "maplibre-gl": "^5.14.0",
+    "maplibre-gl": "^5.15.0",
     "preact": "^10.28.0"
   },
   "files": [
@@ -34,5 +34,5 @@
     "!**/__tests__/",
     "!lib/buildInfo.json"
   ],
-  "gitHead": "5d0ea87f67bec5a46f15734f4a6dc75db98f23cb"
+  "gitHead": "0cab43f10e18aa9c0b063edc1612272477f09e80"
 }