@mapka/maplibre-gl-sdk 0.7.0 → 0.9.0
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 +3 -2
- package/lib/.buildInfo.json +1 -1
- package/lib/components/Tooltip.d.ts +9 -0
- package/lib/components/Tooltip.d.ts.map +1 -0
- package/lib/components/Tooltip.js +81 -0
- package/lib/index.js +0 -1
- package/lib/map.js +0 -1
- package/lib/modules/icons.js +0 -1
- package/lib/modules/markers.js +0 -1
- package/lib/modules/tooltip.d.ts +2 -2
- package/lib/modules/tooltip.d.ts.map +1 -1
- package/lib/modules/tooltip.js +10 -278
- package/lib/types/layer.js +0 -1
- package/lib/types/marker.d.ts +14 -0
- package/lib/types/marker.d.ts.map +1 -1
- package/lib/types/marker.js +0 -1
- package/lib/types/style.js +0 -1
- package/lib/utils/url.js +0 -1
- package/package.json +7 -5
- package/src/components/Tooltip.tsx +265 -0
- package/src/modules/tooltip.tsx +52 -0
- package/src/{map.css → styles.css} +221 -1
- package/src/types/marker.ts +16 -0
- package/lib/index.js.map +0 -1
- package/lib/map.js.map +0 -1
- package/lib/modules/icons.js.map +0 -1
- package/lib/modules/markers.js.map +0 -1
- package/lib/modules/tooltip.js.map +0 -1
- package/lib/types/layer.js.map +0 -1
- package/lib/types/marker.js.map +0 -1
- package/lib/types/style.js.map +0 -1
- package/lib/utils/url.js.map +0 -1
- package/src/modules/tooltip.ts +0 -344
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/** biome-ignore-all lint/correctness/noUnusedImports: <explanation> */
|
|
2
|
+
import { h } from "preact";
|
|
3
|
+
import type { MapkaTooltipOptions } from "../types/marker.js";
|
|
4
|
+
interface TooltipProps extends MapkaTooltipOptions {
|
|
5
|
+
onClose?: () => void;
|
|
6
|
+
}
|
|
7
|
+
export declare function Tooltip({ id, title, rating, description, subtitle, price, imageUrls, onFavorite, onClose, }: TooltipProps): h.JSX.Element;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=Tooltip.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,OAAO,EAAE,CAAC,EAAY,MAAM,QAAQ,CAAC;AAErC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE9D,UAAU,YAAa,SAAQ,mBAAmB;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA2MD,wBAAgB,OAAO,CAAC,EACtB,EAAE,EACF,KAAK,EACL,MAAM,EACN,WAAW,EACX,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,OAAO,GACR,EAAE,YAAY,iBA4Cd"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/** biome-ignore-all lint/correctness/noUnusedImports: <explanation> */
|
|
2
|
+
import { h, Fragment } from "preact";
|
|
3
|
+
import { useState } from "preact/hooks";
|
|
4
|
+
function HeartIcon({ filled }) {
|
|
5
|
+
return (h("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-tooltip-icon" },
|
|
6
|
+
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" })));
|
|
7
|
+
}
|
|
8
|
+
function CloseIcon() {
|
|
9
|
+
return (h("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-tooltip-icon" },
|
|
10
|
+
h("path", { d: "m6 6 20 20M26 6 6 26", fill: "none", stroke: "currentColor", "stroke-width": "3" })));
|
|
11
|
+
}
|
|
12
|
+
function ChevronLeftIcon() {
|
|
13
|
+
return (h("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-tooltip-icon mapka-tooltip-icon-sm" },
|
|
14
|
+
h("path", { d: "M20 28 8.7 16.7a1 1 0 0 1 0-1.4L20 4", fill: "none", stroke: "currentColor", "stroke-width": "4" })));
|
|
15
|
+
}
|
|
16
|
+
function ChevronRightIcon() {
|
|
17
|
+
return (h("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-tooltip-icon mapka-tooltip-icon-sm" },
|
|
18
|
+
h("path", { d: "m12 4 11.3 11.3a1 1 0 0 1 0 1.4L12 28", fill: "none", stroke: "currentColor", "stroke-width": "4" })));
|
|
19
|
+
}
|
|
20
|
+
function StarIcon() {
|
|
21
|
+
return (h("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", class: "mapka-tooltip-icon mapka-tooltip-icon-star" },
|
|
22
|
+
h("path", { d: "M15.094 1.579l-4.124 8.885-9.86 1.27a1 1 0 0 0-.542 1.736l7.293 6.565-1.965 9.852a1 1 0 0 0 1.483 1.061L16 25.951l8.625 4.997a1 1 0 0 0 1.482-1.06l-1.965-9.853 7.293-6.565a1 1 0 0 0-.541-1.735l-9.86-1.271-4.127-8.885a1 1 0 0 0-1.814 0z", fill: "currentColor" })));
|
|
23
|
+
}
|
|
24
|
+
function ImageCarousel({ imageUrls, title, onFavorite, id, onClose, }) {
|
|
25
|
+
const [currentIndex, setCurrentIndex] = useState(0);
|
|
26
|
+
const handlePrev = (e) => {
|
|
27
|
+
e.stopPropagation();
|
|
28
|
+
setCurrentIndex((prev) => (prev === 0 ? imageUrls.length - 1 : prev - 1));
|
|
29
|
+
};
|
|
30
|
+
const handleNext = (e) => {
|
|
31
|
+
e.stopPropagation();
|
|
32
|
+
setCurrentIndex((prev) => (prev + 1) % imageUrls.length);
|
|
33
|
+
};
|
|
34
|
+
const handleFavoriteClick = (e) => {
|
|
35
|
+
e.stopPropagation();
|
|
36
|
+
if (onFavorite && id) {
|
|
37
|
+
onFavorite(id);
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
const handleCloseClick = (e) => {
|
|
41
|
+
e.stopPropagation();
|
|
42
|
+
onClose?.();
|
|
43
|
+
};
|
|
44
|
+
return (h("div", { class: "mapka-tooltip-carousel" },
|
|
45
|
+
h("div", { class: "mapka-tooltip-carousel-track", style: { transform: `translateX(-${currentIndex * 100}%)` } }, imageUrls.map((url, index) => (h("img", { key: index, src: url, alt: title || `Image ${index + 1}`, class: "mapka-tooltip-carousel-image" })))),
|
|
46
|
+
h("div", { class: "mapka-tooltip-carousel-actions" },
|
|
47
|
+
onFavorite && (h("button", { type: "button", class: "mapka-tooltip-action-btn", onClick: handleFavoriteClick, "aria-label": "Add to favorites" },
|
|
48
|
+
h(HeartIcon, null))),
|
|
49
|
+
h("button", { type: "button", class: "mapka-tooltip-action-btn", onClick: handleCloseClick, "aria-label": "Close" },
|
|
50
|
+
h(CloseIcon, null))),
|
|
51
|
+
imageUrls.length > 1 && (h(Fragment, null,
|
|
52
|
+
h("button", { type: "button", class: "mapka-tooltip-carousel-btn mapka-tooltip-carousel-prev", onClick: handlePrev, "aria-label": "Previous image" },
|
|
53
|
+
h(ChevronLeftIcon, null)),
|
|
54
|
+
h("button", { type: "button", class: "mapka-tooltip-carousel-btn mapka-tooltip-carousel-next", onClick: handleNext, "aria-label": "Next image" },
|
|
55
|
+
h(ChevronRightIcon, null)),
|
|
56
|
+
h("div", { class: "mapka-tooltip-dots" }, imageUrls.map((_, index) => (h("button", { key: index, type: "button", class: `mapka-tooltip-dot ${index === currentIndex ? "mapka-tooltip-dot-active" : ""}`, onClick: (e) => {
|
|
57
|
+
e.stopPropagation();
|
|
58
|
+
setCurrentIndex(index);
|
|
59
|
+
}, "aria-label": `Go to image ${index + 1}` }))))))));
|
|
60
|
+
}
|
|
61
|
+
export function Tooltip({ id, title, rating, description, subtitle, price, imageUrls, onFavorite, onClose, }) {
|
|
62
|
+
const hasImages = imageUrls && imageUrls.length > 0;
|
|
63
|
+
return (h("div", { class: "mapka-tooltip" },
|
|
64
|
+
hasImages && (h(ImageCarousel, { imageUrls: imageUrls, title: title, onFavorite: onFavorite, id: id, onClose: onClose })),
|
|
65
|
+
h("div", { class: "mapka-tooltip-content" },
|
|
66
|
+
(title || rating) && (h("div", { class: "mapka-tooltip-header" },
|
|
67
|
+
title && h("h3", { class: "mapka-tooltip-title" }, title),
|
|
68
|
+
rating && (h("div", { class: "mapka-tooltip-rating" },
|
|
69
|
+
h(StarIcon, null),
|
|
70
|
+
h("span", { class: "mapka-tooltip-rating-value" }, rating.value.toFixed(2).replace(".", ",")),
|
|
71
|
+
h("span", { class: "mapka-tooltip-rating-count" },
|
|
72
|
+
"(",
|
|
73
|
+
rating.count,
|
|
74
|
+
")"))))),
|
|
75
|
+
description && h("p", { class: "mapka-tooltip-description" }, description),
|
|
76
|
+
subtitle && h("p", { class: "mapka-tooltip-subtitle" }, subtitle),
|
|
77
|
+
price && (h("div", { class: "mapka-tooltip-price" },
|
|
78
|
+
price.original && h("span", { class: "mapka-tooltip-price-original" }, price.original),
|
|
79
|
+
h("span", { class: "mapka-tooltip-price-current" }, price.current),
|
|
80
|
+
price.suffix && h("span", { class: "mapka-tooltip-price-suffix" }, price.suffix))))));
|
|
81
|
+
}
|
package/lib/index.js
CHANGED
package/lib/map.js
CHANGED
package/lib/modules/icons.js
CHANGED
package/lib/modules/markers.js
CHANGED
package/lib/modules/tooltip.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Popup } from "maplibre-gl";
|
|
2
2
|
import type { MapkaTooltipOptions } from "../types/marker.js";
|
|
3
3
|
/**
|
|
4
4
|
* Shows a tooltip for a marker
|
|
@@ -11,5 +11,5 @@ export declare function hideTooltip(): void;
|
|
|
11
11
|
/**
|
|
12
12
|
* Gets the current visible popup
|
|
13
13
|
*/
|
|
14
|
-
export declare function getCurrentTooltip():
|
|
14
|
+
export declare function getCurrentTooltip(): Popup | null;
|
|
15
15
|
//# sourceMappingURL=tooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/modules/tooltip.
|
|
1
|
+
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/modules/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAI9D;;GAEG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,UAAU,CAAC,MAAM,EACzB,OAAO,EAAE,mBAAmB,EAC5B,GAAG,EAAE,UAAU,CAAC,GAAG,QAmBpB;AAED;;GAEG;AACH,wBAAgB,WAAW,SAK1B;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,KAAK,GAAG,IAAI,CAEhD"}
|
package/lib/modules/tooltip.js
CHANGED
|
@@ -1,291 +1,24 @@
|
|
|
1
|
-
|
|
1
|
+
// biome-ignore lint/correctness/noUnusedImports: <explanation>
|
|
2
|
+
import { h } from "preact";
|
|
3
|
+
import { Popup } from "maplibre-gl";
|
|
4
|
+
import { render } from "preact";
|
|
5
|
+
import { Tooltip } from "../components/Tooltip.js";
|
|
2
6
|
let currentPopup = null;
|
|
3
|
-
let currentCarouselIndex = 0;
|
|
4
|
-
/**
|
|
5
|
-
* Creates the tooltip content HTML with Airbnb-style design
|
|
6
|
-
*/
|
|
7
|
-
function createTooltipContent(options) {
|
|
8
|
-
const content = document.createElement("div");
|
|
9
|
-
content.className = "mapka-tooltip-content-wrapper";
|
|
10
|
-
// Add image carousel if images are provided
|
|
11
|
-
if (options.imageUrls && options.imageUrls.length > 0) {
|
|
12
|
-
const carouselContainer = document.createElement("div");
|
|
13
|
-
carouselContainer.className = "mapka-tooltip-carousel";
|
|
14
|
-
const carouselTrack = document.createElement("div");
|
|
15
|
-
carouselTrack.className = "mapka-tooltip-carousel-track";
|
|
16
|
-
options.imageUrls.forEach((url, index) => {
|
|
17
|
-
const img = document.createElement("img");
|
|
18
|
-
img.src = url;
|
|
19
|
-
img.alt = options.title || "Marker image";
|
|
20
|
-
img.className = "mapka-tooltip-image";
|
|
21
|
-
if (index === 0)
|
|
22
|
-
img.classList.add("active");
|
|
23
|
-
carouselTrack.appendChild(img);
|
|
24
|
-
});
|
|
25
|
-
carouselContainer.appendChild(carouselTrack);
|
|
26
|
-
// Add close button
|
|
27
|
-
const closeButton = document.createElement("button");
|
|
28
|
-
closeButton.className = "mapka-tooltip-action-btn mapka-tooltip-close";
|
|
29
|
-
closeButton.innerHTML = `<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="display:block;fill:none;height:16px;width:16px;stroke:currentColor;stroke-width:3;overflow:visible"><path d="m6 6 20 20M26 6 6 26"></path></svg>`;
|
|
30
|
-
closeButton.setAttribute("aria-label", "Close");
|
|
31
|
-
closeButton.addEventListener("click", (e) => {
|
|
32
|
-
e.stopPropagation();
|
|
33
|
-
hideTooltip();
|
|
34
|
-
});
|
|
35
|
-
carouselContainer.appendChild(closeButton);
|
|
36
|
-
// Add navigation dots if multiple images
|
|
37
|
-
if (options.imageUrls.length > 1) {
|
|
38
|
-
const dotsContainer = document.createElement("div");
|
|
39
|
-
dotsContainer.className = "mapka-tooltip-dots";
|
|
40
|
-
options.imageUrls.forEach((_, index) => {
|
|
41
|
-
const dot = document.createElement("button");
|
|
42
|
-
dot.className = "mapka-tooltip-dot";
|
|
43
|
-
if (index === 0)
|
|
44
|
-
dot.classList.add("active");
|
|
45
|
-
dot.setAttribute("aria-label", `Go to image ${index + 1}`);
|
|
46
|
-
dot.addEventListener("click", (e) => {
|
|
47
|
-
e.stopPropagation();
|
|
48
|
-
showCarouselImage(carouselTrack, dotsContainer, index);
|
|
49
|
-
});
|
|
50
|
-
dotsContainer.appendChild(dot);
|
|
51
|
-
});
|
|
52
|
-
carouselContainer.appendChild(dotsContainer);
|
|
53
|
-
// Add prev/next buttons
|
|
54
|
-
const prevButton = document.createElement("button");
|
|
55
|
-
prevButton.className = "mapka-tooltip-carousel-btn mapka-tooltip-carousel-prev";
|
|
56
|
-
prevButton.innerHTML = `<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="display:block;fill:none;height:12px;width:12px;stroke:currentColor;stroke-width:4;overflow:visible"><path fill="none" d="M20 28 8.7 16.7a1 1 0 0 1 0-1.4L20 4"></path></svg>`;
|
|
57
|
-
prevButton.setAttribute("aria-label", "Previous image");
|
|
58
|
-
prevButton.addEventListener("click", (e) => {
|
|
59
|
-
e.stopPropagation();
|
|
60
|
-
const imageCount = options.imageUrls?.length ?? 0;
|
|
61
|
-
const newIndex = currentCarouselIndex === 0 ? imageCount - 1 : currentCarouselIndex - 1;
|
|
62
|
-
showCarouselImage(carouselTrack, dotsContainer, newIndex);
|
|
63
|
-
});
|
|
64
|
-
const nextButton = document.createElement("button");
|
|
65
|
-
nextButton.className = "mapka-tooltip-carousel-btn mapka-tooltip-carousel-next";
|
|
66
|
-
nextButton.innerHTML = `<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="display:block;fill:none;height:12px;width:12px;stroke:currentColor;stroke-width:4;overflow:visible"><path fill="none" d="m12 4 11.3 11.3a1 1 0 0 1 0 1.4L12 28"></path></svg>`;
|
|
67
|
-
nextButton.setAttribute("aria-label", "Next image");
|
|
68
|
-
nextButton.addEventListener("click", (e) => {
|
|
69
|
-
e.stopPropagation();
|
|
70
|
-
const imageCount = options.imageUrls?.length ?? 0;
|
|
71
|
-
const newIndex = (currentCarouselIndex + 1) % imageCount;
|
|
72
|
-
showCarouselImage(carouselTrack, dotsContainer, newIndex);
|
|
73
|
-
});
|
|
74
|
-
carouselContainer.appendChild(prevButton);
|
|
75
|
-
carouselContainer.appendChild(nextButton);
|
|
76
|
-
}
|
|
77
|
-
content.appendChild(carouselContainer);
|
|
78
|
-
}
|
|
79
|
-
// Add text content section
|
|
80
|
-
const textContent = document.createElement("div");
|
|
81
|
-
textContent.className = "mapka-tooltip-text";
|
|
82
|
-
if (options.title) {
|
|
83
|
-
const title = document.createElement("h3");
|
|
84
|
-
title.className = "mapka-tooltip-title";
|
|
85
|
-
title.textContent = options.title;
|
|
86
|
-
textContent.appendChild(title);
|
|
87
|
-
}
|
|
88
|
-
if (options.description) {
|
|
89
|
-
const description = document.createElement("p");
|
|
90
|
-
description.className = "mapka-tooltip-description";
|
|
91
|
-
description.textContent = options.description;
|
|
92
|
-
textContent.appendChild(description);
|
|
93
|
-
}
|
|
94
|
-
content.appendChild(textContent);
|
|
95
|
-
return content;
|
|
96
|
-
}
|
|
97
|
-
/**
|
|
98
|
-
* Shows a specific image in the carousel
|
|
99
|
-
*/
|
|
100
|
-
function showCarouselImage(track, dotsContainer, index) {
|
|
101
|
-
currentCarouselIndex = index;
|
|
102
|
-
const images = track.querySelectorAll(".mapka-tooltip-image");
|
|
103
|
-
const dots = dotsContainer.querySelectorAll(".mapka-tooltip-dot");
|
|
104
|
-
images.forEach((img, i) => {
|
|
105
|
-
img.classList.toggle("active", i === index);
|
|
106
|
-
});
|
|
107
|
-
dots.forEach((dot, i) => {
|
|
108
|
-
dot.classList.toggle("active", i === index);
|
|
109
|
-
});
|
|
110
|
-
track.style.transform = `translateX(-${index * 100}%)`;
|
|
111
|
-
}
|
|
112
|
-
/**
|
|
113
|
-
* Injects the required CSS styles for the tooltip
|
|
114
|
-
*/
|
|
115
|
-
function injectStyles() {
|
|
116
|
-
if (document.getElementById("mapka-tooltip-styles"))
|
|
117
|
-
return;
|
|
118
|
-
const style = document.createElement("style");
|
|
119
|
-
style.id = "mapka-tooltip-styles";
|
|
120
|
-
style.textContent = `
|
|
121
|
-
.maplibregl-popup-content {
|
|
122
|
-
padding: 0 !important;
|
|
123
|
-
border-radius: 12px !important;
|
|
124
|
-
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
|
|
125
|
-
min-width: 280px;
|
|
126
|
-
max-width: 320px;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.maplibregl-popup-close-button {
|
|
130
|
-
display: none !important;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
.mapka-tooltip-content-wrapper {
|
|
134
|
-
border-radius: 12px;
|
|
135
|
-
overflow: hidden;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.mapka-tooltip-carousel {
|
|
139
|
-
position: relative;
|
|
140
|
-
width: 100%;
|
|
141
|
-
height: 200px;
|
|
142
|
-
overflow: hidden;
|
|
143
|
-
border-radius: 12px 12px 0 0;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.mapka-tooltip-carousel-track {
|
|
147
|
-
display: flex;
|
|
148
|
-
height: 100%;
|
|
149
|
-
transition: transform 0.3s ease;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.mapka-tooltip-image {
|
|
153
|
-
min-width: 100%;
|
|
154
|
-
height: 100%;
|
|
155
|
-
object-fit: cover;
|
|
156
|
-
display: none;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
.mapka-tooltip-image.active {
|
|
160
|
-
display: block;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
.mapka-tooltip-action-btn {
|
|
164
|
-
position: absolute;
|
|
165
|
-
top: 12px;
|
|
166
|
-
right: 12px;
|
|
167
|
-
background: rgba(255, 255, 255, 0.95);
|
|
168
|
-
border: none;
|
|
169
|
-
border-radius: 50%;
|
|
170
|
-
width: 32px;
|
|
171
|
-
height: 32px;
|
|
172
|
-
cursor: pointer;
|
|
173
|
-
display: flex;
|
|
174
|
-
align-items: center;
|
|
175
|
-
justify-content: center;
|
|
176
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
|
|
177
|
-
transition: background 0.2s ease, transform 0.2s ease;
|
|
178
|
-
color: #222;
|
|
179
|
-
z-index: 3;
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
.mapka-tooltip-action-btn:hover {
|
|
183
|
-
background: white;
|
|
184
|
-
transform: scale(1.05);
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
.mapka-tooltip-carousel-btn {
|
|
188
|
-
position: absolute;
|
|
189
|
-
top: 50%;
|
|
190
|
-
transform: translateY(-50%);
|
|
191
|
-
background: rgba(255, 255, 255, 0.95);
|
|
192
|
-
border: none;
|
|
193
|
-
border-radius: 50%;
|
|
194
|
-
width: 32px;
|
|
195
|
-
height: 32px;
|
|
196
|
-
cursor: pointer;
|
|
197
|
-
display: flex;
|
|
198
|
-
align-items: center;
|
|
199
|
-
justify-content: center;
|
|
200
|
-
z-index: 2;
|
|
201
|
-
transition: background 0.2s ease, transform 0.2s ease;
|
|
202
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
|
|
203
|
-
color: #222;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
.mapka-tooltip-carousel-btn:hover {
|
|
207
|
-
background: white;
|
|
208
|
-
transform: translateY(-50%) scale(1.05);
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
.mapka-tooltip-carousel-prev {
|
|
212
|
-
left: 12px;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
.mapka-tooltip-carousel-next {
|
|
216
|
-
right: 12px;
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
.mapka-tooltip-dots {
|
|
220
|
-
position: absolute;
|
|
221
|
-
bottom: 12px;
|
|
222
|
-
left: 50%;
|
|
223
|
-
transform: translateX(-50%);
|
|
224
|
-
display: flex;
|
|
225
|
-
gap: 6px;
|
|
226
|
-
z-index: 2;
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
.mapka-tooltip-dot {
|
|
230
|
-
width: 6px;
|
|
231
|
-
height: 6px;
|
|
232
|
-
border-radius: 50%;
|
|
233
|
-
background: rgba(255, 255, 255, 0.6);
|
|
234
|
-
border: none;
|
|
235
|
-
cursor: pointer;
|
|
236
|
-
padding: 0;
|
|
237
|
-
transition: background 0.2s ease, transform 0.2s ease;
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
.mapka-tooltip-dot:hover {
|
|
241
|
-
background: rgba(255, 255, 255, 0.8);
|
|
242
|
-
transform: scale(1.2);
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
.mapka-tooltip-dot.active {
|
|
246
|
-
background: white;
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
.mapka-tooltip-text {
|
|
250
|
-
padding: 12px 16px 16px;
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
.mapka-tooltip-title {
|
|
254
|
-
margin: 0 0 4px 0;
|
|
255
|
-
font-size: 15px;
|
|
256
|
-
font-weight: 600;
|
|
257
|
-
color: #222;
|
|
258
|
-
line-height: 1.3;
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
.mapka-tooltip-description {
|
|
262
|
-
margin: 0;
|
|
263
|
-
font-size: 14px;
|
|
264
|
-
color: #717171;
|
|
265
|
-
line-height: 1.4;
|
|
266
|
-
}
|
|
267
|
-
`;
|
|
268
|
-
document.head.appendChild(style);
|
|
269
|
-
}
|
|
270
7
|
/**
|
|
271
8
|
* Shows a tooltip for a marker
|
|
272
9
|
*/
|
|
273
10
|
export function showTooltip(marker, options, map) {
|
|
274
|
-
// Hide any existing tooltip
|
|
275
11
|
hideTooltip();
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
const content = createTooltipContent(options);
|
|
281
|
-
const popup = new maplibregl.Popup({
|
|
282
|
-
closeButton: true,
|
|
12
|
+
const container = document.createElement("div");
|
|
13
|
+
render(h(Tooltip, { ...options, onClose: hideTooltip }), container);
|
|
14
|
+
const popup = new Popup({
|
|
15
|
+
closeButton: false,
|
|
283
16
|
closeOnClick: false,
|
|
284
17
|
maxWidth: "320px",
|
|
285
18
|
offset: 12,
|
|
286
19
|
})
|
|
287
20
|
.setLngLat(marker.getLngLat())
|
|
288
|
-
.setDOMContent(
|
|
21
|
+
.setDOMContent(container)
|
|
289
22
|
.addTo(map);
|
|
290
23
|
currentPopup = popup;
|
|
291
24
|
}
|
|
@@ -304,4 +37,3 @@ export function hideTooltip() {
|
|
|
304
37
|
export function getCurrentTooltip() {
|
|
305
38
|
return currentPopup;
|
|
306
39
|
}
|
|
307
|
-
//# sourceMappingURL=tooltip.js.map
|
package/lib/types/layer.js
CHANGED
package/lib/types/marker.d.ts
CHANGED
|
@@ -1,8 +1,22 @@
|
|
|
1
|
+
export interface MapkaTooltipRating {
|
|
2
|
+
value: number;
|
|
3
|
+
count: number;
|
|
4
|
+
}
|
|
5
|
+
export interface MapkaTooltipPrice {
|
|
6
|
+
current: string;
|
|
7
|
+
original?: string;
|
|
8
|
+
suffix?: string;
|
|
9
|
+
}
|
|
1
10
|
export interface MapkaTooltipOptions {
|
|
11
|
+
id?: string;
|
|
2
12
|
trigger?: "hover" | "click";
|
|
3
13
|
title?: string;
|
|
14
|
+
rating?: MapkaTooltipRating;
|
|
4
15
|
description?: string;
|
|
16
|
+
subtitle?: string;
|
|
17
|
+
price?: MapkaTooltipPrice;
|
|
5
18
|
imageUrls?: string[];
|
|
19
|
+
onFavorite?: (id: string) => void;
|
|
6
20
|
}
|
|
7
21
|
export interface MapkaMarkerOptions {
|
|
8
22
|
position: [number, number];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"marker.d.ts","sourceRoot":"","sources":["../../src/types/marker.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;
|
|
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"}
|
package/lib/types/marker.js
CHANGED
package/lib/types/style.js
CHANGED
package/lib/utils/url.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mapka/maplibre-gl-sdk",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Mapka JS SDK",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -12,7 +12,8 @@
|
|
|
12
12
|
"url": "https://github.com/mapka-dev/sdk.git"
|
|
13
13
|
},
|
|
14
14
|
"exports": {
|
|
15
|
-
".": "./lib/index.js"
|
|
15
|
+
".": "./lib/index.js",
|
|
16
|
+
"./styles.css": "./src/styles.css"
|
|
16
17
|
},
|
|
17
18
|
"keywords": [
|
|
18
19
|
"map",
|
|
@@ -22,8 +23,9 @@
|
|
|
22
23
|
"author": "chyzwar",
|
|
23
24
|
"license": "Apache-2.0",
|
|
24
25
|
"dependencies": {
|
|
25
|
-
"es-toolkit": "^1.
|
|
26
|
-
"maplibre-gl": "^5.
|
|
26
|
+
"es-toolkit": "^1.43.0",
|
|
27
|
+
"maplibre-gl": "^5.14.0",
|
|
28
|
+
"preact": "^10.28.0"
|
|
27
29
|
},
|
|
28
30
|
"files": [
|
|
29
31
|
"src/",
|
|
@@ -32,5 +34,5 @@
|
|
|
32
34
|
"!**/__tests__/",
|
|
33
35
|
"!lib/buildInfo.json"
|
|
34
36
|
],
|
|
35
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "5d0ea87f67bec5a46f15734f4a6dc75db98f23cb"
|
|
36
38
|
}
|