@mapka/maplibre-gl-sdk 0.9.0 → 0.11.0

package/src/components/PopupContent.css

@@ -0,0 +1,177 @@
+
+/* Mapka Tooltip Styles */
+.mapka-tooltip {
+  border-radius: 12px;
+  overflow: hidden;
+  background: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+.mapka-popup-icon {
+  display: block;
+  fill: none;
+  height: 16px;
+  width: 16px;
+  stroke: currentColor;
+  overflow: visible;
+}
+
+.mapka-popup-icon-sm {
+  height: 12px;
+  width: 12px;
+}
+
+.mapka-popup-icon-star {
+  height: 12px;
+  width: 12px;
+  fill: currentColor;
+  stroke: none;
+}
+
+/* Carousel */
+.mapka-popup-carousel {
+  position: relative;
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  border-radius: 12px 12px 0 0;
+}
+
+.mapka-popup-carousel-track {
+  display: flex;
+  height: 100%;
+  transition: transform 0.3s ease;
+}
+
+.mapka-popup-carousel-image {
+  min-width: 100%;
+  height: 100%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.mapka-popup-carousel-actions {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  gap: 8px;
+  z-index: 3;
+}
+
+.mapka-popup-action-btn {
+  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;
+}
+
+.mapka-popup-action-btn:hover {
+  background: #fff;
+  transform: scale(1.05);
+}
+
+.mapka-popup-carousel-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.95);
+  border: none;
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  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-popup-carousel-btn:hover {
+  background: #fff;
+  transform: translateY(-50%) scale(1.05);
+}
+
+.mapka-popup-carousel-prev {
+  left: 12px;
+}
+
+.mapka-popup-carousel-next {
+  right: 12px;
+}
+
+.mapka-popup-dots {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 6px;
+  z-index: 2;
+}
+
+.mapka-popup-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-popup-dot:hover {
+  background: rgba(255, 255, 255, 0.8);
+  transform: scale(1.2);
+}
+
+.mapka-popup-dot-active {
+  background: #fff;
+}
+
+/* Content */
+.mapka-popup-content {
+  padding: 12px 16px 16px;
+}
+
+.mapka-popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.mapka-popup-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: #222;
+  line-height: 1.3;
+  flex: 1;
+}
+
+
+.mapka-popup-description {
+  margin: 0 0 4px 0;
+  font-size: 14px;
+  color: #717171;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}

package/src/components/{Tooltip.tsx → PopupContent.tsx}

@@ -1,10 +1,11 @@
 /** biome-ignore-all lint/correctness/noUnusedImports: <explanation> */
 import { h, Fragment } from "preact";
 import { useState } from "preact/hooks";
-import type { MapkaTooltipOptions } from "../types/marker.js";
+import type { MapkaPopupContent } from "../types/marker.js";
 
-interface TooltipProps extends MapkaTooltipOptions {
+interface PopupProps extends MapkaPopupContent {
   onClose?: () => void;
+  closeButton?: boolean;
 }
 
 function HeartIcon({ filled }: { filled?: boolean }) {
@@ -14,7 +15,7 @@ function HeartIcon({ filled }: { filled?: boolean }) {
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden="true"
       focusable="false"
-      class="mapka-tooltip-icon"
+      class="mapka-popup-icon"
     >
       <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"
@@ -33,7 +34,7 @@ function CloseIcon() {
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden="true"
       focusable="false"
-      class="mapka-tooltip-icon"
+      class="mapka-popup-icon"
     >
       <path d="m6 6 20 20M26 6 6 26" fill="none" stroke="currentColor" stroke-width="3" />
     </svg>
@@ -47,7 +48,7 @@ function ChevronLeftIcon() {
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden="true"
       focusable="false"
-      class="mapka-tooltip-icon mapka-tooltip-icon-sm"
+      class="mapka-popup-icon mapka-popup-icon-sm"
     >
       <path
         d="M20 28 8.7 16.7a1 1 0 0 1 0-1.4L20 4"
@@ -66,7 +67,7 @@ function ChevronRightIcon() {
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden="true"
       focusable="false"
-      class="mapka-tooltip-icon mapka-tooltip-icon-sm"
+      class="mapka-popup-icon mapka-popup-icon-sm"
     >
       <path
         d="m12 4 11.3 11.3a1 1 0 0 1 0 1.4L12 28"
@@ -78,32 +79,17 @@ function ChevronRightIcon() {
   );
 }
 
-function StarIcon() {
-  return (
-    <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"
-    >
-      <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"
-      />
-    </svg>
-  );
-}
-
 function ImageCarousel({
   imageUrls,
   title,
   onFavorite,
   id,
+  closeButton,
   onClose,
 }: {
   imageUrls: string[];
   title?: string;
+  closeButton?: boolean;
   onFavorite?: (id: string) => void;
   id?: string;
   onClose?: () => void;
@@ -133,9 +119,9 @@ function ImageCarousel({
   };
 
   return (
-    <div class="mapka-tooltip-carousel">
+    <div class="mapka-popup-carousel">
       <div
-        class="mapka-tooltip-carousel-track"
+        class="mapka-popup-carousel-track"
         style={{ transform: `translateX(-${currentIndex * 100}%)` }}
       >
         {imageUrls.map((url, index) => (
@@ -143,37 +129,39 @@ function ImageCarousel({
             key={index}
             src={url}
             alt={title || `Image ${index + 1}`}
-            class="mapka-tooltip-carousel-image"
+            class="mapka-popup-carousel-image"
           />
         ))}
       </div>
 
-      <div class="mapka-tooltip-carousel-actions">
+      <div class="mapka-popup-carousel-actions">
         {onFavorite && (
           <button
             type="button"
-            class="mapka-tooltip-action-btn"
+            class="mapka-popup-action-btn"
             onClick={handleFavoriteClick}
             aria-label="Add to favorites"
           >
             <HeartIcon />
           </button>
         )}
-        <button
-          type="button"
-          class="mapka-tooltip-action-btn"
-          onClick={handleCloseClick}
-          aria-label="Close"
-        >
-          <CloseIcon />
-        </button>
+        {closeButton && (
+          <button
+            type="button"
+            class="mapka-popup-action-btn"
+            onClick={handleCloseClick}
+            aria-label="Close"
+          >
+            <CloseIcon />
+          </button>
+        )}
       </div>
 
       {imageUrls.length > 1 && (
         <Fragment>
           <button
             type="button"
-            class="mapka-tooltip-carousel-btn mapka-tooltip-carousel-prev"
+            class="mapka-popup-carousel-btn mapka-popup-carousel-prev"
             onClick={handlePrev}
             aria-label="Previous image"
           >
@@ -181,19 +169,19 @@ function ImageCarousel({
           </button>
           <button
             type="button"
-            class="mapka-tooltip-carousel-btn mapka-tooltip-carousel-next"
+            class="mapka-popup-carousel-btn mapka-popup-carousel-next"
             onClick={handleNext}
             aria-label="Next image"
           >
             <ChevronRightIcon />
           </button>
 
-          <div class="mapka-tooltip-dots">
+          <div class="mapka-popup-dots">
             {imageUrls.map((_, index) => (
               <button
                 key={index}
                 type="button"
-                class={`mapka-tooltip-dot ${index === currentIndex ? "mapka-tooltip-dot-active" : ""}`}
+                class={`mapka-popup-dot ${index === currentIndex ? "mapka-popup-dot-active" : ""}`}
                 onClick={(e) => {
                   e.stopPropagation();
                   setCurrentIndex(index);
@@ -208,17 +196,14 @@ function ImageCarousel({
   );
 }
 
-export function Tooltip({
-  id,
+export function PopupContent({
   title,
-  rating,
   description,
-  subtitle,
-  price,
+  closeButton,
   imageUrls,
   onFavorite,
   onClose,
-}: TooltipProps) {
+}: PopupProps) {
   const hasImages = imageUrls && imageUrls.length > 0;
 
   return (
@@ -227,38 +212,15 @@ export function Tooltip({
         <ImageCarousel
           imageUrls={imageUrls}
           title={title}
+          closeButton={closeButton}
           onFavorite={onFavorite}
-          id={id}
           onClose={onClose}
         />
       )}
 
-      <div class="mapka-tooltip-content">
-        {(title || rating) && (
-          <div class="mapka-tooltip-header">
-            {title && <h3 class="mapka-tooltip-title">{title}</h3>}
-            {rating && (
-              <div class="mapka-tooltip-rating">
-                <StarIcon />
-                <span class="mapka-tooltip-rating-value">
-                  {rating.value.toFixed(2).replace(".", ",")}
-                </span>
-                <span class="mapka-tooltip-rating-count">({rating.count})</span>
-              </div>
-            )}
-          </div>
-        )}
-
-        {description && <p class="mapka-tooltip-description">{description}</p>}
-        {subtitle && <p class="mapka-tooltip-subtitle">{subtitle}</p>}
-
-        {price && (
-          <div class="mapka-tooltip-price">
-            {price.original && <span class="mapka-tooltip-price-original">{price.original}</span>}
-            <span class="mapka-tooltip-price-current">{price.current}</span>
-            {price.suffix && <span class="mapka-tooltip-price-suffix">{price.suffix}</span>}
-          </div>
-        )}
+      <div class="mapka-popup-content">
+        {title && <h3 class="mapka-popup-title">{title}</h3>}
+        {description && <p class="mapka-popup-description">{description}</p>}
       </div>
     </div>
   );

package/src/map.ts

@@ -1,21 +1,40 @@
 import * as maplibregl from "maplibre-gl";
 import { loadLayersIcons } from "./modules/icons.js";
-import { addMarkers, addMarkersStyleDiff } from "./modules/markers.js";
+import {
+  closeOnMapClickPopups,
+  closePopupsById,
+  getPopupId,
+  openPopup,
+  updatePopup,
+} from "./modules/popup.js";
+import {
+  addMarkers,
+  addStyleDiffMarkers,
+  addStyleMarkers,
+  clearMarkers,
+  updateMarkers,
+} from "./modules/markers.js";
 import type {
+  Marker,
+  Popup,
   RequestTransformFunction,
   MapStyleImageMissingEvent,
   MapOptions,
+  TransformStyleFunction,
   StyleSwapOptions,
   StyleOptions,
   StyleSpecification,
 } from "maplibre-gl";
+import type { MapkaMarkerOptions, MapkaPopupOptions } from "./types/marker.js";
 
 export interface MapkaMapOptions extends MapOptions {
+  maxPopups?: number;
+
   apiKey: string;
   env?: "dev" | "prod" | "local";
 }
 
-const noopTransformRequest: maplibregl.RequestTransformFunction = (url) => {
+const noopTransformRequest: RequestTransformFunction = (url) => {
   return {
     url,
   };
@@ -35,26 +54,49 @@ const createTransformRequest =
     return transformRequest ? transformRequest(url) : noopTransformRequest(url);
   };
 
-const noopTransformStyle: maplibregl.TransformStyleFunction = (_, next) => {
+const noopTransformStyle: TransformStyleFunction = (_, next) => {
   return next;
 };
 
+export type MapMapkaPopup = {
+  id: string;
+  container: HTMLElement;
+  options: MapkaPopupOptions;
+  popup: Popup;
+};
+
+export type MapMapkaMarker = {
+  id: string;
+  options: MapkaMarkerOptions;
+  marker: Marker;
+};
+
 export class MapkaMap extends maplibregl.Map {
   static env: string = "prod";
 
-  public constructor({ transformRequest, apiKey, ...options }: MapkaMapOptions) {
+  public markers: MapMapkaMarker[] = [];
+
+  public maxPopups: number = 1;
+  public popups: MapMapkaPopup[] = [];
+
+  public constructor({ transformRequest, apiKey, maxPopups = 1, ...options }: MapkaMapOptions) {
     super({
       ...options,
       transformRequest: createTransformRequest(apiKey, transformRequest),
     });
 
-    super.on("styledata", (_: maplibregl.MapStyleDataEvent) => {
-      addMarkers(this);
-    });
+    this.maxPopups = maxPopups;
 
     super.on("styleimagemissing", (event: MapStyleImageMissingEvent) => {
       loadLayersIcons(this, event);
     });
+    super.on("click", () => {
+      closeOnMapClickPopups(this);
+    });
+
+    super.on("style.load", () => {
+      addStyleMarkers(this);
+    });
   }
 
   public setStyle(
@@ -66,11 +108,35 @@ export class MapkaMap extends maplibregl.Map {
     super.setStyle(style, {
       ...rest,
       transformStyle: (prev, next) => {
-        addMarkersStyleDiff(this, next);
+        addStyleDiffMarkers(this, next);
         return transformStyle(prev, next);
       },
     });
 
     return this;
   }
+
+  public addMarkers(markers: MapkaMarkerOptions[]) {
+    addMarkers(this, markers);
+  }
+
+  public updateMarkers(markers: MapkaMarkerOptions[]) {
+    updateMarkers(this, markers);
+  }
+
+  public clearMarkers() {
+    clearMarkers(this);
+  }
+
+  public openPopup(popup: MapkaPopupOptions, id: string = getPopupId(popup)) {
+    return openPopup(this, popup, id);
+  }
+
+  public closePopup(id: string) {
+    closePopupsById(this, id);
+  }
+
+  public updatePopup(popup: MapkaPopupOptions, id: string = getPopupId(popup)) {
+    return updatePopup(this, popup, id);
+  }
 }