@mapka/maplibre-gl-sdk 0.16.1 → 0.16.3

package/src/components/PopupListItem.css

@@ -0,0 +1,61 @@
+.mapka-popup-list-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  background: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.mapka-popup-list-item + .mapka-popup-list-item {
+  border-top: 1px solid #dcdfe3;
+  padding-top: 8px;
+}
+
+.mapka-popup-list-item-header {
+  display: flex;
+  flex-direction: row;
+  height: 90px;
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.mapka-popup-list-item-image {
+  width: 90px;
+  height: 90px;
+  border-radius: 8px;
+  object-fit: cover;
+  flex-shrink: 0;
+  background: #ccd1d6;
+}
+
+.mapka-popup-list-item-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  padding: 4px 4px 4px 8px;
+  min-width: 0;
+}
+
+.mapka-popup-list-item-title {
+  margin: 0;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 20px;
+  color: #4f4f4f;
+}
+
+.mapka-popup-list-item-description {
+  margin: 0;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: #4f4f4f;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+}

package/src/components/PopupListItem.tsx

@@ -0,0 +1,40 @@
+import { PopupDataRows } from "./PopupDataRows.js";
+import type { MapkaPopupContent } from "../types/popup.js";
+
+interface PopupHeaderProps {
+  title?: string;
+  description?: string;
+  imageUrls: string[];
+}
+
+export function PopupHeader({ title, description, imageUrls: [firstImage] }: PopupHeaderProps) {
+  return (
+    <div class="mapka-popup-list-item-header">
+      {firstImage && <img src={firstImage} alt={title} class="mapka-popup-list-item-image" />}
+
+      <div class="mapka-popup-list-item-info">
+        {title && <span class="mapka-popup-list-item-title">{title}</span>}
+        {description && <span class="mapka-popup-list-item-description">{description}</span>}
+      </div>
+    </div>
+  );
+}
+
+interface PopupCollectionItemProps {
+  popup: MapkaPopupContent;
+}
+
+export function PopupListItem({
+  popup: { title, description, rows = [], imageUrls = [] },
+}: PopupCollectionItemProps) {
+  const hasImages = Boolean(imageUrls.length);
+  const hasHeader = Boolean(title || description || hasImages);
+  const hasDataRows = Boolean(rows.length);
+
+  return (
+    <div class="mapka-popup-list-item">
+      {hasHeader && <PopupHeader title={title} description={description} imageUrls={imageUrls} />}
+      {hasDataRows && <PopupDataRows rows={rows} />}
+    </div>
+  );
+}

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/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.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,25 @@ 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 +142,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);
       }
     });