@mapka/maplibre-gl-sdk 0.16.1 → 0.16.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -5
- package/lib/.buildInfo.json +1 -1
- package/lib/components/ImageCarousel.d.ts +7 -0
- package/lib/components/ImageCarousel.d.ts.map +1 -0
- package/lib/components/ImageCarousel.js +22 -0
- package/lib/components/PopupContent.d.ts +5 -1
- package/lib/components/PopupContent.d.ts.map +1 -1
- package/lib/components/PopupContent.js +12 -40
- package/lib/components/PopupDataRows.d.ts +7 -0
- package/lib/components/PopupDataRows.d.ts.map +1 -0
- package/lib/components/PopupDataRows.js +22 -0
- package/lib/components/PopupList.d.ts +10 -0
- package/lib/components/PopupList.d.ts.map +1 -0
- package/lib/components/PopupList.js +8 -0
- package/lib/components/PopupListItem.d.ts +13 -0
- package/lib/components/PopupListItem.d.ts.map +1 -0
- package/lib/components/PopupListItem.js +11 -0
- package/lib/components/icons/ChevronLeftIcon.d.ts +2 -0
- package/lib/components/icons/ChevronLeftIcon.d.ts.map +1 -0
- package/lib/components/icons/ChevronLeftIcon.js +4 -0
- package/lib/components/icons/ChevronRightIcon.d.ts +2 -0
- package/lib/components/icons/ChevronRightIcon.d.ts.map +1 -0
- package/lib/components/icons/ChevronRightIcon.js +4 -0
- package/lib/components/icons/CircleIcon.d.ts.map +1 -0
- package/lib/components/icons/CloseIcon.d.ts +2 -0
- package/lib/components/icons/CloseIcon.d.ts.map +1 -0
- package/lib/components/icons/CloseIcon.js +4 -0
- package/lib/components/icons/DownloadIcon.d.ts.map +1 -0
- package/lib/components/icons/FreehandIcon.d.ts.map +1 -0
- package/lib/components/icons/HeartIcon.d.ts +4 -0
- package/lib/components/icons/HeartIcon.d.ts.map +1 -0
- package/lib/components/icons/HeartIcon.js +4 -0
- package/lib/components/icons/LineIcon.d.ts.map +1 -0
- package/lib/components/icons/PencilIcon.d.ts.map +1 -0
- package/lib/components/icons/PolygonIcon.d.ts.map +1 -0
- package/lib/components/icons/ProgressDownIcon.d.ts +2 -0
- package/lib/components/icons/ProgressDownIcon.d.ts.map +1 -0
- package/lib/components/icons/RectangleIcon.d.ts.map +1 -0
- package/lib/components/icons/SelectIcon.d.ts.map +1 -0
- package/lib/components/icons/TrashIcon.d.ts.map +1 -0
- package/lib/controls/MapkaDrawControl.js +7 -7
- package/lib/controls/MapkaExportControl.js +2 -2
- package/lib/map.d.ts +8 -7
- package/lib/map.d.ts.map +1 -1
- package/lib/map.js +15 -9
- package/lib/modules/layerPopup.d.ts +2 -1
- package/lib/modules/layerPopup.d.ts.map +1 -1
- package/lib/modules/layerPopup.js +22 -15
- package/lib/modules/markers.d.ts +5 -0
- package/lib/modules/markers.d.ts.map +1 -1
- package/lib/modules/markers.js +21 -16
- package/lib/modules/popup.d.ts +3 -10
- package/lib/modules/popup.d.ts.map +1 -1
- package/lib/modules/popup.js +116 -100
- package/lib/modules/popupGroups.d.ts +14 -0
- package/lib/modules/popupGroups.d.ts.map +1 -0
- package/lib/modules/popupGroups.js +130 -0
- package/lib/styles.css +1 -1
- package/lib/types/popup.d.ts +10 -1
- package/lib/types/popup.d.ts.map +1 -1
- package/package.json +26 -7
- package/src/components/ImageCarousel.css +73 -0
- package/src/components/ImageCarousel.tsx +76 -0
- package/src/components/PopupContent.css +52 -189
- package/src/components/PopupContent.tsx +26 -195
- package/src/components/PopupDataRows.css +41 -0
- package/src/components/PopupDataRows.tsx +39 -0
- package/src/components/PopupList.css +24 -0
- package/src/components/PopupList.tsx +27 -0
- package/src/components/PopupListItem.css +61 -0
- package/src/components/PopupListItem.tsx +40 -0
- package/src/components/icons/ChevronLeftIcon.tsx +20 -0
- package/src/components/icons/ChevronRightIcon.tsx +20 -0
- package/src/components/icons/CloseIcon.tsx +13 -0
- package/src/components/icons/HeartIcon.tsx +18 -0
- package/src/components/{ProgressDownIcon.tsx → icons/ProgressDownIcon.tsx} +0 -3
- package/src/controls/MapkaDrawControl.tsx +7 -7
- package/src/controls/MapkaExportControl.tsx +2 -2
- package/src/map.ts +22 -20
- package/src/modules/layerPopup.ts +32 -21
- package/src/modules/markers.ts +26 -16
- package/src/modules/popup.tsx +129 -112
- package/src/modules/popupGroups.ts +190 -0
- package/src/styles.css +4 -0
- package/src/types/popup.ts +12 -1
- package/lib/components/CircleIcon.d.ts.map +0 -1
- package/lib/components/DownloadIcon.d.ts.map +0 -1
- package/lib/components/FreehandIcon.d.ts.map +0 -1
- package/lib/components/LineIcon.d.ts.map +0 -1
- package/lib/components/PencilIcon.d.ts.map +0 -1
- package/lib/components/PolygonIcon.d.ts.map +0 -1
- package/lib/components/ProgressDownIcon.d.ts +0 -4
- package/lib/components/ProgressDownIcon.d.ts.map +0 -1
- package/lib/components/RectangleIcon.d.ts.map +0 -1
- package/lib/components/SelectIcon.d.ts.map +0 -1
- package/lib/components/TrashIcon.d.ts.map +0 -1
- /package/lib/components/{CircleIcon.d.ts → icons/CircleIcon.d.ts} +0 -0
- /package/lib/components/{CircleIcon.js → icons/CircleIcon.js} +0 -0
- /package/lib/components/{DownloadIcon.d.ts → icons/DownloadIcon.d.ts} +0 -0
- /package/lib/components/{DownloadIcon.js → icons/DownloadIcon.js} +0 -0
- /package/lib/components/{FreehandIcon.d.ts → icons/FreehandIcon.d.ts} +0 -0
- /package/lib/components/{FreehandIcon.js → icons/FreehandIcon.js} +0 -0
- /package/lib/components/{LineIcon.d.ts → icons/LineIcon.d.ts} +0 -0
- /package/lib/components/{LineIcon.js → icons/LineIcon.js} +0 -0
- /package/lib/components/{PencilIcon.d.ts → icons/PencilIcon.d.ts} +0 -0
- /package/lib/components/{PencilIcon.js → icons/PencilIcon.js} +0 -0
- /package/lib/components/{PolygonIcon.d.ts → icons/PolygonIcon.d.ts} +0 -0
- /package/lib/components/{PolygonIcon.js → icons/PolygonIcon.js} +0 -0
- /package/lib/components/{ProgressDownIcon.js → icons/ProgressDownIcon.js} +0 -0
- /package/lib/components/{RectangleIcon.d.ts → icons/RectangleIcon.d.ts} +0 -0
- /package/lib/components/{RectangleIcon.js → icons/RectangleIcon.js} +0 -0
- /package/lib/components/{SelectIcon.d.ts → icons/SelectIcon.d.ts} +0 -0
- /package/lib/components/{SelectIcon.js → icons/SelectIcon.js} +0 -0
- /package/lib/components/{TrashIcon.d.ts → icons/TrashIcon.d.ts} +0 -0
- /package/lib/components/{TrashIcon.js → icons/TrashIcon.js} +0 -0
- /package/src/components/{CircleIcon.tsx → icons/CircleIcon.tsx} +0 -0
- /package/src/components/{DownloadIcon.tsx → icons/DownloadIcon.tsx} +0 -0
- /package/src/components/{FreehandIcon.tsx → icons/FreehandIcon.tsx} +0 -0
- /package/src/components/{LineIcon.tsx → icons/LineIcon.tsx} +0 -0
- /package/src/components/{PencilIcon.tsx → icons/PencilIcon.tsx} +0 -0
- /package/src/components/{PolygonIcon.tsx → icons/PolygonIcon.tsx} +0 -0
- /package/src/components/{RectangleIcon.tsx → icons/RectangleIcon.tsx} +0 -0
- /package/src/components/{SelectIcon.tsx → icons/SelectIcon.tsx} +0 -0
- /package/src/components/{TrashIcon.tsx → icons/TrashIcon.tsx} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ImageCarousel.d.ts","sourceRoot":"","sources":["../../src/components/ImageCarousel.tsx"],"names":[],"mappings":"AAIA,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,KAAK,GACN,EAAE;IACD,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,gCA+DA"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
|
|
2
|
+
import { useState } from "preact/hooks";
|
|
3
|
+
import { ChevronLeftIcon } from "./icons/ChevronLeftIcon.js";
|
|
4
|
+
import { ChevronRightIcon } from "./icons/ChevronRightIcon.js";
|
|
5
|
+
export function ImageCarousel({ imageUrls, title, }) {
|
|
6
|
+
const [currentIndex, setCurrentIndex] = useState(0);
|
|
7
|
+
const isFirstImage = currentIndex === 0;
|
|
8
|
+
const isLastImage = currentIndex === imageUrls.length - 1;
|
|
9
|
+
const handlePrev = (e) => {
|
|
10
|
+
e.stopPropagation();
|
|
11
|
+
if (currentIndex > 0) {
|
|
12
|
+
setCurrentIndex((prev) => prev - 1);
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
const handleNext = (e) => {
|
|
16
|
+
e.stopPropagation();
|
|
17
|
+
if (currentIndex < imageUrls.length - 1) {
|
|
18
|
+
setCurrentIndex((prev) => prev + 1);
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
return (_jsxs("div", { class: "mapka-popup-carousel", children: [_jsx("div", { class: "mapka-popup-carousel-image-container", children: _jsx("div", { class: "mapka-popup-carousel-track", style: { transform: `translateX(-${currentIndex * 100}%)` }, children: imageUrls.map((url, index) => (_jsx("img", { src: url, alt: title || `Image ${index + 1}`, class: "mapka-popup-carousel-image mapka-popup-image" }, index))) }) }), imageUrls.length > 1 && (_jsxs("div", { class: "mapka-popup-carousel-controls", children: [!isFirstImage && (_jsx("button", { type: "button", class: "mapka-popup-carousel-btn mapka-popup-carousel-prev", onClick: handlePrev, "aria-label": "Previous image", children: _jsx(ChevronLeftIcon, {}) })), !isLastImage && (_jsx("button", { type: "button", class: "mapka-popup-carousel-btn mapka-popup-carousel-next", onClick: handleNext, "aria-label": "Next image", children: _jsx(ChevronRightIcon, {}) }))] }))] }));
|
|
22
|
+
}
|
|
@@ -1,8 +1,12 @@
|
|
|
1
|
+
import type { MouseEventHandler } from "preact";
|
|
1
2
|
import type { MapkaPopupContent } from "../types/popup.js";
|
|
2
3
|
interface PopupProps extends MapkaPopupContent {
|
|
3
4
|
onClose?: () => void;
|
|
4
5
|
closeButton?: boolean;
|
|
5
6
|
}
|
|
6
|
-
export declare function
|
|
7
|
+
export declare function CloseButton({ onClose }: {
|
|
8
|
+
onClose?: MouseEventHandler<HTMLButtonElement>;
|
|
9
|
+
}): import("preact").JSX.Element;
|
|
10
|
+
export declare function PopupContent({ title, description, rows, closeButton, imageUrls, primaryAction, onClose, }: PopupProps): import("preact").JSX.Element;
|
|
7
11
|
export {};
|
|
8
12
|
//# sourceMappingURL=PopupContent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopupContent.d.ts","sourceRoot":"","sources":["../../src/components/PopupContent.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PopupContent.d.ts","sourceRoot":"","sources":["../../src/components/PopupContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAK3D,UAAU,UAAW,SAAQ,iBAAiB;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAeD,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CAAE,gCAM1F;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,IAAI,EACJ,WAAW,EACX,SAAc,EACd,aAAa,EACb,OAAO,GACR,EAAE,UAAU,gCA4BZ"}
|
|
@@ -1,51 +1,23 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
function CloseIcon() {
|
|
8
|
-
return (_jsx("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-popup-icon", children: _jsx("path", { d: "m8 8 16 16M24 8 8 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }) }));
|
|
9
|
-
}
|
|
10
|
-
function ChevronLeftIcon() {
|
|
11
|
-
return (_jsx("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", children: _jsx("path", { d: "M20 28 8.7 16.7a1 1 0 0 1 0-1.4L20 4", fill: "none", stroke: "currentColor", "stroke-width": "4" }) }));
|
|
12
|
-
}
|
|
13
|
-
function ChevronRightIcon() {
|
|
14
|
-
return (_jsx("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", children: _jsx("path", { d: "m12 4 11.3 11.3a1 1 0 0 1 0 1.4L12 28", fill: "none", stroke: "currentColor", "stroke-width": "4" }) }));
|
|
15
|
-
}
|
|
16
|
-
function ImageCarousel({ imageUrls, title, onFavorite, id, }) {
|
|
17
|
-
const [currentIndex, setCurrentIndex] = useState(0);
|
|
18
|
-
const isFirstImage = currentIndex === 0;
|
|
19
|
-
const isLastImage = currentIndex === imageUrls.length - 1;
|
|
20
|
-
const handlePrev = (e) => {
|
|
2
|
+
import { CloseIcon } from "./icons/CloseIcon.js";
|
|
3
|
+
import { PopupDataRows } from "./PopupDataRows.js";
|
|
4
|
+
import { ImageCarousel } from "./ImageCarousel.js";
|
|
5
|
+
function PrimaryButton({ label, onClick }) {
|
|
6
|
+
const handleClick = (e) => {
|
|
21
7
|
e.stopPropagation();
|
|
22
|
-
|
|
23
|
-
setCurrentIndex((prev) => prev - 1);
|
|
24
|
-
}
|
|
8
|
+
onClick?.();
|
|
25
9
|
};
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
const handleFavoriteClick = (e) => {
|
|
33
|
-
e.stopPropagation();
|
|
34
|
-
if (onFavorite && id) {
|
|
35
|
-
onFavorite(id);
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
return (_jsxs("div", { class: "mapka-popup-carousel", children: [_jsx("div", { class: "mapka-popup-carousel-track", style: { transform: `translateX(-${currentIndex * 100}%)` }, children: imageUrls.map((url, index) => (_jsx("img", { src: url, alt: title || `Image ${index + 1}`, class: "mapka-popup-carousel-image mapka-popup-image" }, index))) }), onFavorite && (_jsx("div", { class: "mapka-popup-carousel-actions", children: _jsx("button", { type: "button", class: "mapka-popup-action-btn", onClick: handleFavoriteClick, "aria-label": "Add to favorites", children: _jsx(HeartIcon, {}) }) })), imageUrls.length > 1 && (_jsxs(Fragment, { children: [!isFirstImage && (_jsx("button", { type: "button", class: "mapka-popup-carousel-btn mapka-popup-carousel-prev", onClick: handlePrev, "aria-label": "Previous image", children: _jsx(ChevronLeftIcon, {}) })), !isLastImage && (_jsx("button", { type: "button", class: "mapka-popup-carousel-btn mapka-popup-carousel-next", onClick: handleNext, "aria-label": "Next image", children: _jsx(ChevronRightIcon, {}) })), _jsx("div", { class: "mapka-popup-dots", children: imageUrls.map((_, index) => (_jsx("button", { type: "button", class: `mapka-popup-dot ${index === currentIndex ? "mapka-popup-dot-active" : ""}`, onClick: (e) => {
|
|
39
|
-
e.stopPropagation();
|
|
40
|
-
setCurrentIndex(index);
|
|
41
|
-
}, "aria-label": `Go to image ${index + 1}` }, index))) })] }))] }));
|
|
10
|
+
return (_jsx("button", { type: "button", class: "mapka-popup-button-primary", onClick: handleClick, children: label }));
|
|
11
|
+
}
|
|
12
|
+
export function CloseButton({ onClose }) {
|
|
13
|
+
return (_jsx("button", { type: "button", class: "mapka-popup-close-btn", onClick: onClose, "aria-label": "Close", children: _jsx(CloseIcon, {}) }));
|
|
42
14
|
}
|
|
43
|
-
export function PopupContent({ title, description, rows, closeButton, imageUrls,
|
|
15
|
+
export function PopupContent({ title, description, rows, closeButton, imageUrls = [], primaryAction, onClose, }) {
|
|
44
16
|
const hasImages = imageUrls && imageUrls.length > 0;
|
|
45
17
|
const hasRows = rows && rows.length > 0;
|
|
46
18
|
const handleCloseClick = (e) => {
|
|
47
19
|
e.stopPropagation();
|
|
48
20
|
onClose?.();
|
|
49
21
|
};
|
|
50
|
-
return (_jsxs("div", { class: "mapka-popup", children: [closeButton &&
|
|
22
|
+
return (_jsxs("div", { class: "mapka-popup", children: [closeButton && _jsx(CloseButton, { onClose: handleCloseClick }), hasImages && _jsx(ImageCarousel, { imageUrls: imageUrls, title: title }), _jsxs("div", { class: "mapka-popup-content", children: [title && _jsx("h3", { class: "mapka-popup-title", children: title }), description && _jsx("p", { class: "mapka-popup-description", children: description }), hasRows && _jsx(PopupDataRows, { rows: rows }), primaryAction && (_jsx("div", { class: "mapka-popup-actions", children: _jsx(PrimaryButton, { label: primaryAction.label, onClick: primaryAction.onClick }) }))] })] }));
|
|
51
23
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { MapkaPopupRow } from "../types/popup.js";
|
|
2
|
+
export declare function displayRowValue(value: unknown): {};
|
|
3
|
+
export declare function displayRowName(name: string): string;
|
|
4
|
+
export declare function PopupDataRows({ rows }: {
|
|
5
|
+
rows: MapkaPopupRow[];
|
|
6
|
+
}): import("preact").JSX.Element;
|
|
7
|
+
//# sourceMappingURL=PopupDataRows.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopupDataRows.d.ts","sourceRoot":"","sources":["../../src/components/PopupDataRows.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,MAgB7C;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,UAE1C;AAED,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,aAAa,EAAE,CAAA;CAAE,gCAchE"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
|
|
2
|
+
export function displayRowValue(value) {
|
|
3
|
+
if (value == null) {
|
|
4
|
+
return "-";
|
|
5
|
+
}
|
|
6
|
+
if (typeof value === "number") {
|
|
7
|
+
return value.toLocaleString();
|
|
8
|
+
}
|
|
9
|
+
if (typeof value === "boolean") {
|
|
10
|
+
return value ? "true" : "false";
|
|
11
|
+
}
|
|
12
|
+
if (typeof value === "object") {
|
|
13
|
+
return JSON.stringify(value);
|
|
14
|
+
}
|
|
15
|
+
return value;
|
|
16
|
+
}
|
|
17
|
+
export function displayRowName(name) {
|
|
18
|
+
return name;
|
|
19
|
+
}
|
|
20
|
+
export function PopupDataRows({ rows }) {
|
|
21
|
+
return (_jsx("dl", { class: "mapka-popup-rows", children: rows.map((row, index) => (_jsxs(_Fragment, { children: [index > 0 && _jsx("div", { class: "mapka-popup-row-divider" }), _jsxs("div", { class: "mapka-popup-row", children: [_jsx("dt", { class: "mapka-popup-row-label", children: displayRowName(row.name) }), _jsx("dd", { class: "mapka-popup-row-value", children: displayRowValue(row.value) })] }, index)] }))) }));
|
|
22
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { MapkaPopupOptionsResolved } from "../types/popup.js";
|
|
2
|
+
interface PopupCollectionProps {
|
|
3
|
+
items: MapkaPopupOptionsResolved[];
|
|
4
|
+
}
|
|
5
|
+
export declare function PopupCustomElement({ popup }: {
|
|
6
|
+
popup: HTMLElement;
|
|
7
|
+
}): HTMLElement;
|
|
8
|
+
export declare function PopupList({ items }: PopupCollectionProps): import("preact").JSX.Element;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=PopupList.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopupList.d.ts","sourceRoot":"","sources":["../../src/components/PopupList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAGnE,UAAU,oBAAoB;IAC5B,KAAK,EAAE,yBAAyB,EAAE,CAAC;CACpC;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,CAAA;CAAE,eAEnE;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE,oBAAoB,gCAexD"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
|
|
2
|
+
import { PopupListItem } from "./PopupListItem.js";
|
|
3
|
+
export function PopupCustomElement({ popup }) {
|
|
4
|
+
return popup;
|
|
5
|
+
}
|
|
6
|
+
export function PopupList({ items }) {
|
|
7
|
+
return (_jsxs("div", { class: "mapka-popup-list-wrapper", children: [_jsx("div", { class: "mapka-popup-list", children: items.map(({ content, id }) => content instanceof HTMLElement ? (_jsx(PopupCustomElement, { popup: content }, id)) : (_jsx(PopupListItem, { popup: content }, id))) }), _jsx("div", { class: "mapka-popup-list-gradient" })] }));
|
|
8
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { MapkaPopupContent } from "../types/popup.js";
|
|
2
|
+
interface PopupHeaderProps {
|
|
3
|
+
title?: string;
|
|
4
|
+
description?: string;
|
|
5
|
+
imageUrls: string[];
|
|
6
|
+
}
|
|
7
|
+
export declare function PopupHeader({ title, description, imageUrls: [firstImage] }: PopupHeaderProps): import("preact").JSX.Element;
|
|
8
|
+
interface PopupCollectionItemProps {
|
|
9
|
+
popup: MapkaPopupContent;
|
|
10
|
+
}
|
|
11
|
+
export declare function PopupListItem({ popup: { title, description, rows, imageUrls }, }: PopupCollectionItemProps): import("preact").JSX.Element;
|
|
12
|
+
export {};
|
|
13
|
+
//# sourceMappingURL=PopupListItem.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PopupListItem.d.ts","sourceRoot":"","sources":["../../src/components/PopupListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,gBAAgB,gCAW5F;AAED,UAAU,wBAAwB;IAChC,KAAK,EAAE,iBAAiB,CAAC;CAC1B;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,IAAS,EAAE,SAAc,EAAE,GACzD,EAAE,wBAAwB,gCAW1B"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
|
|
2
|
+
import { PopupDataRows } from "./PopupDataRows.js";
|
|
3
|
+
export function PopupHeader({ title, description, imageUrls: [firstImage] }) {
|
|
4
|
+
return (_jsxs("div", { class: "mapka-popup-list-item-header", children: [firstImage && _jsx("img", { src: firstImage, alt: title, class: "mapka-popup-list-item-image" }), _jsxs("div", { class: "mapka-popup-list-item-info", children: [title && _jsx("span", { class: "mapka-popup-list-item-title", children: title }), description && _jsx("span", { class: "mapka-popup-list-item-description", children: description })] })] }));
|
|
5
|
+
}
|
|
6
|
+
export function PopupListItem({ popup: { title, description, rows = [], imageUrls = [] }, }) {
|
|
7
|
+
const hasImages = Boolean(imageUrls.length);
|
|
8
|
+
const hasHeader = Boolean(title || description || hasImages);
|
|
9
|
+
const hasDataRows = Boolean(rows.length);
|
|
10
|
+
return (_jsxs("div", { class: "mapka-popup-list-item", children: [hasHeader && _jsx(PopupHeader, { title: title, description: description, imageUrls: imageUrls }), hasDataRows && _jsx(PopupDataRows, { rows: rows })] }));
|
|
11
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChevronLeftIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/ChevronLeftIcon.tsx"],"names":[],"mappings":"AAAA,wBAAgB,eAAe,iCAmB9B"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { jsx as _jsx } from "preact/jsx-runtime";
|
|
2
|
+
export function ChevronLeftIcon() {
|
|
3
|
+
return (_jsx("svg", { viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-popup-icon mapka-popup-icon-sm", children: _jsx("path", { d: "M10 3 5.7 7.3a1 1 0 0 0 0 1.4L10 13", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
|
|
4
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChevronRightIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/ChevronRightIcon.tsx"],"names":[],"mappings":"AAAA,wBAAgB,gBAAgB,iCAmB/B"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { jsx as _jsx } from "preact/jsx-runtime";
|
|
2
|
+
export function ChevronRightIcon() {
|
|
3
|
+
return (_jsx("svg", { viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-popup-icon mapka-popup-icon-sm", children: _jsx("path", { d: "m6 3 4.3 4.3a1 1 0 0 1 0 1.4L6 13", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
|
|
4
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CircleIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/CircleIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,oCAmBtB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CloseIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/CloseIcon.tsx"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,iCAYxB"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { jsx as _jsx } from "preact/jsx-runtime";
|
|
2
|
+
export function CloseIcon() {
|
|
3
|
+
return (_jsx("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-popup-icon", children: _jsx("path", { d: "m8 8 16 16M24 8 8 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }) }));
|
|
4
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DownloadIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/DownloadIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,oCAqBxB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FreehandIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/FreehandIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,oCAmBxB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeartIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/HeartIcon.tsx"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,gCAiBzD"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { jsx as _jsx } from "preact/jsx-runtime";
|
|
2
|
+
export function HeartIcon({ filled }) {
|
|
3
|
+
return (_jsx("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-popup-icon", children: _jsx("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" }) }));
|
|
4
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LineIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/LineIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,oCAqBpB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PencilIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/PencilIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,oCAoBtB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PolygonIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/PolygonIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,oCA0BvB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProgressDownIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/ProgressDownIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,oCAyB5B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RectangleIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/RectangleIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,oCAmBzB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/SelectIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,oCAoBtB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TrashIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/TrashIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,oCAuBrB,CAAC"}
|
|
@@ -3,13 +3,13 @@ import { render } from "preact";
|
|
|
3
3
|
import maplibregl from "maplibre-gl";
|
|
4
4
|
import { TerraDraw, TerraDrawSelectMode, TerraDrawPolygonMode, TerraDrawRectangleMode, TerraDrawCircleMode, TerraDrawLineStringMode, TerraDrawFreehandMode, } from "terra-draw";
|
|
5
5
|
import { TerraDrawMapLibreGLAdapter } from "terra-draw-maplibre-gl-adapter";
|
|
6
|
-
import { SelectIcon } from "../components/SelectIcon.js";
|
|
7
|
-
import { PolygonIcon } from "../components/PolygonIcon.js";
|
|
8
|
-
import { RectangleIcon } from "../components/RectangleIcon.js";
|
|
9
|
-
import { CircleIcon } from "../components/CircleIcon.js";
|
|
10
|
-
import { LineIcon } from "../components/LineIcon.js";
|
|
11
|
-
import { TrashIcon } from "../components/TrashIcon.js";
|
|
12
|
-
import { FreehandIcon } from "../components/FreehandIcon.js";
|
|
6
|
+
import { SelectIcon } from "../components/icons/SelectIcon.js";
|
|
7
|
+
import { PolygonIcon } from "../components/icons/PolygonIcon.js";
|
|
8
|
+
import { RectangleIcon } from "../components/icons/RectangleIcon.js";
|
|
9
|
+
import { CircleIcon } from "../components/icons/CircleIcon.js";
|
|
10
|
+
import { LineIcon } from "../components/icons/LineIcon.js";
|
|
11
|
+
import { TrashIcon } from "../components/icons/TrashIcon.js";
|
|
12
|
+
import { FreehandIcon } from "../components/icons/FreehandIcon.js";
|
|
13
13
|
import { isEmpty } from "es-toolkit/compat";
|
|
14
14
|
const ModeButton = ({ mode, isActive, onClick, }) => {
|
|
15
15
|
if (mode === "static")
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "preact/jsx-runtime";
|
|
2
2
|
import { render } from "preact";
|
|
3
|
-
import { DownloadIcon } from "../components/DownloadIcon.js";
|
|
4
|
-
import { ProgressDownIcon } from "../components/ProgressDownIcon.js";
|
|
3
|
+
import { DownloadIcon } from "../components/icons/DownloadIcon.js";
|
|
4
|
+
import { ProgressDownIcon } from "../components/icons/ProgressDownIcon.js";
|
|
5
5
|
const Button = ({ isExporting, onClick }) => {
|
|
6
6
|
return (_jsx("button", { type: "button", className: "maplibregl-ctrl maplibregl-ctrl-group", title: "Export map as PNG", "aria-label": "Export map as PNG", disabled: isExporting, onClick: onClick, children: isExporting ? _jsx(ProgressDownIcon, {}) : _jsx(DownloadIcon, {}) }));
|
|
7
7
|
};
|
package/lib/map.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import * as maplibregl from "maplibre-gl";
|
|
|
2
2
|
import type { Marker, Popup, MapOptions, StyleSwapOptions, StyleOptions, StyleSpecification } from "maplibre-gl";
|
|
3
3
|
import type { MapkaMarkerOptions } from "./types/marker.js";
|
|
4
4
|
import type { MapkaExportOptions } from "./types/export.js";
|
|
5
|
-
import type { MapkaPopupOptions } from "./types/popup.js";
|
|
5
|
+
import type { MapkaPopupOptions, MapkaPopupOptionsResolved } from "./types/popup.js";
|
|
6
6
|
import type { MapkaAddLayerObject } from "./types/layer.js";
|
|
7
7
|
export interface MapkaMapOptions extends MapOptions {
|
|
8
8
|
maxPopups?: number;
|
|
@@ -11,8 +11,8 @@ export interface MapkaMapOptions extends MapOptions {
|
|
|
11
11
|
env?: "dev" | "prod" | "local";
|
|
12
12
|
}
|
|
13
13
|
export type MapMapkaPopup = {
|
|
14
|
-
|
|
15
|
-
options:
|
|
14
|
+
ids: string[];
|
|
15
|
+
options: MapkaPopupOptionsResolved[];
|
|
16
16
|
container: HTMLElement;
|
|
17
17
|
popup: Popup;
|
|
18
18
|
};
|
|
@@ -33,14 +33,15 @@ export declare class MapkaMap extends maplibregl.Map {
|
|
|
33
33
|
maxPopups: number;
|
|
34
34
|
scrollPopups: boolean;
|
|
35
35
|
popups: MapMapkaPopup[];
|
|
36
|
-
constructor({ transformRequest, apiKey, maxPopups, ...options }: MapkaMapOptions);
|
|
36
|
+
constructor({ transformRequest, apiKey, maxPopups, scrollPopups, ...options }: MapkaMapOptions);
|
|
37
37
|
setStyle(style: string | StyleSpecification, options?: StyleSwapOptions & StyleOptions): this;
|
|
38
38
|
addMarkers(markers: MapkaMarkerOptions[]): void;
|
|
39
39
|
updateMarkers(markers: MapkaMarkerOptions[]): void;
|
|
40
40
|
removeMarkers(): void;
|
|
41
|
-
openPopup(popup: MapkaPopupOptions): string;
|
|
42
|
-
closePopup(id: string): void;
|
|
43
|
-
updatePopup(popup: MapkaPopupOptions):
|
|
41
|
+
openPopup(popup: MapkaPopupOptions | MapkaPopupOptions[]): string[];
|
|
42
|
+
closePopup(id: string | string[]): void;
|
|
43
|
+
updatePopup(popup: MapkaPopupOptions): string[];
|
|
44
|
+
getPopups(): MapMapkaPopup[];
|
|
44
45
|
removePopups(): void;
|
|
45
46
|
export(options?: MapkaExportOptions): Promise<HTMLImageElement>;
|
|
46
47
|
addLayer(layer: MapkaAddLayerObject, beforeId?: string): this;
|
package/lib/map.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"map.d.ts","sourceRoot":"","sources":["../src/map.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"map.d.ts","sourceRoot":"","sources":["../src/map.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,aAAa,CAAC;AAW1C,OAAO,KAAK,EACV,MAAM,EACN,KAAK,EAGL,UAAU,EAEV,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EACnB,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AACrF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAG5D,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;CAChC;AA0BD,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,EAAE,CAAC;IACd,OAAO,EAAE,yBAAyB,EAAE,CAAC;IACrC,SAAS,EAAE,WAAW,CAAC;IACvB,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,YAAY,EAAE,OAAO,CAAQ;IAC7B,MAAM,EAAE,aAAa,EAAE,CAAM;gBAEjB,EAAE,gBAAgB,EAAE,MAAM,EAAE,SAAa,EAAE,YAAmB,EAAE,GAAG,OAAO,EAAE,EAAE,eAAe;IA0BzG,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,GAAG,iBAAiB,EAAE;IAIxD,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE;IAIhC,WAAW,CAAC,KAAK,EAAE,iBAAiB;IAIpC,SAAS;IAIT,YAAY;IAIN,MAAM,CAAC,OAAO,CAAC,EAAE,kBAAkB;IAIzC,QAAQ,CAAC,KAAK,EAAE,mBAAmB,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAIrE"}
|
package/lib/map.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as maplibregl from "maplibre-gl";
|
|
2
2
|
import { loadLayersIcons } from "./modules/icons.js";
|
|
3
3
|
import { exportMap } from "./modules/export.js";
|
|
4
|
-
import {
|
|
4
|
+
import { closePopupsByIds, reconciliatePopups, closePopups } from "./modules/popup.js";
|
|
5
5
|
import { addMarkers, addStyleDiffMarkers, addStyleMarkers, removeMarkers, updateMarkers, } from "./modules/markers.js";
|
|
6
|
-
import {
|
|
6
|
+
import { openClickPopups } from "./modules/layerPopup.js";
|
|
7
7
|
const noopTransformRequest = (url) => {
|
|
8
8
|
return {
|
|
9
9
|
url,
|
|
@@ -30,18 +30,21 @@ export class MapkaMap extends maplibregl.Map {
|
|
|
30
30
|
maxPopups = 1;
|
|
31
31
|
scrollPopups = true;
|
|
32
32
|
popups = [];
|
|
33
|
-
constructor({ transformRequest, apiKey, maxPopups = 1, ...options }) {
|
|
33
|
+
constructor({ transformRequest, apiKey, maxPopups = 1, scrollPopups = true, ...options }) {
|
|
34
34
|
super({
|
|
35
35
|
...options,
|
|
36
36
|
transformRequest: createTransformRequest(apiKey, transformRequest),
|
|
37
37
|
});
|
|
38
38
|
this.maxPopups = maxPopups;
|
|
39
|
+
this.scrollPopups = scrollPopups;
|
|
39
40
|
super.on("styleimagemissing", (event) => {
|
|
40
41
|
loadLayersIcons(this, event);
|
|
41
42
|
});
|
|
42
43
|
super.on("click", (event) => {
|
|
43
|
-
|
|
44
|
-
|
|
44
|
+
openClickPopups(this, event);
|
|
45
|
+
});
|
|
46
|
+
super.on("zoomend", () => {
|
|
47
|
+
reconciliatePopups(this);
|
|
45
48
|
});
|
|
46
49
|
super.on("style.load", () => {
|
|
47
50
|
addStyleMarkers(this);
|
|
@@ -68,16 +71,19 @@ export class MapkaMap extends maplibregl.Map {
|
|
|
68
71
|
removeMarkers(this);
|
|
69
72
|
}
|
|
70
73
|
openPopup(popup) {
|
|
71
|
-
return
|
|
74
|
+
return reconciliatePopups(this, Array.isArray(popup) ? popup : [popup]);
|
|
72
75
|
}
|
|
73
76
|
closePopup(id) {
|
|
74
|
-
|
|
77
|
+
closePopupsByIds(this, Array.isArray(id) ? id : [id]);
|
|
75
78
|
}
|
|
76
79
|
updatePopup(popup) {
|
|
77
|
-
return
|
|
80
|
+
return reconciliatePopups(this, Array.isArray(popup) ? popup : [popup]);
|
|
81
|
+
}
|
|
82
|
+
getPopups() {
|
|
83
|
+
return this.popups;
|
|
78
84
|
}
|
|
79
85
|
removePopups() {
|
|
80
|
-
|
|
86
|
+
closePopups(this);
|
|
81
87
|
}
|
|
82
88
|
async export(options) {
|
|
83
89
|
return exportMap(this, options);
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { MapMouseEvent } from "maplibre-gl";
|
|
2
2
|
import type { MapkaMap } from "../map.js";
|
|
3
|
-
export declare function
|
|
3
|
+
export declare function openClickPopups(map: MapkaMap, { lngLat, point }: MapMouseEvent): void;
|
|
4
|
+
export declare function openOnHoverPopups(map: MapkaMap, { lngLat, point }: MapMouseEvent): void;
|
|
4
5
|
//# sourceMappingURL=layerPopup.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layerPopup.d.ts","sourceRoot":"","sources":["../../src/modules/layerPopup.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"layerPopup.d.ts","sourceRoot":"","sources":["../../src/modules/layerPopup.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAoC,MAAM,aAAa,CAAC;AACnF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AA+D1C,wBAAgB,eAAe,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,aAAa,QAQ9E;AAED,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,aAAa,QAOhF"}
|
|
@@ -1,22 +1,10 @@
|
|
|
1
1
|
import { get } from "es-toolkit/compat";
|
|
2
2
|
import { isBoolean, isPlainObject } from "es-toolkit";
|
|
3
|
-
|
|
4
|
-
const features = map.queryRenderedFeatures(point);
|
|
5
|
-
if (features.length === 0) {
|
|
6
|
-
return;
|
|
7
|
-
}
|
|
8
|
-
const popups = getFeaturePopups(features, lngLat);
|
|
9
|
-
if (popups.length === 0) {
|
|
10
|
-
return;
|
|
11
|
-
}
|
|
12
|
-
for (const popup of popups) {
|
|
13
|
-
map.openPopup(popup);
|
|
14
|
-
}
|
|
15
|
-
}
|
|
3
|
+
import { closeOnMapClickPopups, getPopupId } from "./popup.js";
|
|
16
4
|
function genericPropertiesToPopup(feature, lngLat) {
|
|
17
5
|
const { id, properties, layer } = feature;
|
|
18
6
|
return {
|
|
19
|
-
id: id ?? properties.id,
|
|
7
|
+
id: id ?? properties.id ?? getPopupId(layer),
|
|
20
8
|
lngLat: lngLat.toArray(),
|
|
21
9
|
content: {
|
|
22
10
|
title: layer.id,
|
|
@@ -30,7 +18,8 @@ function genericPropertiesToPopup(feature, lngLat) {
|
|
|
30
18
|
function buildConfigDrivenPopup(feature, config, lngLat) {
|
|
31
19
|
throw new Error("Not implemented", { cause: { config, feature, lngLat } });
|
|
32
20
|
}
|
|
33
|
-
function getFeaturePopups(
|
|
21
|
+
function getFeaturePopups(map, point, lngLat, trigger) {
|
|
22
|
+
const features = map.queryRenderedFeatures(point);
|
|
34
23
|
const popups = [];
|
|
35
24
|
for (const feature of features) {
|
|
36
25
|
const { layer: { metadata }, } = feature;
|
|
@@ -43,8 +32,26 @@ function getFeaturePopups(features, lngLat) {
|
|
|
43
32
|
continue;
|
|
44
33
|
}
|
|
45
34
|
if (isPlainObject(mapkaPopup)) {
|
|
35
|
+
if (mapkaPopup.trigger && mapkaPopup.trigger !== trigger) {
|
|
36
|
+
continue;
|
|
37
|
+
}
|
|
46
38
|
popups.push(buildConfigDrivenPopup(feature, mapkaPopup, lngLat));
|
|
47
39
|
}
|
|
48
40
|
}
|
|
49
41
|
return popups;
|
|
50
42
|
}
|
|
43
|
+
export function openClickPopups(map, { lngLat, point }) {
|
|
44
|
+
closeOnMapClickPopups(map);
|
|
45
|
+
const featurePopups = getFeaturePopups(map, point, lngLat, "click");
|
|
46
|
+
if (featurePopups.length === 0) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
map.openPopup(featurePopups);
|
|
50
|
+
}
|
|
51
|
+
export function openOnHoverPopups(map, { lngLat, point }) {
|
|
52
|
+
const featurePopups = getFeaturePopups(map, point, lngLat, "hover");
|
|
53
|
+
if (featurePopups.length === 0) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
map.openPopup(featurePopups);
|
|
57
|
+
}
|
package/lib/modules/markers.d.ts
CHANGED
|
@@ -4,6 +4,11 @@ import type { MapkaMarkerOptions } from "../types/marker.js";
|
|
|
4
4
|
export declare function getMarkerId(marker: {
|
|
5
5
|
id?: string;
|
|
6
6
|
}): string;
|
|
7
|
+
export declare function getMarkerPopupId(marker: {
|
|
8
|
+
id?: string;
|
|
9
|
+
}, popup: {
|
|
10
|
+
id?: string;
|
|
11
|
+
}): string;
|
|
7
12
|
export declare function addMarkers(currentMap: MapkaMap, markersOptions: MapkaMarkerOptions[]): void;
|
|
8
13
|
export declare function removeMarkersByIds(map: MapkaMap, ids: string[]): void;
|
|
9
14
|
export declare function updateMarkers(map: MapkaMap, markersOptions: MapkaMarkerOptions[]): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"markers.d.ts","sourceRoot":"","sources":["../../src/modules/markers.ts"],"names":[],"mappings":"
|
|
1
|
+
{"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,EAAE,MAAM,oBAAoB,CAAC;AAkB7D,wBAAgB,WAAW,CAAC,MAAM,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,UAElD;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,KAAK,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,UAE/E;AAmFD,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,aAAa,CAAC,GAAG,EAAE,QAAQ,QAK1C;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,QAAQ,QAK5C;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,kBAAkB,QAG1E"}
|