@mapka/maplibre-gl-sdk 0.16.1 → 0.16.4

package/src/components/PopupList.tsx

@@ -0,0 +1,102 @@
+import { useState } from "preact/hooks";
+import type { MapkaPopupOptionsResolved } from "../types/popup.js";
+import { PopupContent } from "./PopupContent.js";
+import { ChevronUpIcon } from "./icons/ChevronUpIcon.js";
+import { ChevronDownIcon } from "./icons/ChevronDownIcon.js";
+import { noop } from "es-toolkit";
+
+interface PopupCollectionProps {
+  items: MapkaPopupOptionsResolved[];
+}
+
+export function PopupCustomElement({ popup }: { popup: HTMLElement }) {
+  return popup;
+}
+
+interface PopupListNavProps {
+  index: number;
+  total: number;
+  onPrev: (e: Event) => void;
+  onNext: (e: Event) => void;
+}
+
+function PopupListNav({ index, total, onPrev, onNext }: PopupListNavProps) {
+  const isFirst = index === 0;
+  const isLast = index === total - 1;
+
+  return (
+    <div class="mapka-popup-list-nav">
+      <button
+        type="button"
+        class="mapka-popup-list-nav-btn"
+        onClick={onPrev}
+        disabled={isFirst}
+        aria-label="Previous popup"
+      >
+        <ChevronUpIcon />
+      </button>
+      <div class="mapka-popup-list-nav-counter">
+        <span>{index + 1}</span>
+        <span class="mapka-popup-list-nav-counter-divider" />
+        <span>{total}</span>
+      </div>
+      <button
+        type="button"
+        class="mapka-popup-list-nav-btn"
+        onClick={onNext}
+        disabled={isLast}
+        aria-label="Next popup"
+      >
+        <ChevronDownIcon />
+      </button>
+    </div>
+  );
+}
+
+export function PopupList({ items }: PopupCollectionProps) {
+  const [index, setIndex] = useState(0);
+  const safeIndex = Math.min(index, items.length - 1);
+
+  const handlePrev = (e: Event) => {
+    e.stopPropagation();
+    if (safeIndex > 0) {
+      setIndex(safeIndex - 1);
+    }
+  };
+
+  const handleNext = (e: Event) => {
+    e.stopPropagation();
+    if (safeIndex < items.length - 1) {
+      setIndex(safeIndex + 1);
+    }
+  };
+  const { id, content } = items[safeIndex];
+  return (
+    <div class="mapka-popup-list-wrapper">
+      <div class="mapka-popup-list">
+        {content instanceof HTMLElement ? (
+          <PopupCustomElement key={id} popup={content} />
+        ) : (
+          <PopupContent
+            key={id}
+            title={content.title}
+            description={content.description}
+            rows={content.rows}
+            imageUrls={content.imageUrls}
+            primaryAction={content.primaryAction}
+            closeButton={false}
+            onClose={noop}
+          />
+        )}
+      </div>
+      {items.length > 1 && (
+        <PopupListNav
+          index={safeIndex}
+          total={items.length}
+          onPrev={handlePrev}
+          onNext={handleNext}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/icons/ChevronDownIcon.tsx

@@ -0,0 +1,20 @@
+export function ChevronDownIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      class="mapka-popup-icon mapka-popup-icon-sm"
+    >
+      <path
+        d="M3 6 7.3 10.3a1 1 0 0 0 1.4 0L13 6"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icons/ChevronLeftIcon.tsx

@@ -0,0 +1,20 @@
+export function ChevronLeftIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      class="mapka-popup-icon mapka-popup-icon-sm"
+    >
+      <path
+        d="M10 3 5.7 7.3a1 1 0 0 0 0 1.4L10 13"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icons/ChevronRightIcon.tsx

@@ -0,0 +1,20 @@
+export function ChevronRightIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      class="mapka-popup-icon mapka-popup-icon-sm"
+    >
+      <path
+        d="m6 3 4.3 4.3a1 1 0 0 1 0 1.4L6 13"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icons/ChevronUpIcon.tsx

@@ -0,0 +1,20 @@
+export function ChevronUpIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      class="mapka-popup-icon mapka-popup-icon-sm"
+    >
+      <path
+        d="M3 10 7.3 5.7a1 1 0 0 1 1.4 0L13 10"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icons/CloseIcon.tsx

@@ -0,0 +1,13 @@
+export 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="m8 8 16 16M24 8 8 24" fill="none" stroke="currentColor" stroke-width="2" />
+    </svg>
+  );
+}

package/src/components/icons/HeartIcon.tsx

@@ -0,0 +1,18 @@
+export 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>
+  );
+}

