@mapka/maplibre-gl-sdk 0.16.1 → 0.16.3

package/lib/modules/markers.js

@@ -1,6 +1,5 @@
 import { Marker } from "maplibre-gl";
 import { get } from "es-toolkit/compat";
-import { getPopupId } from "./popup.js";
 import { remove } from "es-toolkit";
 /**
  * Default marker offset
@@ -19,45 +18,51 @@ const DEFAULT_MARKET_OFFSET = {
 export function getMarkerId(marker) {
     return marker.id ?? `marker-${crypto.randomUUID()}`;
 }
-const markerPopupOptions = (marker, popupOptions) => {
+export function getMarkerPopupId(marker, popup) {
+    return popup.id ?? marker.id ?? `marker-popup-${crypto.randomUUID()}`;
+}
+const markerPopupOptions = (id, marker, popupOptions) => {
     const latLng = marker.getLngLat().toArray();
     if ("offset" in popupOptions) {
         return {
             ...popupOptions,
+            id,
             lngLat: latLng,
         };
     }
     else {
         return {
             ...popupOptions,
+            id,
             lngLat: latLng,
             offset: DEFAULT_MARKET_OFFSET,
         };
     }
 };
 function setupMarkerPopupListeners(map, marker, popup, options) {
-    const popupId = getPopupId(popup);
     const markerElement = marker.getElement();
+    const popupId = getMarkerPopupId(options, popup);
+    const popupOptions = markerPopupOptions(popupId, marker, popup);
     if (options.draggable) {
         marker.on("dragend", () => {
-            if (map.popups.find((p) => p.id === popupId)) {
-                map.updatePopup(markerPopupOptions(marker, popup));
+            if (map.popups.find((p) => p.ids.includes(popupId))) {
+                map.updatePopup(popupOptions);
             }
         });
         marker.on("drag", () => {
-            if (map.popups.find((p) => p.id === popupId)) {
-                map.updatePopup(markerPopupOptions(marker, popup));
+            if (map.popups.find((p) => p.ids.includes(popupId))) {
+                map.updatePopup(popupOptions);
             }
         });
     }
     if (popup.trigger === "always") {
-        if (!map.popups.find((p) => p.id === popupId)) {
-            map.openPopup(markerPopupOptions(marker, popup));
+        if (!map.popups.find((p) => p.ids.includes(popupId))) {
+            map.openPopup(popupOptions);
         }
         markerElement.addEventListener("click", (e) => {
             e.stopPropagation();
-            if (!map.popups.find((p) => p.id === popupId)) {
-                map.openPopup(markerPopupOptions(marker, popup));
+            if (!map.popups.find((p) => p.ids.includes(popupId))) {
+                map.openPopup(popupOptions);
             }
         });
     }
@@ -65,21 +70,21 @@ function setupMarkerPopupListeners(map, marker, popup, options) {
         markerElement.style.cursor = "pointer";
         markerElement.addEventListener("click", (e) => {
             e.stopPropagation();
-            if (!map.popups.find((p) => p.id === popupId)) {
-                map.openPopup(markerPopupOptions(marker, popup));
+            if (!map.popups.find((p) => p.ids.includes(popupId))) {
+                map.openPopup(popupOptions);
             }
         });
     }
     else if (popup.trigger === "hover") {
         markerElement.addEventListener("mouseenter", (e) => {
             e.stopPropagation();
-            if (!map.popups.find((p) => p.id === popupId)) {
-                map.openPopup(markerPopupOptions(marker, popup));
+            if (!map.popups.find((p) => p.ids.includes(popupId))) {
+                map.openPopup(popupOptions);
             }
         });
         markerElement.addEventListener("mouseleave", (e) => {
             e.stopPropagation();
-            if (map.popups.find((p) => p.id === popupId)) {
+            if (map.popups.find((p) => p.ids.includes(popupId))) {
                 map.closePopup(popupId);
             }
         });

package/lib/modules/popup.d.ts

@@ -1,18 +1,11 @@
-import { Popup } from "maplibre-gl";
 import type { MapkaPopupOptions } from "../types/popup.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): string;
-export declare function updatePopupBaseOptions(popup: Popup, options: MapkaPopupOptions, newOptions: Omit<MapkaPopupOptions, "content">): Popup;
-export declare function updatePopup(map: MapkaMap, { content, ...newOptions }: MapkaPopupOptions): void;
-/**
- * Close all popups that have closeOnClick set to true or undefined
- */
+export declare function reconciliatePopups(map: MapkaMap, options?: MapkaPopupOptions[]): string[];
 export declare function closeOnMapClickPopups(map: MapkaMap): void;
