@mapka/maplibre-gl-sdk 0.8.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

@@ -804,5 +804,181 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
   position: fixed !important;
   top: 0 !important;
   width: 100% !important;
-  z-index: 99999
+}
+
+/* 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/types/id.ts

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

package/src/types/marker.ts

@@ -1,13 +1,28 @@
-export interface MapkaTooltipOptions {
-  trigger?: "hover" | "click";
+import type { MarkerOptions, PopupOptions } from "maplibre-gl";
+
+export interface MapkaPopupContent {
   title?: string;
   description?: string;
   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/modules/tooltip.d.ts

@@ -1,15 +0,0 @@
-import * as maplibregl from "maplibre-gl";
-import type { MapkaTooltipOptions } from "../types/marker.js";
-/**
- * Shows a tooltip for a marker
- */
-export declare function showTooltip(marker: maplibregl.Marker, options: MapkaTooltipOptions, map: maplibregl.Map): void;
-/**
- * Hides the current tooltip
- */
-export declare function hideTooltip(): void;
-/**
- * Gets the current visible popup
- */
-export declare function getCurrentTooltip(): maplibregl.Popup | null;
-//# sourceMappingURL=tooltip.d.ts.map

package/lib/modules/tooltip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/modules/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,aAAa,CAAC;AAC1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAuS9D;;GAEG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,UAAU,CAAC,MAAM,EACzB,OAAO,EAAE,mBAAmB,EAC5B,GAAG,EAAE,UAAU,CAAC,GAAG,QAwBpB;AAED;;GAEG;AACH,wBAAgB,WAAW,SAK1B;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,UAAU,CAAC,KAAK,GAAG,IAAI,CAE3D"}