package/src/components/{ProgressDownIcon.tsx → icons/ProgressDownIcon.tsx}

@@ -1,6 +1,3 @@
-/** biome-ignore-all lint/correctness/noUnusedImports: <explanation> */
-import { h } from "preact";
-
 export const ProgressDownIcon = () => {
   return (
     <svg

package/src/controls/MapkaDrawControl.css

@@ -1,5 +1,3 @@
-
-
 /* Draw Control Styles */
 .mapka-draw-control {
   display: flex;
@@ -50,4 +48,4 @@
 .mapka-draw-control-button--clear:hover {
   background-color: #fee2e2;
   color: #dc2626;
-}
+}

package/src/controls/MapkaDrawControl.tsx

@@ -10,13 +10,13 @@ import {
   TerraDrawFreehandMode,
 } from "terra-draw";
 import { TerraDrawMapLibreGLAdapter } from "terra-draw-maplibre-gl-adapter";
-import { SelectIcon } from "../components/SelectIcon.js";
-import { PolygonIcon } from "../components/PolygonIcon.js";
-import { RectangleIcon } from "../components/RectangleIcon.js";
-import { CircleIcon } from "../components/CircleIcon.js";
-import { LineIcon } from "../components/LineIcon.js";
-import { TrashIcon } from "../components/TrashIcon.js";
-import { FreehandIcon } from "../components/FreehandIcon.js";
+import { SelectIcon } from "../components/icons/SelectIcon.js";
+import { PolygonIcon } from "../components/icons/PolygonIcon.js";
+import { RectangleIcon } from "../components/icons/RectangleIcon.js";
+import { CircleIcon } from "../components/icons/CircleIcon.js";
+import { LineIcon } from "../components/icons/LineIcon.js";
+import { TrashIcon } from "../components/icons/TrashIcon.js";
+import { FreehandIcon } from "../components/icons/FreehandIcon.js";
 import { isEmpty } from "es-toolkit/compat";
 import type { IControl } from "maplibre-gl";
 import type { GeoJSONStoreFeatures } from "terra-draw";

package/src/controls/MapkaExportControl.tsx

@@ -1,6 +1,6 @@
 import { render } from "preact";
-import { DownloadIcon } from "../components/DownloadIcon.js";
-import { ProgressDownIcon } from "../components/ProgressDownIcon.js";
+import { DownloadIcon } from "../components/icons/DownloadIcon.js";
+import { ProgressDownIcon } from "../components/icons/ProgressDownIcon.js";
 import type { IControl } from "maplibre-gl";
 import type { MapkaMap } from "../map.js";
 import type { MapkaExportOptions } from "../types/export.js";

package/src/map.ts

@@ -1,13 +1,7 @@
 import * as maplibregl from "maplibre-gl";
 import { loadLayersIcons } from "./modules/icons.js";
 import { exportMap } from "./modules/export.js";
-import {
-  closeOnMapClickPopups,
-  closePopupsById,
-  openPopup,
-  removePopups,
-  updatePopup,
-} from "./modules/popup.js";
+import { closePopupsByIds, reconciliatePopups, closePopups } from "./modules/popup.js";
 import {
   addMarkers,
   addStyleDiffMarkers,
@@ -28,9 +22,9 @@ import type {
 } from "maplibre-gl";
 import type { MapkaMarkerOptions } from "./types/marker.js";
 import type { MapkaExportOptions } from "./types/export.js";
-import type { MapkaPopupOptions } from "./types/popup.js";
+import type { MapkaPopupOptions, MapkaPopupOptionsResolved } from "./types/popup.js";
 import type { MapkaAddLayerObject } from "./types/layer.js";
-import { openOnFeatureClickPopups } from "./modules/layerPopup.js";
+import { openClickPopups } from "./modules/layerPopup.js";
 
 export interface MapkaMapOptions extends MapOptions {
   maxPopups?: number;
@@ -65,8 +59,8 @@ const noopTransformStyle: TransformStyleFunction = (_, next) => {
 };
 
 export type MapMapkaPopup = {
-  id: string | string[];
-  options: MapkaPopupOptions;
+  ids: string[];
+  options: MapkaPopupOptionsResolved[];
   container: HTMLElement;
   popup: Popup;
 };
@@ -93,21 +87,31 @@ export class MapkaMap extends maplibregl.Map {
   public scrollPopups: boolean = true;
   public popups: MapMapkaPopup[] = [];
 
-  public constructor({ transformRequest, apiKey, maxPopups = 1, ...options }: MapkaMapOptions) {
+  public constructor({
+    transformRequest,
+    apiKey,
+    maxPopups = 1,
+    scrollPopups = true,
+    ...options
+  }: MapkaMapOptions) {
     super({
       ...options,
       transformRequest: createTransformRequest(apiKey, transformRequest),
     });
 
     this.maxPopups = maxPopups;
+    this.scrollPopups = scrollPopups;
 
     super.on("styleimagemissing", (event: MapStyleImageMissingEvent) => {
       loadLayersIcons(this, event);
     });
 
     super.on("click", (event: maplibregl.MapMouseEvent) => {
-      closeOnMapClickPopups(this);
-      openOnFeatureClickPopups(this, event);
+      openClickPopups(this, event);
+    });
+
+    super.on("zoomend", () => {
+      reconciliatePopups(this);
     });
 
     super.on("style.load", () => {
@@ -144,20 +148,24 @@ export class MapkaMap extends maplibregl.Map {
     removeMarkers(this);
   }
 
-  public openPopup(popup: MapkaPopupOptions) {
-    return openPopup(this, popup);
+  public openPopup(popup: MapkaPopupOptions | MapkaPopupOptions[]) {
+    return reconciliatePopups(this, Array.isArray(popup) ? popup : [popup]);
   }
 
-  public closePopup(id: string) {
-    closePopupsById(this, id);
+  public closePopup(id: string | string[]) {
+    closePopupsByIds(this, Array.isArray(id) ? id : [id]);
   }
 
   public updatePopup(popup: MapkaPopupOptions) {
-    return updatePopup(this, popup);
+    return reconciliatePopups(this, Array.isArray(popup) ? popup : [popup]);
+  }
+
+  public getPopups() {
+    return this.popups;
   }
 
   public removePopups() {
-    removePopups(this);
+    closePopups(this);
   }
 
   public async export(options?: MapkaExportOptions) {

package/src/modules/layerPopup.ts

@@ -1,33 +1,16 @@
 import { get } from "es-toolkit/compat";
 import { isBoolean, isPlainObject } from "es-toolkit";
-import type { MapMouseEvent, MapGeoJSONFeature, LngLat } from "maplibre-gl";
+import { closeOnMapClickPopups, getPopupId } from "./popup.js";
+import type { MapMouseEvent, MapGeoJSONFeature, LngLat, Point } from "maplibre-gl";
 import type { MapkaMap } from "../map.js";
 import type { MapkaLayerPopupOptions } from "../types/popup.js";
 import type { MapkaPopupOptions } from "../types/popup.js";
 
-export function openOnFeatureClickPopups(map: MapkaMap, { lngLat, point }: MapMouseEvent) {
-  const features = map.queryRenderedFeatures(point);
-
-  if (features.length === 0) {
-    return;
-  }
-
-  const popups = getFeaturePopups(features, lngLat);
-
-  if (popups.length === 0) {
-    return;
-  }
-
-  for (const popup of popups) {
-    map.openPopup(popup);
-  }
-}
-
 function genericPropertiesToPopup(feature: MapGeoJSONFeature, lngLat: LngLat): MapkaPopupOptions {
   const { id, properties, layer } = feature;
 
   return {
-    id: id ?? properties.id,
+    id: id ?? properties.id ?? getPopupId(layer),
     lngLat: lngLat.toArray(),
     content: {
       title: layer.id,
@@ -46,7 +29,13 @@ function buildConfigDrivenPopup(
   throw new Error("Not implemented", { cause: { config, feature, lngLat } });
 }
 
-function getFeaturePopups(features: MapGeoJSONFeature[], lngLat: LngLat): MapkaPopupOptions[] {
+function getFeaturePopups(
+  map: MapkaMap,
+  point: Point,
+  lngLat: LngLat,
+  trigger: "click" | "hover",
+): MapkaPopupOptions[] {
+  const features = map.queryRenderedFeatures(point);
   const popups: MapkaPopupOptions[] = [];
 
   for (const feature of features) {
@@ -66,9 +55,31 @@ function getFeaturePopups(features: MapGeoJSONFeature[], lngLat: LngLat): MapkaP
     }
 
     if (isPlainObject(mapkaPopup)) {
+      if (mapkaPopup.trigger && mapkaPopup.trigger !== trigger) {
+        continue;
+      }
       popups.push(buildConfigDrivenPopup(feature, mapkaPopup, lngLat));
     }
   }
 
   return popups;
 }
+
+export function openClickPopups(map: MapkaMap, { lngLat, point }: MapMouseEvent) {
+  closeOnMapClickPopups(map);
+
+  const featurePopups = getFeaturePopups(map, point, lngLat, "click");
+  if (featurePopups.length === 0) {
+    return;
+  }
+  map.openPopup(featurePopups);
+}
+
+export function openOnHoverPopups(map: MapkaMap, { lngLat, point }: MapMouseEvent) {
+  const featurePopups = getFeaturePopups(map, point, lngLat, "hover");
+
+  if (featurePopups.length === 0) {
+    return;
+  }
+  map.openPopup(featurePopups);
+}

package/src/modules/markers.ts

@@ -1,6 +1,5 @@
 import { Marker } from "maplibre-gl";
 import { get } from "es-toolkit/compat";
-import { getPopupId } from "./popup.js";
 import { remove } from "es-toolkit";
 import type { Offset, StyleSpecification } from "maplibre-gl";
 import type { MapkaMap } from "../map.js";
@@ -26,17 +25,27 @@ export function getMarkerId(marker: { id?: string }) {
   return marker.id ?? `marker-${crypto.randomUUID()}`;
 }
 
-const markerPopupOptions = (marker: Marker, popupOptions: Omit<MapkaPopupOptions, "lngLat">) => {
+export function getMarkerPopupId(marker: { id?: string }, popup: { id?: string }) {
+  return popup.id ?? marker.id ?? `marker-popup-${crypto.randomUUID()}`;
+}
+
+const markerPopupOptions = (
+  id: string,
+  marker: Marker,
+  popupOptions: Omit<MapkaPopupOptions, "lngLat">,
+) => {
   const latLng = marker.getLngLat().toArray();
 
   if ("offset" in popupOptions) {
     return {
       ...popupOptions,
+      id,
       lngLat: latLng,
     };
   } else {
     return {
       ...popupOptions,
+      id,
       lngLat: latLng,
       offset: DEFAULT_MARKET_OFFSET,
     };
@@ -49,51 +58,52 @@ function setupMarkerPopupListeners(
   popup: MapkaMarkerPopupOptions,
   options: MapkaMarkerOptions,
 ) {
-  const popupId = getPopupId(popup);
   const markerElement = marker.getElement();
+  const popupId = getMarkerPopupId(options, popup);
+  const popupOptions = markerPopupOptions(popupId, marker, popup);
 
   if (options.draggable) {
     marker.on("dragend", () => {
-      if (map.popups.find((p) => p.id === popupId)) {
-        map.updatePopup(markerPopupOptions(marker, popup));
+      if (map.popups.find((p) => p.ids.includes(popupId))) {
+        map.updatePopup(popupOptions);
       }
     });
     marker.on("drag", () => {
-      if (map.popups.find((p) => p.id === popupId)) {
-        map.updatePopup(markerPopupOptions(marker, popup));
+      if (map.popups.find((p) => p.ids.includes(popupId))) {
+        map.updatePopup(popupOptions);
       }
     });
   }
 
   if (popup.trigger === "always") {
-    if (!map.popups.find((p) => p.id === popupId)) {
-      map.openPopup(markerPopupOptions(marker, popup));
+    if (!map.popups.find((p) => p.ids.includes(popupId))) {
+      map.openPopup(popupOptions);
     }
 
     markerElement.addEventListener("click", (e) => {
       e.stopPropagation();
-      if (!map.popups.find((p) => p.id === popupId)) {
-        map.openPopup(markerPopupOptions(marker, popup));
+      if (!map.popups.find((p) => p.ids.includes(popupId))) {
+        map.openPopup(popupOptions);
       }
     });
   } else if (popup.trigger === "click") {
     markerElement.style.cursor = "pointer";
     markerElement.addEventListener("click", (e) => {
       e.stopPropagation();
-      if (!map.popups.find((p) => p.id === popupId)) {
-        map.openPopup(markerPopupOptions(marker, popup));
+      if (!map.popups.find((p) => p.ids.includes(popupId))) {
+        map.openPopup(popupOptions);
       }
     });
   } else if (popup.trigger === "hover") {
     markerElement.addEventListener("mouseenter", (e) => {
       e.stopPropagation();
-      if (!map.popups.find((p) => p.id === popupId)) {
-        map.openPopup(markerPopupOptions(marker, popup));
+      if (!map.popups.find((p) => p.ids.includes(popupId))) {
+        map.openPopup(popupOptions);
       }
     });
     markerElement.addEventListener("mouseleave", (e) => {
       e.stopPropagation();
-      if (map.popups.find((p) => p.id === popupId)) {
+      if (map.popups.find((p) => p.ids.includes(popupId))) {
         map.closePopup(popupId);
       }
     });