@mapka/maplibre-gl-sdk 0.6.0 → 0.8.0

package/src/modules/tooltip.ts

@@ -0,0 +1,344 @@
+import * as maplibregl from "maplibre-gl";
+import type { MapkaTooltipOptions } from "../types/marker.js";
+
+let currentPopup: maplibregl.Popup | null = null;
+let currentCarouselIndex = 0;
+
+/**
+ * Creates the tooltip content HTML with Airbnb-style design
+ */
+function createTooltipContent(options: MapkaTooltipOptions): HTMLElement {
+  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: HTMLElement, dotsContainer: HTMLElement, index: number) {
+  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: maplibregl.Marker,
+  options: MapkaTooltipOptions,
+  map: maplibregl.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(): maplibregl.Popup | null {
+  return currentPopup;
+}

package/src/types/marker.ts

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

package/src/utils/url.ts

@@ -1,7 +1,6 @@
 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/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AAEjC,OAAO,EAAE,QAAQ,IAAI,GAAG,EAAE,MAAM,UAAU,CAAC"}

package/lib/map.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"map.js","sourceRoot":"","sources":["../src/map.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAevE,MAAM,oBAAoB,GAAwC,CAAC,GAAG,EAAE,EAAE;IACxE,OAAO;QACL,GAAG;KACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAC1B,CAAC,MAAc,EAAE,gBAAkD,EAA4B,EAAE,CACjG,CAAC,GAAG,EAAE,EAAE;IACN,IAAI,GAAG,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC;QACjE,OAAO;YACL,GAAG;YACH,OAAO,EAAE;gBACP,aAAa,EAAE,UAAU,MAAM,EAAE;aAClC;SACF,CAAC;IACJ,CAAC;IACD,OAAO,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;AAC9E,CAAC,CAAC;AAEJ,MAAM,kBAAkB,GAAsC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;IACxE,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,OAAO,QAAS,SAAQ,UAAU,CAAC,GAAG;IAC1C,MAAM,CAAC,GAAG,GAAW,MAAM,CAAC;IAE5B,YAAmB,EAAE,gBAAgB,EAAE,MAAM,EAAE,GAAG,OAAO,EAAmB;QAC1E,KAAK,CAAC;YACJ,GAAG,OAAO;YACV,gBAAgB,EAAE,sBAAsB,CAAC,MAAM,EAAE,gBAAgB,CAAC;SACnE,CAAC,CAAC;QAEH,KAAK,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC,CAA+B,EAAE,EAAE;YACxD,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC,CAAC,CAAC;QAEH,KAAK,CAAC,EAAE,CAAC,mBAAmB,EAAE,CAAC,KAAgC,EAAE,EAAE;YACjE,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,QAAQ,CACb,KAAkC,EAClC,UAA2C,EAAE;QAE7C,MAAM,EAAE,cAAc,GAAG,kBAAkB,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO,CAAC;QAEjE,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE;YACpB,GAAG,IAAI;YACP,cAAc,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;gBAC7B,mBAAmB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;gBAChC,OAAO,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YACpC,CAAC;SACF,CAAC,CAAC;QAEH,OAAO,IAAI,CAAC;IACd,CAAC"}

package/lib/modules/icons.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/modules/icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAI9C,IAAI,YAAY,GAAa,EAAE,CAAC;AAChC,IAAI,WAAW,GAAa,EAAE,CAAC;AAO/B;;;GAGG;AACH,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,GAAa,EAAE,EAAE;IAC3C,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC9B,OAAO;IACT,CAAC;IACD,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACjF,WAAW,GAAG,WAAW,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAC9C,YAAY,GAAG,EAAE,CAAC;IAElB,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC7B,OAAO;IACT,CAAC;IAED,MAAM,MAAM,GAAG,IAAI,eAAe,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;IACzE,KAAK,CAAC,GAAG,WAAW,EAAE,aAAa,MAAM,EAAE,CAAC;SACzC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;SACnC,IAAI,CAAC,CAAC,IAAY,EAAE,EAAE;QACrB,IAAI,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE;YAC3B,MAAM,GAAG,GAAG,IAAI,KAAK,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;YAC9B,GAAG,CAAC,MAAM,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;YACzC,GAAG,CAAC,GAAG,GAAG,2CAA2C,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;QACnE,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACP,CAAC,EAAE,EAAE,CAAC,CAAC;AAEP;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAAC,GAAa,EAAE,KAAgC;IAC7E,IACE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC;QAC5B,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC;QAC9B,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,EAC9B,CAAC;QACD,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC;IACD,SAAS,CAAC,GAAG,CAAC,CAAC;AACjB,CAAC"}

package/lib/modules/markers.js.map

@@ -1 +0,0 @@
-{"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"}

package/lib/types/layer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"layer.js","sourceRoot":"","sources":["../../src/types/layer.ts"],"names":[],"mappings":""}

package/lib/types/marker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"marker.js","sourceRoot":"","sources":["../../src/types/marker.ts"],"names":[],"mappings":""}

package/lib/types/style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/types/style.ts"],"names":[],"mappings":""}

package/lib/utils/url.js.map

@@ -1 +0,0 @@
-{"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"}