@mapka/maplibre-gl-sdk 0.8.0 → 0.10.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/PopupContent.tsx

@@ -0,0 +1,227 @@
+/** biome-ignore-all lint/correctness/noUnusedImports: <explanation> */
+import { h, Fragment } from "preact";
+import { useState } from "preact/hooks";
+import type { MapkaPopupContent } from "../types/marker.js";
+
+interface PopupProps extends MapkaPopupContent {
+  onClose?: () => void;
+  closeButton?: boolean;
+}
+
+function HeartIcon({ filled }: { filled?: boolean }) {
+  return (
+    <svg
+      viewBox="0 0 32 32"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      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"
+        fill={filled ? "currentColor" : "none"}
+        stroke="currentColor"
+        stroke-width="2"
+      />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg
+      viewBox="0 0 32 32"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      class="mapka-popup-icon"
+    >
+      <path d="m6 6 20 20M26 6 6 26" fill="none" stroke="currentColor" stroke-width="3" />
+    </svg>
+  );
+}
+
+function ChevronLeftIcon() {
+  return (
+    <svg
+      viewBox="0 0 32 32"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      class="mapka-popup-icon mapka-popup-icon-sm"
+    >
+      <path
+        d="M20 28 8.7 16.7a1 1 0 0 1 0-1.4L20 4"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+    </svg>
+  );
+}
+
+function ChevronRightIcon() {
+  return (
+    <svg
+      viewBox="0 0 32 32"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      class="mapka-popup-icon mapka-popup-icon-sm"
+    >
+      <path
+        d="m12 4 11.3 11.3a1 1 0 0 1 0 1.4L12 28"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+    </svg>
+  );
+}
+
+function ImageCarousel({
+  imageUrls,
+  title,
+  onFavorite,
+  id,
+  closeButton,
+  onClose,
+}: {
+  imageUrls: string[];
+  title?: string;
+  closeButton?: boolean;
+  onFavorite?: (id: string) => void;
+  id?: string;
+  onClose?: () => void;
+}) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const handlePrev = (e: Event) => {
+    e.stopPropagation();
+    setCurrentIndex((prev) => (prev === 0 ? imageUrls.length - 1 : prev - 1));
+  };
+
+  const handleNext = (e: Event) => {
+    e.stopPropagation();
+    setCurrentIndex((prev) => (prev + 1) % imageUrls.length);
+  };
+
+  const handleFavoriteClick = (e: Event) => {
+    e.stopPropagation();
+    if (onFavorite && id) {
+      onFavorite(id);
+    }
+  };
+
+  const handleCloseClick = (e: Event) => {
+    e.stopPropagation();
+    onClose?.();
+  };
+
+  return (
+    <div class="mapka-popup-carousel">
+      <div
+        class="mapka-popup-carousel-track"
+        style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+      >
+        {imageUrls.map((url, index) => (
+          <img
+            key={index}
+            src={url}
+            alt={title || `Image ${index + 1}`}
+            class="mapka-popup-carousel-image"
+          />
+        ))}
+      </div>
+
+      <div class="mapka-popup-carousel-actions">
+        {onFavorite && (
+          <button
+            type="button"
+            class="mapka-popup-action-btn"
+            onClick={handleFavoriteClick}
+            aria-label="Add to favorites"
+          >
+            <HeartIcon />
+          </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-popup-carousel-btn mapka-popup-carousel-prev"
+            onClick={handlePrev}
+            aria-label="Previous image"
+          >
+            <ChevronLeftIcon />
+          </button>
+          <button
+            type="button"
+            class="mapka-popup-carousel-btn mapka-popup-carousel-next"
+            onClick={handleNext}
+            aria-label="Next image"
+          >
+            <ChevronRightIcon />
+          </button>
+
+          <div class="mapka-popup-dots">
+            {imageUrls.map((_, index) => (
+              <button
+                key={index}
+                type="button"
+                class={`mapka-popup-dot ${index === currentIndex ? "mapka-popup-dot-active" : ""}`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setCurrentIndex(index);
+                }}
+                aria-label={`Go to image ${index + 1}`}
+              />
+            ))}
+          </div>
+        </Fragment>
+      )}
+    </div>
+  );
+}
+
+export function PopupContent({
+  title,
+  description,
+  closeButton,
+  imageUrls,
+  onFavorite,
+  onClose,
+}: PopupProps) {
+  const hasImages = imageUrls && imageUrls.length > 0;
+
+  return (
+    <div class="mapka-tooltip">
+      {hasImages && (
+        <ImageCarousel
+          imageUrls={imageUrls}
+          title={title}
+          closeButton={closeButton}
+          onFavorite={onFavorite}
+          onClose={onClose}
+        />
+      )}
+
+      <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);
+  }
 }