@mapka/maplibre-gl-sdk 0.6.0 → 0.8.0

package/lib/index.js

@@ -3,4 +3,3 @@ export * from "./types/layer.js";
 export * from "./types/marker.js";
 export * from "./types/style.js";
 export { MapkaMap as Map } from "./map.js";
-//# sourceMappingURL=index.js.map

package/lib/map.js

@@ -46,4 +46,3 @@ export class MapkaMap extends maplibregl.Map {
         return this;
     }
 }
-//# sourceMappingURL=map.js.map

package/lib/modules/icons.js

@@ -41,4 +41,3 @@ export function loadLayersIcons(map, event) {
     }
     loadIcons(map);
 }
-//# sourceMappingURL=icons.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"markers.d.ts","sourceRoot":"","sources":["../../src/modules/markers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;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);
     }
 }
@@ -25,4 +45,3 @@ export function addMarkersStyleDiff(map, next) {
     const markers = get(next, "metadata.mapka.markers", []);
     addMarkersToMap(map, markers);
 }
-//# sourceMappingURL=markers.js.map

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,306 @@
+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;
+}

package/lib/types/layer.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=layer.js.map

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/types/marker.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=marker.js.map

package/lib/types/style.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=style.js.map

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";
     }
@@ -9,4 +8,3 @@ export function getMapkaUrl() {
     }
     return "https://api.mapka.dev";
 }
-//# sourceMappingURL=url.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapka/maplibre-gl-sdk",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "type": "module",
   "description": "Mapka JS SDK",
   "sideEffects": false,
@@ -12,7 +12,8 @@
     "url": "https://github.com/mapka-dev/sdk.git"
   },
   "exports": {
-    ".": "./lib/index.js"
+    ".": "./lib/index.js",
+    "./styles.css": "./src/styles.css"
   },
   "keywords": [
     "map",
@@ -22,8 +23,9 @@
   "author": "chyzwar",
   "license": "Apache-2.0",
   "dependencies": {
-    "es-toolkit": "^1.42.0",
-    "maplibre-gl": "^5.13.0"
+    "es-toolkit": "^1.43.0",
+    "maplibre-gl": "^5.14.0",
+    "preact": "^10.28.0"
   },
   "files": [
     "src/",
@@ -32,5 +34,5 @@
     "!**/__tests__/",
     "!lib/buildInfo.json"
   ],
-  "gitHead": "b57b649b9cff4ac0a3a0e68f3399bf3ba029d726"
+  "gitHead": "9526c5f5a2af4bc87584e498a57683ed03fc53d3"
 }

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);
   }
 }