@mapka/maplibre-gl-sdk 0.9.0 → 0.10.0

package/src/modules/markers.ts

@@ -1,59 +1,152 @@
-import * as maplibregl from "maplibre-gl";
+import { Marker } from "maplibre-gl";
 import { get } from "es-toolkit/compat";
-import type { StyleSpecification } from "maplibre-gl";
-import type { MapkaMap } from "../map.js";
-import type { MapkaMarkerOptions } from "../types/marker.js";
-import { showTooltip, hideTooltip } from "./tooltip.js";
+import { getPopupId } from "./popup.js";
+import type { Offset, StyleSpecification } from "maplibre-gl";
+import type { MapkaMap, MapMapkaMarker } from "../map.js";
+import type { MapkaMarkerOptions, MapkaPopupOptions } from "../types/marker.js";
+import { remove } from "es-toolkit";
 
-const prevMarkers = new Set<maplibregl.Marker>();
+/**
+ * Default marker offset
+ * @see https://github.com/maplibre/maplibre-gl-js/blob/master/src/ui/marker.ts#L457
+ */
+const DEFAULT_MARKET_OFFSET = {
+  top: [0, 0],
+  "top-left": [0, 0],
+  "top-right": [0, 0],
+  bottom: [0, -38.1],
+  "bottom-left": [9.54594154601839, -34.14594154601839],
+  "bottom-right": [-9.54594154601839, -34.14594154601839],
+  left: [13.5, -24.6],
+  right: [-13.5, -24.6],
+} as Offset;
 
-function addMarkersToMap(map: MapkaMap, markers: MapkaMarkerOptions[]) {
-  for (const marker of prevMarkers) {
-    marker.remove();
+export function getMarkerId(marker: { id?: string }) {
+  return marker.id ?? `marker-${crypto.randomUUID()}`;
+}
+
+const markerPopupOptions = (marker: Marker, popupOptions: Omit<MapkaPopupOptions, "lngLat">) => {
+  const latLng = marker.getLngLat().toArray();
+
+  if ("offset" in popupOptions) {
+    return {
+      ...popupOptions,
+      lngLat: latLng,
+    };
+  } else {
+    return {
+      ...popupOptions,
+      lngLat: latLng,
+      offset: DEFAULT_MARKET_OFFSET,
+    };
+  }
+};
+
+function setupMarkerPopupListeners(
+  map: MapkaMap,
+  marker: Marker,
+  popup: Omit<MapkaPopupOptions, "lngLat">,
+  options: MapkaMarkerOptions,
+) {
+  const popupId = getPopupId(popup);
+  const markerElement = marker.getElement();
+
+  if (options.draggable) {
+    marker.on("dragend", () => {
+      if (map.popups.find((p) => p.id === popupId)) {
+        map.updatePopup(markerPopupOptions(marker, popup), popupId);
+      }
+    });
+    marker.on("drag", () => {
+      if (map.popups.find((p) => p.id === popupId)) {
+        map.updatePopup(markerPopupOptions(marker, popup), popupId);
+      }
+    });
   }
-  prevMarkers.clear();
-
-  for (const markerConfig of markers) {
-    const { position, color, tooltip } = markerConfig;
-    const newMarker = new maplibregl.Marker({
-      color,
-    })
-      .setLngLat(position)
-      .addTo(map);
-
-    if (tooltip?.trigger === "click") {
-      const markerElement = newMarker.getElement();
-
-      markerElement.style.cursor = "pointer";
-
-      markerElement.addEventListener("click", (e) => {
-        e.stopPropagation();
-        showTooltip(newMarker, tooltip, map);
-      });
-    } else if (tooltip?.trigger === "hover") {
-      const markerElement = newMarker.getElement();
-
-      markerElement.addEventListener("mouseenter", (e) => {
-        e.stopPropagation();
-        showTooltip(newMarker, tooltip, map);
-      });
-      markerElement.addEventListener("mouseleave", (e) => {
-        e.stopPropagation();
-        hideTooltip();
-      });
+
+  if (popup.trigger === "always") {
+    if (!map.popups.find((p) => p.id === popupId)) {
+      map.openPopup(markerPopupOptions(marker, popup), popupId);
     }
 
-    prevMarkers.add(newMarker);
+    markerElement.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (!map.popups.find((p) => p.id === popupId)) {
+        map.openPopup(markerPopupOptions(marker, popup), popupId);
+      }
+    });
+  } 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), popupId);
+      }
+    });
+  } else if (popup.trigger === "hover") {
+    markerElement.addEventListener("mouseenter", (e) => {
+      e.stopPropagation();
+      if (!map.popups.find((p) => p.id === popupId)) {
+        map.openPopup(markerPopupOptions(marker, popup), popupId);
+      }
+    });
+    markerElement.addEventListener("mouseleave", (e) => {
+      e.stopPropagation();
+      if (map.popups.find((p) => p.id === popupId)) {
+        map.closePopup(popupId);
+      }
+    });
   }
 }
 