-export declare function closePopupsById(map: MapkaMap, id: string): void;
-export declare function removePopups(map: MapkaMap): void;
+export declare function closePopups(map: MapkaMap): void;
+export declare function closePopupsByIds(map: MapkaMap, ids: string[]): void;
 //# sourceMappingURL=popup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/modules/popup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIpC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,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,QAS7C;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;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,QAAQ,QAYlD;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,QASxD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,QASzC"}
+{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/modules/popup.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,iBAAiB,EAA6B,MAAM,mBAAmB,CAAC;AACtF,OAAO,KAAK,EAAE,QAAQ,EAAiB,MAAM,WAAW,CAAC;AAEzD,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,UAEhD;AAmFD,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,QAAQ,QAW7C;AAED,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,GAAE,iBAAiB,EAAO,YAelF;AAED,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,QAAQ,QAclD;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,QAAQ,QASxC;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QA+B5D"}

package/lib/modules/popup.js

@@ -1,146 +1,162 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { Popup } from "maplibre-gl";
 import { PopupContent } from "../components/PopupContent.js";
+import { PopupList } from "../components/PopupList.js";
 import { render } from "preact";
 import { remove } from "es-toolkit/array";
-import { isEqual, isPlainObject } from "es-toolkit";
+import { isPlainObject, without } from "es-toolkit";
+import { computePopupGroups } from "./popupGroups.js";
 export function getPopupId(popup) {
     return popup.id ?? `popup-${crypto.randomUUID()}`;
 }
-export function getOnClose(map, id) {
-    return () => map.closePopup(id);
+function getOnClose(map, id) {
+    return () => closePopupsByIds(map, [id]);
 }
-export function enforceMaxPopups(map) {
-    if (map.popups.length > map.maxPopups) {
-        const popupToRemove = map.popups.shift();
-        popupToRemove?.popup.remove();
-        if (isPlainObject(popupToRemove?.options.content)) {
-            render(null, popupToRemove.container);
+function hasObjectContent(options) {
+    return options.some((opt) => isPlainObject(opt.content));
+}
+function resolveContentCreators(options) {
+    return options.map((opt) => {
+        const id = getPopupId(opt);
+        if (typeof opt.content === "function") {
+            return {
+                ...opt,
+                id,
+                content: opt.content(id),
+            };
         }
-        popupToRemove?.container.remove();
-    }
+        else {
+            return {
+                ...opt,
+                id,
+                content: opt.content,
+            };
+        }
+    });
 }
-export function openPopup(map, options) {
-    const { lngLat, content, closeButton, id = getPopupId(options), ...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(_jsx(PopupContent, { ...content, closeButton: closeButton, onClose: onClose }), container);
-        const popup = new Popup({
-            ...popupOptions,
+function createNewPopup(map, options) {
+    const [{ lngLat, id, content, closeButton, ...opts }] = options;
+    const ids = options.map(getPopupId);
+    const container = document.createElement("div");
+    container.classList.add("mapka-popup-container");
+    let popup;
+    if (options.length > 1) {
+        render(_jsx(PopupList, { items: options }), container);
+        popup = new Popup({
+            ...opts,
             closeButton: false,
-            closeOnClick: false,
+            closeOnClick: true,
         })
             .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,
-        });
+    else {
+        if (content instanceof HTMLElement) {
+            popup = new Popup({
+                ...opts,
+                closeButton: false,
+            })
+                .setLngLat(lngLat)
+                .setDOMContent(content)
+                .addTo(map);
+        }
+        else {
+            popup = new Popup({
+                ...opts,
+                closeButton: false,
+            })
+                .setLngLat(lngLat)
+                .setDOMContent(container)
+                .addTo(map);
+            render(_jsx(PopupContent, { ...content, onClose: getOnClose(map, id) }), container);
+        }
     }
-    throw new Error("Invalid popup content");
+    if (!popup)
+        return;
+    map.popups.push({
+        container,
+        ids,
+        options,
+        popup,
+    });
+    return ids;
 }
-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);
+export function enforceMaxPopups(map) {
+    if (map.popups.length > map.maxPopups) {
+        const popupToRemove = map.popups.shift();
+        if (popupToRemove) {
+            popupToRemove.popup.remove();
+            if (hasObjectContent(popupToRemove.options)) {
+                render(null, popupToRemove.container);
+            }
+            popupToRemove.container.remove();
+        }
     }
-    return popup;
 }
-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) {
-            updatePopupBaseOptions(popup, options, newOptions);
-            popup.setDOMContent(content);
+export function reconciliatePopups(map, options = []) {
+    const resolved = resolveContentCreators(options);
+    const actions = computePopupGroups(map, resolved);
+    for (const action of actions) {
+        if (action.type === "close") {
+            closePopupsByIds(map, action.ids);
         }
-    }
-    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(_jsx(PopupContent, { ...content, closeButton: closeButton, onClose: onClose }), container);
-            updatePopupBaseOptions(popup, options, newOptions);
-            popup.setDOMContent(container);
+        else if (action.type === "create") {
+            createNewPopup(map, action.options);
         }
     }
-    else if (typeof content === "function") {
-        const newContent = content(id);
-        return updatePopup(map, {
-            ...newOptions,
-            content: newContent,
-        });
-    }
+    enforceMaxPopups(map);
+    return resolved.map((opt) => opt.id);
 }
-/**
- * Close all popups that have closeOnClick set to true or undefined
- */
 export function closeOnMapClickPopups(map) {
-    const popupsToCloseOnMapClick = remove(map.popups, (popup) => popup.options.closeOnClick === true || popup.options.closeOnClick === undefined);
+    const popupsToCloseOnMapClick = remove(map.popups, (popup) => {
+        const [first] = popup.options;
+        return (popup.ids.length > 1 || first?.closeOnClick === true || first?.closeOnClick === undefined);
+    });
     for (const popup of popupsToCloseOnMapClick) {
         popup.popup.remove();
-        if (isPlainObject(popup.options.content)) {
+        if (hasObjectContent(popup.options)) {
             render(null, popup.container);
         }
         popup.container.remove();
     }
 }
-export function closePopupsById(map, id) {
-    const removedPopups = remove(map.popups, (popup) => popup.id === id);
-    for (const popup of removedPopups) {
+export function closePopups(map) {
+    for (const popup of map.popups) {
         popup.popup.remove();
-        if (isPlainObject(popup.options.content)) {
+        if (hasObjectContent(popup.options)) {
             render(null, popup.container);
         }
         popup.container.remove();
     }
+    map.popups = [];
 }
-export function removePopups(map) {
+export function closePopupsByIds(map, ids) {
+    const toClose = [];
+    const toReRender = [];
     for (const popup of map.popups) {
+        const itemIndex = popup.ids.findIndex((id) => ids.includes(id));
+        if (itemIndex < 0)
+            continue;
+        if (popup.ids.length === 1) {
+            toClose.push(popup);
+        }
+        else if (popup.ids.length > 1) {
+            popup.ids.splice(itemIndex, 1);
+            popup.options.splice(itemIndex, 1);
+            toClose.push(popup);
+            toReRender.push(popup);
+        }
+    }
+    for (const popup of toClose) {
         popup.popup.remove();
-        if (isPlainObject(popup.options.content)) {
+        if (hasObjectContent(popup.options)) {
             render(null, popup.container);
         }
         popup.container.remove();
+        map.popups = without(map.popups, popup);
+    }
+    for (const popup of toReRender) {
+        createNewPopup(map, popup.options);
     }
-    map.popups = [];
 }

package/lib/modules/popupGroups.d.ts

@@ -0,0 +1,14 @@
+import type { MapkaMap, MapMapkaPopup } from "../map.js";
+import type { MapkaPopupOptionsResolved } from "../types/popup.js";
+export type ClosePopupAction = {
+    type: "close";
+    ids: string[];
+};
+export type CreatePopupAction = {
+    type: "create";
+    options: MapkaPopupOptionsResolved[];
+};
+export type PopupGroupAction = ClosePopupAction | CreatePopupAction;
+export declare function actionsByChanges(popups: MapMapkaPopup[], newOptions: MapkaPopupOptionsResolved[]): PopupGroupAction[];
+export declare function computePopupGroups(map: MapkaMap, newOptions: MapkaPopupOptionsResolved[]): PopupGroupAction[];
+//# sourceMappingURL=popupGroups.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popupGroups.d.ts","sourceRoot":"","sources":["../../src/modules/popupGroups.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AACzD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,MAAM,MAAM,gBAAgB,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,GAAG,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,OAAO,EAAE,yBAAyB,EAAE,CAAA;CAAE,CAAC;AAEzF,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG,iBAAiB,CAAC;AAkJpE,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,aAAa,EAAE,EACvB,UAAU,EAAE,yBAAyB,EAAE,GACtC,gBAAgB,EAAE,CAmBpB;AAED,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,QAAQ,EACb,UAAU,EAAE,yBAAyB,EAAE,GACtC,gBAAgB,EAAE,CASpB"}

package/lib/modules/popupGroups.js

@@ -0,0 +1,130 @@
+import Supercluster from "supercluster";
+const WORLD_BOUNDS = [-180, -90, 180, 90];
+function clustersByLocation(previous, newOptions, zoom) {
+    const all = [...previous, ...newOptions];
+    const features = all.map(({ lngLat }, index) => ({
+        type: "Feature",
+        properties: { index },
+        geometry: {
+            type: "Point",
+            coordinates: lngLat,
+        },
+    }));
+    const sc = new Supercluster({
+        radius: 20,
+        extent: 512,
+    });
+    sc.load(features);
+    const results = sc.getClusters(WORLD_BOUNDS, zoom);
+    const clusters = [];
+    for (const { properties, geometry } of results) {
+        if ("cluster" in properties) {
+            const leaves = sc.getLeaves(properties.cluster_id, Infinity);
+            clusters.push({
+                options: leaves.map((point) => all[point.properties.index]),
+                lngLat: geometry.coordinates,
+            });
+        }
+        else {
+            const opt = all[properties.index];
+            clusters.push({
+                options: [opt],
+                lngLat: opt.lngLat,
+            });
+        }
+    }
+    return clusters;
+}
+function clustersFromPopups(notUpdated, popups) {
+    const clusters = [];
+    for (const popup of popups) {
+        clusters.push({
+            options: popup.options.filter((opt) => notUpdated.includes(opt)),
+            lngLat: popup.popup.getLngLat().toArray(),
+        });
+    }
+    return clusters.filter((cluster) => cluster.options.length > 0);
+}
+function clusterKey(cluster) {
+    return cluster.options
+        .map((o) => o.id)
+        .sort()
+        .join("-");
+}
+function actionsByClustersChanges(prev, next) {
+    const prevByKey = new Map(prev.map((c) => [clusterKey(c), c]));
+    const nextByKey = new Map(next.map((c) => [clusterKey(c), c]));
+    const close = [];
+    const create = [];
+    for (const [key, cluster] of prevByKey) {
+        if (!nextByKey.has(key)) {
+            close.push({
+                type: "close",
+                ids: cluster.options.map((o) => o.id),
+            });
+        }
+    }
+    for (const [key, cluster] of nextByKey) {
+        if (!prevByKey.has(key)) {
+            create.push({
+                type: "create",
+                options: cluster.options,
+            });
+        }
+    }
+    return { close, create };
+}
+function actionsByProximity(popups, newOptions, zoom) {
+    const updated = [];
+    const nonUpdated = [];
+    for (const popup of popups) {
+        for (const opt of popup.options) {
+            if (newOptions.find((o) => o.id === opt.id)) {
+                updated.push(opt);
+            }
+            else {
+                nonUpdated.push(opt);
+            }
+        }
+    }
+    const prevClusters = clustersFromPopups(nonUpdated, popups);
+    const nextClusters = clustersByLocation(nonUpdated, newOptions, zoom);
+    const { close, create } = actionsByClustersChanges(prevClusters, nextClusters);
+    const updatedIds = updated.map((opt) => opt.id);
+    const closeIds = close.flatMap((opt) => opt.ids);
+    return [
+        {
+            type: "close",
+            ids: updatedIds.concat(closeIds),
+        },
+        ...create,
+    ];
+}
+export function actionsByChanges(popups, newOptions) {
+    const updated = [];
+    for (const popup of popups) {
+        if (newOptions.find((o) => popup.ids.includes(o.id))) {
+            updated.push(popup);
+        }
+    }
+    return [
+        ...updated.map((popup) => ({
+            type: "close",
+            ids: popup.ids,
+        })),
+        {
+            type: "create",
+            options: newOptions,
+        },
+    ];
+}
+export function computePopupGroups(map, newOptions) {
+    const popups = map.getPopups();
+    const zoom = map.getZoom();
+    if (map.scrollPopups) {
+        return actionsByProximity(popups, newOptions, zoom);
+    }
+    else {
+        return actionsByChanges(popups, newOptions);
+    }
+}