@mapka/maplibre-gl-sdk 0.6.0 → 0.7.0

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;AAuB1C,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":"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"}

package/lib/modules/markers.js

@@ -1,18 +1,38 @@
 import * as maplibregl 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 marker of markers) {
-        const { position, color } = marker;
+    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();
+            });
+        }
         prevMarkers.add(newMarker);
     }
 }

package/lib/modules/markers.js.map

@@ -1 +1 @@
-{"version":3,"file":"markers.js","sourceRoot":"","sources":["../../src/modules/markers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAKxC,MAAM,WAAW,GAAG,IAAI,GAAG,EAAqB,CAAC;AAEjD,SAAS,eAAe,CAAC,GAAa,EAAE,OAA6B;IACnE,KAAK,MAAM,MAAM,IAAI,WAAW,EAAE,CAAC;QACjC,MAAM,CAAC,MAAM,EAAE,CAAC;IAClB,CAAC;IACD,WAAW,CAAC,KAAK,EAAE,CAAC;IAEpB,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;QAC7B,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC;QACnC,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,MAAM,CAAC;YACtC,KAAK;SACN,CAAC;aACC,SAAS,CAAC,QAAQ,CAAC;aACnB,KAAK,CAAC,GAAG,CAAC,CAAC;QAEd,WAAW,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAC7B,CAAC;AACH,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,GAAa;IACtC,MAAM,KAAK,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,GAAG,CAAC,KAAK,EAAE,wBAAwB,EAAE,EAAE,CAAyB,CAAC;IACjF,eAAe,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;AAChC,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,GAAa,EAAE,IAAwB;IACzE,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,EAAE,wBAAwB,EAAE,EAAE,CAAyB,CAAC;IAChF,eAAe,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;AAChC,CAAC"}
+{"version":3,"file":"markers.js","sourceRoot":"","sources":["../../src/modules/markers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAIxC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAExD,MAAM,WAAW,GAAG,IAAI,GAAG,EAAqB,CAAC;AAEjD,SAAS,eAAe,CAAC,GAAa,EAAE,OAA6B;IACnE,KAAK,MAAM,MAAM,IAAI,WAAW,EAAE,CAAC;QACjC,MAAM,CAAC,MAAM,EAAE,CAAC;IAClB,CAAC;IACD,WAAW,CAAC,KAAK,EAAE,CAAC;IAEpB,KAAK,MAAM,YAAY,IAAI,OAAO,EAAE,CAAC;QACnC,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;QAClD,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,MAAM,CAAC;YACtC,KAAK;SACN,CAAC;aACC,SAAS,CAAC,QAAQ,CAAC;aACnB,KAAK,CAAC,GAAG,CAAC,CAAC;QAEd,IAAI,OAAO,EAAE,OAAO,KAAK,OAAO,EAAE,CAAC;YACjC,MAAM,aAAa,GAAG,SAAS,CAAC,UAAU,EAAE,CAAC;YAE7C,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC;YAEvC,aAAa,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBAC5C,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,WAAW,CAAC,SAAS,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC;YACvC,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,OAAO,EAAE,OAAO,KAAK,OAAO,EAAE,CAAC;YACxC,MAAM,aAAa,GAAG,SAAS,CAAC,UAAU,EAAE,CAAC;YAE7C,aAAa,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;gBACjD,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,WAAW,CAAC,SAAS,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC;YACvC,CAAC,CAAC,CAAC;YACH,aAAa,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;gBACjD,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,WAAW,EAAE,CAAC;YAChB,CAAC,CAAC,CAAC;QACL,CAAC;QAED,WAAW,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAC7B,CAAC;AACH,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,GAAa;IACtC,MAAM,KAAK,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,GAAG,CAAC,KAAK,EAAE,wBAAwB,EAAE,EAAE,CAAyB,CAAC;IACjF,eAAe,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;AAChC,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,GAAa,EAAE,IAAwB;IACzE,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,EAAE,wBAAwB,EAAE,EAAE,CAAyB,CAAC;IAChF,eAAe,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;AAChC,CAAC"}

package/lib/modules/tooltip.d.ts

@@ -0,0 +1,15 @@
+import * as maplibregl from "maplibre-gl";
+import type { MapkaTooltipOptions } from "../types/marker.js";
+/**
+ * Shows a tooltip for a marker
+ */
+export declare function showTooltip(marker: maplibregl.Marker, options: MapkaTooltipOptions, map: maplibregl.Map): void;
+/**
+ * Hides the current tooltip
+ */
+export declare function hideTooltip(): void;
+/**
+ * Gets the current visible popup
+ */
+export declare function getCurrentTooltip(): maplibregl.Popup | null;
+//# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/modules/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,aAAa,CAAC;AAC1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAuS9D;;GAEG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,UAAU,CAAC,MAAM,EACzB,OAAO,EAAE,mBAAmB,EAC5B,GAAG,EAAE,UAAU,CAAC,GAAG,QAwBpB;AAED;;GAEG;AACH,wBAAgB,WAAW,SAK1B;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,UAAU,CAAC,KAAK,GAAG,IAAI,CAE3D"}

package/lib/modules/tooltip.js

@@ -0,0 +1,307 @@
+import * as maplibregl from "maplibre-gl";
+let currentPopup = null;
+let currentCarouselIndex = 0;
+/**
+ * Creates the tooltip content HTML with Airbnb-style design
+ */
+function createTooltipContent(options) {
+    const content = document.createElement("div");
+    content.className = "mapka-tooltip-content-wrapper";
+    // Add image carousel if images are provided
+    if (options.imageUrls && options.imageUrls.length > 0) {
+        const carouselContainer = document.createElement("div");
+        carouselContainer.className = "mapka-tooltip-carousel";
+        const carouselTrack = document.createElement("div");
+        carouselTrack.className = "mapka-tooltip-carousel-track";
+        options.imageUrls.forEach((url, index) => {
+            const img = document.createElement("img");
+            img.src = url;
+            img.alt = options.title || "Marker image";
+            img.className = "mapka-tooltip-image";
+            if (index === 0)
+                img.classList.add("active");
+            carouselTrack.appendChild(img);
+        });
+        carouselContainer.appendChild(carouselTrack);
+        // Add close button
+        const closeButton = document.createElement("button");
+        closeButton.className = "mapka-tooltip-action-btn mapka-tooltip-close";
+        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>`;
+        closeButton.setAttribute("aria-label", "Close");
+        closeButton.addEventListener("click", (e) => {
+            e.stopPropagation();
+            hideTooltip();
+        });
+        carouselContainer.appendChild(closeButton);
+        // Add navigation dots if multiple images
+        if (options.imageUrls.length > 1) {
+            const dotsContainer = document.createElement("div");
+            dotsContainer.className = "mapka-tooltip-dots";
+            options.imageUrls.forEach((_, index) => {
+                const dot = document.createElement("button");
+                dot.className = "mapka-tooltip-dot";
+                if (index === 0)
+                    dot.classList.add("active");
+                dot.setAttribute("aria-label", `Go to image ${index + 1}`);
+                dot.addEventListener("click", (e) => {
+                    e.stopPropagation();
+                    showCarouselImage(carouselTrack, dotsContainer, index);
+                });
+                dotsContainer.appendChild(dot);
+            });
+            carouselContainer.appendChild(dotsContainer);
+            // Add prev/next buttons
+            const prevButton = document.createElement("button");
+            prevButton.className = "mapka-tooltip-carousel-btn mapka-tooltip-carousel-prev";
+            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>`;
+            prevButton.setAttribute("aria-label", "Previous image");
+            prevButton.addEventListener("click", (e) => {
+                e.stopPropagation();
+                const imageCount = options.imageUrls?.length ?? 0;
+                const newIndex = currentCarouselIndex === 0 ? imageCount - 1 : currentCarouselIndex - 1;
+                showCarouselImage(carouselTrack, dotsContainer, newIndex);
+            });
+            const nextButton = document.createElement("button");
+            nextButton.className = "mapka-tooltip-carousel-btn mapka-tooltip-carousel-next";
+            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>`;
+            nextButton.setAttribute("aria-label", "Next image");
+            nextButton.addEventListener("click", (e) => {
+                e.stopPropagation();
+                const imageCount = options.imageUrls?.length ?? 0;
+                const newIndex = (currentCarouselIndex + 1) % imageCount;
+                showCarouselImage(carouselTrack, dotsContainer, newIndex);
+            });
+            carouselContainer.appendChild(prevButton);
+            carouselContainer.appendChild(nextButton);
+        }
+        content.appendChild(carouselContainer);
+    }
+    // Add text content section
+    const textContent = document.createElement("div");
+    textContent.className = "mapka-tooltip-text";
+    if (options.title) {
+        const title = document.createElement("h3");
+        title.className = "mapka-tooltip-title";
+        title.textContent = options.title;
+        textContent.appendChild(title);
+    }
+    if (options.description) {
+        const description = document.createElement("p");
+        description.className = "mapka-tooltip-description";
+        description.textContent = options.description;
+        textContent.appendChild(description);
+    }
+    content.appendChild(textContent);
+    return content;
+}
+/**
+ * Shows a specific image in the carousel
+ */
+function showCarouselImage(track, dotsContainer, index) {
+    currentCarouselIndex = index;
+    const images = track.querySelectorAll(".mapka-tooltip-image");
+    const dots = dotsContainer.querySelectorAll(".mapka-tooltip-dot");
+    images.forEach((img, i) => {
+        img.classList.toggle("active", i === index);
+    });
+    dots.forEach((dot, i) => {
+        dot.classList.toggle("active", i === index);
+    });
+    track.style.transform = `translateX(-${index * 100}%)`;
+}
+/**
+ * Injects the required CSS styles for the tooltip
+ */
+function injectStyles() {
+    if (document.getElementById("mapka-tooltip-styles"))
+        return;
+    const style = document.createElement("style");
+    style.id = "mapka-tooltip-styles";
+    style.textContent = `
+    .maplibregl-popup-content {
+      padding: 0 !important;
+      border-radius: 12px !important;
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
+      min-width: 280px;
+      max-width: 320px;
+    }
+
+    .maplibregl-popup-close-button {
+      display: none !important;
+    }
+
+    .mapka-tooltip-content-wrapper {
+      border-radius: 12px;
+      overflow: hidden;
+    }
+
+    .mapka-tooltip-carousel {
+      position: relative;
+      width: 100%;
+      height: 200px;
+      overflow: hidden;
+      border-radius: 12px 12px 0 0;
+    }
+
+    .mapka-tooltip-carousel-track {
+      display: flex;
+      height: 100%;
+      transition: transform 0.3s ease;
+    }
+
+    .mapka-tooltip-image {
+      min-width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: none;
+    }
+
+    .mapka-tooltip-image.active {
+      display: block;
+    }
+
+    .mapka-tooltip-action-btn {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      background: rgba(255, 255, 255, 0.95);
+      border: none;
+      border-radius: 50%;
+      width: 32px;
+      height: 32px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
+      transition: background 0.2s ease, transform 0.2s ease;
+      color: #222;
+      z-index: 3;
+    }
+
+    .mapka-tooltip-action-btn:hover {
+      background: white;
+      transform: scale(1.05);
+    }
+
+    .mapka-tooltip-carousel-btn {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      background: rgba(255, 255, 255, 0.95);
+      border: none;
+      border-radius: 50%;
+      width: 32px;
+      height: 32px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 2;
+      transition: background 0.2s ease, transform 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
+      color: #222;
+    }
+
+    .mapka-tooltip-carousel-btn:hover {
+      background: white;
+      transform: translateY(-50%) scale(1.05);
+    }
+
+    .mapka-tooltip-carousel-prev {
+      left: 12px;
+    }
+
+    .mapka-tooltip-carousel-next {
+      right: 12px;
+    }
+
+    .mapka-tooltip-dots {
+      position: absolute;
+      bottom: 12px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 6px;
+      z-index: 2;
+    }
+
+    .mapka-tooltip-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.6);
+      border: none;
+      cursor: pointer;
+      padding: 0;
+      transition: background 0.2s ease, transform 0.2s ease;
+    }
+
+    .mapka-tooltip-dot:hover {
+      background: rgba(255, 255, 255, 0.8);
+      transform: scale(1.2);
+    }
+
+    .mapka-tooltip-dot.active {
+      background: white;
+    }
+
+    .mapka-tooltip-text {
+      padding: 12px 16px 16px;
+    }
+
+    .mapka-tooltip-title {
+      margin: 0 0 4px 0;
+      font-size: 15px;
+      font-weight: 600;
+      color: #222;
+      line-height: 1.3;
+    }
+
+    .mapka-tooltip-description {
+      margin: 0;
+      font-size: 14px;
+      color: #717171;
+      line-height: 1.4;
+    }
+  `;
+    document.head.appendChild(style);
+}
+/**
+ * Shows a tooltip for a marker
+ */
+export function showTooltip(marker, options, map) {
+    // Hide any existing tooltip
+    hideTooltip();
+    // Inject styles if not already present
+    injectStyles();
+    // Reset carousel index
+    currentCarouselIndex = 0;
+    const content = createTooltipContent(options);
+    const popup = new maplibregl.Popup({
+        closeButton: true,
+        closeOnClick: false,
+        maxWidth: "320px",
+        offset: 12,
+    })
+        .setLngLat(marker.getLngLat())
+        .setDOMContent(content)
+        .addTo(map);
+    currentPopup = popup;
+}
+/**
+ * Hides the current tooltip
+ */
+export function hideTooltip() {
+    if (currentPopup) {
+        currentPopup.remove();
+        currentPopup = null;
+    }
+}
+/**
+ * Gets the current visible popup
+ */
+export function getCurrentTooltip() {
+    return currentPopup;
+}
+//# sourceMappingURL=tooltip.js.map

package/lib/modules/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../src/modules/tooltip.ts"],"names":[],"mappings":"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"}

package/lib/types/marker.d.ts

@@ -1,6 +1,13 @@
+export interface MapkaTooltipOptions {
+    trigger?: "hover" | "click";
+    title?: string;
+    description?: string;
+    imageUrls?: string[];
+}
 export interface MapkaMarkerOptions {
     position: [number, number];
     color?: string;
     icon?: string;
+    tooltip?: MapkaTooltipOptions;
 }
 //# 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,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}
+{"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;CACtB;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/utils/url.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"url.d.ts","sourceRoot":"","sources":["../../src/utils/url.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,0FAS1B"}
+{"version":3,"file":"url.d.ts","sourceRoot":"","sources":["../../src/utils/url.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,0FAQ1B"}

package/lib/utils/url.js

@@ -1,6 +1,5 @@
 import { MapkaMap } from "../map.js";
 export function getMapkaUrl() {
-    console.log("MapkaMap.env", MapkaMap.env);
     if (MapkaMap.env === "dev") {
         return "https://api.dev.mapka.dev";
     }

package/lib/utils/url.js.map

@@ -1 +1 @@
-{"version":3,"file":"url.js","sourceRoot":"","sources":["../../src/utils/url.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAErC,MAAM,UAAU,WAAW;IACzB,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC1C,IAAI,QAAQ,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;QAC3B,OAAO,2BAA2B,CAAC;IACrC,CAAC;IACD,IAAI,QAAQ,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;QAC7B,OAAO,6BAA6B,CAAC;IACvC,CAAC;IACD,OAAO,uBAAuB,CAAC;AACjC,CAAC"}
+{"version":3,"file":"url.js","sourceRoot":"","sources":["../../src/utils/url.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAErC,MAAM,UAAU,WAAW;IACzB,IAAI,QAAQ,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;QAC3B,OAAO,2BAA2B,CAAC;IACrC,CAAC;IACD,IAAI,QAAQ,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;QAC7B,OAAO,6BAA6B,CAAC;IACvC,CAAC;IACD,OAAO,uBAAuB,CAAC;AACjC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapka/maplibre-gl-sdk",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "description": "Mapka JS SDK",
   "sideEffects": false,
@@ -32,5 +32,5 @@
     "!**/__tests__/",
     "!lib/buildInfo.json"
   ],
-  "gitHead": "b57b649b9cff4ac0a3a0e68f3399bf3ba029d726"
+  "gitHead": "515b5fc822aee407b9adf38be56c4cf9e090c867"
 }

package/src/modules/markers.ts

@@ -3,6 +3,7 @@ import { get } from "es-toolkit/compat";
 import type { StyleSpecification } from "maplibre-gl";
 import type { MapkaMap } from "../map.js";
 import type { MapkaMarkerOptions } from "../types/marker.js";
+import { showTooltip, hideTooltip } from "./tooltip.js";
 
 const prevMarkers = new Set<maplibregl.Marker>();
 
@@ -12,14 +13,36 @@ function addMarkersToMap(map: MapkaMap, markers: MapkaMarkerOptions[]) {
   }
   prevMarkers.clear();
 
-  for (const marker of markers) {
-    const { position, color } = marker;
+  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();
+      });
+    }
+
     prevMarkers.add(newMarker);
   }
 }