-export function addMarkers(map: MapkaMap) {
+export function addMarkers(currentMap: MapkaMap, markersOptions: MapkaMarkerOptions[]) {
+  const markers: MapMapkaMarker[] = [];
+
+  for (const markerOptions of markersOptions) {
+    const { lngLat, popup, ...options } = markerOptions;
+    const newMarker = new Marker(options).setLngLat(lngLat).addTo(currentMap);
+
+    markers.push({
+      id: getMarkerId(markerOptions),
+      options: markerOptions,
+      marker: newMarker,
+    });
+    if (!popup) continue;
+
+    setupMarkerPopupListeners(currentMap, newMarker, popup, markerOptions);
+  }
+  currentMap.markers.push(...markers);
+}
+
+export function removeMarkersByIds(map: MapkaMap, ids: string[]) {
+  const removedMarkers = remove(map.markers, (marker) => ids.includes(marker.id));
+  for (const marker of removedMarkers) {
+    marker.marker.remove();
+  }
+}
+
+export function updateMarkers(map: MapkaMap, markersOptions: MapkaMarkerOptions[]) {
+  const markersIds = markersOptions.map(getMarkerId);
+
+  removeMarkersByIds(map, markersIds);
+  addMarkers(map, markersOptions);
+}
+
+export function clearMarkers(map: MapkaMap) {
+  for (const marker of map.markers) {
+    marker.marker.remove();
+  }
+  map.markers = [];
+}
+
+export function addStyleMarkers(map: MapkaMap) {
   const style = map.getStyle();
+
   const markers = get(style, "metadata.mapka.markers", []) as MapkaMarkerOptions[];
-  addMarkersToMap(map, markers);
+  return addMarkers(map, markers);
 }
 
-export function addMarkersStyleDiff(map: MapkaMap, next: StyleSpecification) {
+export function addStyleDiffMarkers(map: MapkaMap, next: StyleSpecification) {
   const markers = get(next, "metadata.mapka.markers", []) as MapkaMarkerOptions[];
-  addMarkersToMap(map, markers);
+  return addMarkers(map, markers);
 }

package/src/modules/popup.tsx

@@ -0,0 +1,155 @@
+// biome-ignore lint/correctness/noUnusedImports: later fix
+import { h } from "preact";
+import { Popup } from "maplibre-gl";
+import { PopupContent } from "../components/PopupContent.js";
+import { render } from "preact";
+import { remove } from "es-toolkit/array";
+import type { MapkaPopupOptions } from "../types/marker.js";
+import type { MapkaMap } from "../map.js";
+import { isEqual } from "es-toolkit";
+
+export function getPopupId(popup: { id?: string }) {
+  return popup.id ?? `popup-${crypto.randomUUID()}`;
+}
+
+export function getOnClose(map: MapkaMap, id: string) {
+  return () => map.closePopup(id);
+}
+
+export function enforceMaxPopups(map: MapkaMap) {
+  if (map.popups.length > map.maxPopups) {
+    const popupToRemove = map.popups.shift();
+    popupToRemove?.popup.remove();
+    popupToRemove?.container.remove();
+  }
+}
+
+export function openPopup(map: MapkaMap, options: MapkaPopupOptions, id: string) {
+  const { lngLat, content, closeButton, ...popupOptions } = options;
+  if (content instanceof HTMLElement) {
+    const popup = new Popup({
+      ...popupOptions,
+      closeButton: false,
+      closeOnClick: false,
+    })
+      .setLngLat(lngLat)
+      .setDOMContent(content)
+      .addTo(map);
+
+    map.popups.push({
+      container: content,
+      id,
+      options,
+      popup,
+    });
+    enforceMaxPopups(map);
+    return id;
+  } else if (typeof content === "object") {
+    const onClose = getOnClose(map, id);
+    const container = document.createElement("div");
+    container.classList.add("mapka-popup-container");
+
+    render(<PopupContent {...content} closeButton={closeButton} onClose={onClose} />, container);
+
+    const popup = new Popup({
+      ...popupOptions,
+      closeButton: false,
+      closeOnClick: false,
+    })
+      .setLngLat(lngLat)
+      .setDOMContent(container)
+      .addTo(map);
+
+    map.popups.push({
+      container,
+      id,
+      options,
+      popup,
+    });
+    enforceMaxPopups(map);
+    return id;
+  } else if (typeof content === "function") {
+    const newContent = content(id);
+    return openPopup(
+      map,
+      {
+        ...options,
+        content: newContent,
+      },
+      id,
+    );
+  }
+
+  throw new Error("Invalid popup content");
+}
+
+const DEFAULT_POPUP_MAX_WIDTH = "240px";
+
+export function updatePopupBaseOptions(
+  popup: Popup,
+  options: MapkaPopupOptions,
+  newOptions: Omit<MapkaPopupOptions, "content">,
+) {
+  if (!isEqual(options.maxWidth, newOptions.maxWidth)) {
+    popup.setMaxWidth(newOptions.maxWidth ?? DEFAULT_POPUP_MAX_WIDTH);
+  }
+  if (!isEqual(options.offset, newOptions.offset)) {
+    popup.setOffset(newOptions.offset);
+  }
+  if (!isEqual(options.lngLat, newOptions.lngLat)) {
+    popup.setLngLat(newOptions.lngLat);
+  }
+  return popup;
+}
+
+export function updatePopup(
+  map: MapkaMap,
+  { content, ...newOptions }: MapkaPopupOptions,
+  id: string,
+) {
+  if (content instanceof HTMLElement) {
+    const mapkaPopups = map.popups.filter((popup) => popup.id === id);
+    for (const { popup, options } of mapkaPopups) {
+      updatePopupBaseOptions(popup, options, newOptions);
+      popup.setDOMContent(content);
+    }
+  } else if (typeof content === "object") {
+    const onClose = getOnClose(map, id);
+    const mapkaPopups = map.popups.filter((popup) => popup.id === id);
+
+    for (const { popup, container, options } of mapkaPopups) {
+      const { closeButton } = options;
+      render(<PopupContent {...content} closeButton={closeButton} onClose={onClose} />, container);
+      updatePopupBaseOptions(popup, options, newOptions);
+      popup.setDOMContent(container);
+    }
+  } else if (typeof content === "function") {
+    const newContent = content(id);
+    return updatePopup(
+      map,
+      {
+        ...newOptions,
+        content: newContent,
+      },
+      id,
+    );
+  }
+}
+
+export function closeOnMapClickPopups(map: MapkaMap) {
+  const popupsToCloseOnMapClick = remove(map.popups, (popup) =>
+    Boolean(popup.options.closeOnClick),
+  );
+  for (const popup of popupsToCloseOnMapClick) {
+    popup.popup.remove();
+    popup.container.remove();
+  }
+}
+
+export function closePopupsById(map: MapkaMap, id: string) {
+  const removedPopups = remove(map.popups, (popup) => popup.id === id);
+  for (const popup of removedPopups) {
+    popup.popup.remove();
+    popup.container.remove();
+  }
+}

package/src/styles.css

@@ -814,7 +814,7 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 }
 
-.mapka-tooltip-icon {
+.mapka-popup-icon {
   display: block;
   fill: none;
   height: 16px;
@@ -823,12 +823,12 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
   overflow: visible;
 }
 
-.mapka-tooltip-icon-sm {
+.mapka-popup-icon-sm {
   height: 12px;
   width: 12px;
 }
 
-.mapka-tooltip-icon-star {
+.mapka-popup-icon-star {
   height: 12px;
   width: 12px;
   fill: currentColor;
@@ -836,7 +836,7 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
 }
 
 /* Carousel */
-.mapka-tooltip-carousel {
+.mapka-popup-carousel {
   position: relative;
   width: 100%;
   height: 200px;
@@ -844,20 +844,20 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
   border-radius: 12px 12px 0 0;
 }
 
-.mapka-tooltip-carousel-track {
+.mapka-popup-carousel-track {
   display: flex;
   height: 100%;
   transition: transform 0.3s ease;
 }
 
-.mapka-tooltip-carousel-image {
+.mapka-popup-carousel-image {
   min-width: 100%;
   height: 100%;
   object-fit: cover;
   flex-shrink: 0;
 }
 
-.mapka-tooltip-carousel-actions {
+.mapka-popup-carousel-actions {
   position: absolute;
   top: 12px;
   right: 12px;
@@ -866,7 +866,7 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
   z-index: 3;
 }
 
-.mapka-tooltip-action-btn {
+.mapka-popup-action-btn {
   background: rgba(255, 255, 255, 0.95);
   border: none;
   border-radius: 50%;
@@ -881,12 +881,12 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
   color: #222;
 }
 
-.mapka-tooltip-action-btn:hover {
+.mapka-popup-action-btn:hover {
   background: #fff;
   transform: scale(1.05);
 }
 
-.mapka-tooltip-carousel-btn {
+.mapka-popup-carousel-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -905,20 +905,20 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
   color: #222;
 }
 
-.mapka-tooltip-carousel-btn:hover {
+.mapka-popup-carousel-btn:hover {
   background: #fff;
   transform: translateY(-50%) scale(1.05);
 }
 
-.mapka-tooltip-carousel-prev {
+.mapka-popup-carousel-prev {
   left: 12px;
 }
 
-.mapka-tooltip-carousel-next {
+.mapka-popup-carousel-next {
   right: 12px;
 }
 
-.mapka-tooltip-dots {
+.mapka-popup-dots {
   position: absolute;
   bottom: 12px;
   left: 50%;
@@ -928,7 +928,7 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
   z-index: 2;
 }
 
-.mapka-tooltip-dot {
+.mapka-popup-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
@@ -939,21 +939,21 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
   transition: background 0.2s ease, transform 0.2s ease;
 }
 
-.mapka-tooltip-dot:hover {
+.mapka-popup-dot:hover {
   background: rgba(255, 255, 255, 0.8);
   transform: scale(1.2);
 }
 
-.mapka-tooltip-dot-active {
+.mapka-popup-dot-active {
   background: #fff;
 }
 
 /* Content */
-.mapka-tooltip-content {
+.mapka-popup-content {
   padding: 12px 16px 16px;
 }
 
-.mapka-tooltip-header {
+.mapka-popup-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
@@ -961,7 +961,7 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
   margin-bottom: 4px;
 }
 
-.mapka-tooltip-title {
+.mapka-popup-title {
   margin: 0;
   font-size: 15px;
   font-weight: 600;
@@ -970,24 +970,8 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
   flex: 1;
 }
 
-.mapka-tooltip-rating {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  color: #222;
-  font-size: 14px;
-  flex-shrink: 0;
-}
-
-.mapka-tooltip-rating-value {
-  font-weight: 600;
-}
-
-.mapka-tooltip-rating-count {
-  color: #717171;
-}
 
-.mapka-tooltip-description {
+.mapka-popup-description {
   margin: 0 0 4px 0;
   font-size: 14px;
   color: #717171;
@@ -997,32 +981,4 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
-}
-
-.mapka-tooltip-subtitle {
-  margin: 0 0 8px 0;
-  font-size: 14px;
-  color: #717171;
-  line-height: 1.4;
-}
-
-.mapka-tooltip-price {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  font-size: 14px;
-}
-
-.mapka-tooltip-price-original {
-  color: #717171;
-  text-decoration: line-through;
-}
-
-.mapka-tooltip-price-current {
-  font-weight: 600;
-  color: #222;
-}
-
-.mapka-tooltip-price-suffix {
-  color: #717171;
 }

package/src/types/id.ts

@@ -0,0 +1 @@
+export type WithId<T extends { id: string }> = T & { id: string };

package/src/types/marker.ts

@@ -1,29 +1,28 @@
-export interface MapkaTooltipRating {
-  value: number;
-  count: number;
-}
-
-export interface MapkaTooltipPrice {
-  current: string;
-  original?: string;
-  suffix?: string;
-}
+import type { MarkerOptions, PopupOptions } from "maplibre-gl";
 
-export interface MapkaTooltipOptions {
-  id?: string;
-  trigger?: "hover" | "click";
+export interface MapkaPopupContent {
   title?: string;
-  rating?: MapkaTooltipRating;
   description?: string;
-  subtitle?: string;
-  price?: MapkaTooltipPrice;
   imageUrls?: string[];
   onFavorite?: (id: string) => void;
 }
 
-export interface MapkaMarkerOptions {
-  position: [number, number];
+type CreatePopupElement = (id: string) => HTMLElement;
+type CreatePopupContent = (id: string) => MapkaPopupContent;
+
+export interface MapkaPopupOptions extends PopupOptions {
+  id?: string;
+  lngLat: [number, number];
+  trigger?: "hover" | "click" | "always";
+  content: MapkaPopupContent | HTMLElement | CreatePopupElement | CreatePopupContent;
+}
+
+export type MapkaMarkerPopupOptions = Omit<MapkaPopupOptions, "lngLat">;
+
+export interface MapkaMarkerOptions extends MarkerOptions {
+  id?: string;
+  lngLat: [number, number];
   color?: string;
   icon?: string;
-  tooltip?: MapkaTooltipOptions;
+  popup?: Omit<MapkaPopupOptions, "lngLat">;
 }

package/lib/components/Tooltip.d.ts

@@ -1,9 +0,0 @@
-/** biome-ignore-all lint/correctness/noUnusedImports: <explanation> */
-import { h } from "preact";
-import type { MapkaTooltipOptions } from "../types/marker.js";
-interface TooltipProps extends MapkaTooltipOptions {
-    onClose?: () => void;
-}
-export declare function Tooltip({ id, title, rating, description, subtitle, price, imageUrls, onFavorite, onClose, }: TooltipProps): h.JSX.Element;
-export {};
-//# sourceMappingURL=Tooltip.d.ts.map

package/lib/components/Tooltip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,OAAO,EAAE,CAAC,EAAY,MAAM,QAAQ,CAAC;AAErC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE9D,UAAU,YAAa,SAAQ,mBAAmB;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA2MD,wBAAgB,OAAO,CAAC,EACtB,EAAE,EACF,KAAK,EACL,MAAM,EACN,WAAW,EACX,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,OAAO,GACR,EAAE,YAAY,iBA4Cd"}