@deck.gl-community/widgets 9.2.0-beta.5

package/dist/index.cjs

@@ -0,0 +1,708 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// dist/index.js
+var dist_exports = {};
+__export(dist_exports, {
+  HtmlClusterWidget: () => HtmlClusterWidget,
+  HtmlOverlayItem: () => HtmlOverlayItem,
+  HtmlOverlayWidget: () => HtmlOverlayWidget,
+  HtmlTooltipWidget: () => HtmlTooltipWidget,
+  PanWidget: () => PanWidget,
+  ZoomRangeWidget: () => ZoomRangeWidget
+});
+module.exports = __toCommonJS(dist_exports);
+
+// dist/widgets/pan-widget.js
+var import_jsx_runtime2 = require("preact/jsx-runtime");
+var import_preact2 = require("preact");
+
+// dist/widgets/long-press-button.js
+var import_jsx_runtime = require("preact/jsx-runtime");
+var import_preact = require("preact");
+var REPEAT_DELAY_MS = 300;
+var REPEAT_INTERVAL_MS = 100;
+var LongPressButton = class extends import_preact.Component {
+  buttonPressTimer = null;
+  usingPointerEvents = false;
+  stopEvent(event) {
+    event.stopPropagation();
+    if (typeof event.stopImmediatePropagation === "function") {
+      event.stopImmediatePropagation();
+    }
+    if (typeof event.preventDefault === "function") {
+      event.preventDefault();
+    }
+  }
+  repeat = () => {
+    if (this.buttonPressTimer) {
+      this.props.onClick();
+      this.buttonPressTimer = setTimeout(this.repeat, REPEAT_INTERVAL_MS);
+    }
+  };
+  startPress(event) {
+    this.stopEvent(event);
+    this.props.onClick();
+    this.buttonPressTimer = setTimeout(this.repeat, REPEAT_DELAY_MS);
+  }
+  endPress(event) {
+    if (event) {
+      this.stopEvent(event);
+    }
+    if (this.buttonPressTimer) {
+      clearTimeout(this.buttonPressTimer);
+    }
+    this.buttonPressTimer = null;
+  }
+  handlePointerDown = (event) => {
+    var _a, _b;
+    this.usingPointerEvents = true;
+    (_b = (_a = event.currentTarget) == null ? void 0 : _a.setPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+    this.startPress(event);
+  };
+  handlePointerUp = (event) => {
+    var _a, _b;
+    (_b = (_a = event.currentTarget) == null ? void 0 : _a.releasePointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+    this.endPress(event);
+  };
+  handlePointerCancel = (event) => {
+    var _a, _b;
+    (_b = (_a = event.currentTarget) == null ? void 0 : _a.releasePointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+    this.endPress(event);
+  };
+  handleMouseDown = (event) => {
+    if (this.usingPointerEvents) {
+      return;
+    }
+    this.startPress(event);
+    document.addEventListener("mouseup", this.handleMouseUp, { once: true });
+  };
+  handleMouseUp = (event) => {
+    if (this.usingPointerEvents) {
+      return;
+    }
+    this.endPress(event);
+  };
+  handleTouchStart = (event) => {
+    if (this.usingPointerEvents) {
+      return;
+    }
+    this.startPress(event);
+    document.addEventListener("touchend", this.handleTouchEnd, { once: true });
+    document.addEventListener("touchcancel", this.handleTouchEnd, { once: true });
+  };
+  handleTouchEnd = (event) => {
+    if (this.usingPointerEvents) {
+      return;
+    }
+    this.endPress(event);
+  };
+  render() {
+    return (0, import_jsx_runtime.jsx)("div", { className: "deck-widget-button", children: (0, import_jsx_runtime.jsx)("div", { style: { pointerEvents: "auto" }, onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, onPointerMove: (event) => this.stopEvent(event), onPointerLeave: this.handlePointerCancel, onPointerOut: this.handlePointerCancel, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onMouseMove: (event) => this.stopEvent(event), onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd, onTouchMove: (event) => this.stopEvent(event), onContextMenu: (event) => event.preventDefault(), onWheel: (event) => this.stopEvent(event), onClick: (event) => this.stopEvent(event), children: this.props.children }) });
+  }
+};
+
+// dist/widgets/view-manager-utils.js
+function hasViewManager(deck) {
+  return Boolean(deck && typeof deck === "object" && "viewManager" in deck);
+}
+function cloneViewState(value) {
+  if (value && typeof value === "object") {
+    return { ...value };
+  }
+  return {};
+}
+
+// dist/widgets/pan-widget.js
+var import_core = require("@deck.gl/core");
+var WRAPPER_STYLE = {
+  position: "absolute",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  zIndex: "99",
+  userSelect: "none"
+};
+var NAVIGATION_CONTAINER_STYLE = {
+  position: "relative",
+  background: "#f7f7f7",
+  borderRadius: "23px",
+  border: "0.5px solid #eaeaea",
+  boxShadow: "inset 11px 11px 5px -7px rgba(230, 230, 230, 0.49)",
+  height: "46px",
+  width: "46px"
+};
+var NAVIGATION_BUTTON_STYLE = {
+  color: "#848484",
+  cursor: "pointer",
+  position: "absolute",
+  pointerEvents: "auto"
+};
+var _PanWidget = class extends import_core.Widget {
+  placement = "top-left";
+  className = "deck-widget-pan";
+  deck = null;
+  step;
+  constructor(props = {}) {
+    super({ ..._PanWidget.defaultProps, ...props });
+    this.viewId = props.viewId ?? null;
+    this.placement = props.placement ?? "top-left";
+    this.step = props.step ?? _PanWidget.defaultProps.step;
+  }
+  setProps(props) {
+    if (props.viewId !== void 0) {
+      this.viewId = props.viewId;
+    }
+    if (props.placement !== void 0) {
+      this.placement = props.placement;
+    }
+    if (props.step !== void 0) {
+      this.step = props.step;
+    }
+    super.setProps(props);
+  }
+  onAdd({ deck, viewId }) {
+    this.deck = deck;
+    if (this.viewId === void 0) {
+      this.viewId = viewId;
+    }
+  }
+  onRemove() {
+    this.deck = null;
+  }
+  onRenderHTML(rootElement) {
+    const style = { ...WRAPPER_STYLE, ...this.props.style };
+    Object.assign(rootElement.style, style);
+    const buttons = [
+      { top: -2, left: 14, onClick: () => this.handlePan(0, this.step), label: "\u25B2", key: "up" },
+      { top: 12, left: 0, onClick: () => this.handlePan(this.step, 0), label: "\u25C0", key: "left" },
+      { top: 12, left: 28, onClick: () => this.handlePan(-this.step, 0), label: "\u25B6", key: "right" },
+      { top: 25, left: 14, onClick: () => this.handlePan(0, -this.step), label: "\u25BC", key: "down" }
+    ];
+    const ui = (0, import_jsx_runtime2.jsx)("div", { style: NAVIGATION_CONTAINER_STYLE, children: buttons.map((button) => {
+      const buttonStyle = {
+        ...NAVIGATION_BUTTON_STYLE,
+        top: `${button.top}px`,
+        left: `${button.left}px`
+      };
+      return (0, import_jsx_runtime2.jsx)("div", { style: buttonStyle, children: (0, import_jsx_runtime2.jsx)(LongPressButton, { onClick: button.onClick, children: button.label }) }, button.key);
+    }) });
+    (0, import_preact2.render)(ui, rootElement);
+  }
+  getTargetViewports() {
+    var _a;
+    const deck = this.deck;
+    if (!deck) {
+      return [];
+    }
+    if (this.viewId) {
+      if (hasViewManager(deck)) {
+        const viewport = (_a = deck.viewManager) == null ? void 0 : _a.getViewport(this.viewId);
+        return viewport ? [viewport] : [];
+      }
+      return [];
+    }
+    return deck.getViewports();
+  }
+  getViewState(viewport) {
+    const deck = this.deck;
+    const viewManager = hasViewManager(deck) ? deck.viewManager : null;
+    const viewId = this.viewId || viewport.id;
+    if (viewManager) {
+      try {
+        return { ...viewManager.getViewState(viewId) };
+      } catch (err) {
+        return cloneViewState(viewManager.viewState);
+      }
+    }
+    return cloneViewState(viewport);
+  }
+  handlePan(deltaX, deltaY) {
+    if (!this.deck) {
+      return;
+    }
+    const viewports = this.getTargetViewports();
+    for (const viewport of viewports) {
+      const center = viewport.unproject([viewport.width / 2, viewport.height / 2]);
+      if (center) {
+        const nextPixel = [
+          viewport.width / 2 + deltaX,
+          viewport.height / 2 + deltaY
+        ];
+        const viewState = this.getViewState(viewport);
+        const panUpdate = viewport.panByPosition(center, nextPixel);
+        const nextViewState = { ...viewState, ...panUpdate };
+        const viewId = this.viewId || viewport.id || "default-view";
+        this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
+      }
+    }
+  }
+};
+var PanWidget = _PanWidget;
+__publicField(PanWidget, "defaultProps", {
+  id: "pan",
+  viewId: null,
+  placement: "top-left",
+  step: 48,
+  style: {},
+  className: ""
+});
+
+// dist/widgets/zoom-range-widget.js
+var import_jsx_runtime3 = require("preact/jsx-runtime");
+var import_preact3 = require("preact");
+var import_core2 = require("@deck.gl/core");
+var WRAPPER_STYLE2 = {
+  position: "absolute",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  background: "#f7f7f7",
+  border: "0.5px solid #eaeaea",
+  marginTop: "6px",
+  padding: "2px 0",
+  width: "18px",
+  userSelect: "none",
+  pointerEvents: "auto"
+};
+var ZOOM_BUTTON_STYLE = {
+  cursor: "pointer",
+  fontSize: "14px",
+  fontWeight: "500",
+  margin: "-4px"
+};
+var SLIDER_CONTAINER_STYLE = {
+  display: "inline-block",
+  height: "100px",
+  padding: "0",
+  width: "10px"
+};
+var VERTICAL_SLIDER_STYLE = {
+  writingMode: "vertical-lr",
+  height: "100px",
+  padding: "0",
+  margin: "0",
+  width: "10px"
+};
+var _ZoomRangeWidget = class extends import_core2.Widget {
+  placement = "top-left";
+  className = "deck-widget-zoom-range";
+  deck = null;
+  step;
+  currentZoom = 0;
+  inferredMinZoom = null;
+  inferredMaxZoom = null;
+  constructor(props = {}) {
+    super({ ..._ZoomRangeWidget.defaultProps, ...props });
+    this.viewId = props.viewId ?? null;
+    this.placement = props.placement ?? "top-left";
+    this.step = props.step ?? _ZoomRangeWidget.defaultProps.step;
+  }
+  setProps(props) {
+    if (props.viewId !== void 0) {
+      this.viewId = props.viewId;
+    }
+    if (props.placement !== void 0) {
+      this.placement = props.placement;
+    }
+    if (props.step !== void 0) {
+      this.step = props.step;
+    }
+    super.setProps(props);
+  }
+  onAdd({ deck, viewId }) {
+    this.deck = deck;
+    if (this.viewId === void 0) {
+      this.viewId = viewId;
+    }
+  }
+  onRemove() {
+    this.deck = null;
+  }
+  onRenderHTML(rootElement) {
+    const style = { ...WRAPPER_STYLE2, ...this.props.style };
+    Object.assign(rootElement.style, style);
+    const { minZoom, maxZoom } = this.getZoomBounds();
+    const clampedZoom = Math.max(minZoom, Math.min(maxZoom, this.currentZoom));
+    const stopEventPropagation = (event) => {
+      event.stopPropagation();
+      if (typeof event.stopImmediatePropagation === "function") {
+        event.stopImmediatePropagation();
+      }
+    };
+    const ui = (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [(0, import_jsx_runtime3.jsx)("div", { style: ZOOM_BUTTON_STYLE, children: (0, import_jsx_runtime3.jsx)(LongPressButton, { onClick: () => this.handleZoomDelta(this.step), children: "+" }) }), (0, import_jsx_runtime3.jsx)("div", { style: SLIDER_CONTAINER_STYLE, onPointerDown: stopEventPropagation, onPointerMove: stopEventPropagation, onPointerUp: stopEventPropagation, onMouseDown: stopEventPropagation, onMouseMove: stopEventPropagation, onMouseUp: stopEventPropagation, onClick: stopEventPropagation, onWheel: stopEventPropagation, onTouchStart: stopEventPropagation, onTouchMove: stopEventPropagation, onTouchEnd: stopEventPropagation, children: (0, import_jsx_runtime3.jsx)("input", {
+      type: "range",
+      value: clampedZoom,
+      min: minZoom,
+      max: maxZoom,
+      step: this.step,
+      onInput: (event) => this.handleZoomTo(Number(event.target.value)),
+      onChange: (event) => this.handleZoomTo(Number(event.target.value)),
+      onPointerDown: stopEventPropagation,
+      onPointerMove: stopEventPropagation,
+      onPointerUp: stopEventPropagation,
+      onMouseDown: stopEventPropagation,
+      onMouseMove: stopEventPropagation,
+      onMouseUp: stopEventPropagation,
+      onClick: stopEventPropagation,
+      onWheel: stopEventPropagation,
+      onTouchStart: stopEventPropagation,
+      onTouchMove: stopEventPropagation,
+      onTouchEnd: stopEventPropagation,
+      /* @ts-expect-error - non-standard attribute for vertical sliders */
+      orient: "vertical",
+      style: VERTICAL_SLIDER_STYLE
+    }) }), (0, import_jsx_runtime3.jsx)("div", { style: ZOOM_BUTTON_STYLE, children: (0, import_jsx_runtime3.jsx)(LongPressButton, { onClick: () => this.handleZoomDelta(-this.step), children: "-" }) })] });
+    (0, import_preact3.render)(ui, rootElement);
+  }
+  onViewportChange(viewport) {
+    const viewState = this.getViewState(viewport);
+    const zoom = Number(viewState == null ? void 0 : viewState.zoom);
+    if (Number.isFinite(zoom)) {
+      this.currentZoom = zoom;
+    }
+    if (this.props.minZoom === void 0) {
+      const minZoom = Number(viewState == null ? void 0 : viewState.minZoom);
+      if (Number.isFinite(minZoom)) {
+        this.inferredMinZoom = minZoom;
+      }
+    }
+    if (this.props.maxZoom === void 0) {
+      const maxZoom = Number(viewState == null ? void 0 : viewState.maxZoom);
+      if (Number.isFinite(maxZoom)) {
+        this.inferredMaxZoom = maxZoom;
+      }
+    }
+    this.updateHTML();
+  }
+  getZoomBounds() {
+    const minZoom = this.props.minZoom ?? this.inferredMinZoom ?? Number.NEGATIVE_INFINITY;
+    const maxZoom = this.props.maxZoom ?? this.inferredMaxZoom ?? Number.POSITIVE_INFINITY;
+    if (minZoom > maxZoom) {
+      return { minZoom: maxZoom, maxZoom: minZoom };
+    }
+    return {
+      minZoom: Number.isFinite(minZoom) ? minZoom : -20,
+      maxZoom: Number.isFinite(maxZoom) ? maxZoom : 20
+    };
+  }
+  getTargetViewports() {
+    var _a;
+    const deck = this.deck;
+    if (!deck) {
+      return [];
+    }
+    if (this.viewId) {
+      if (hasViewManager(deck)) {
+        const viewport = (_a = deck.viewManager) == null ? void 0 : _a.getViewport(this.viewId);
+        return viewport ? [viewport] : [];
+      }
+      return [];
+    }
+    return deck.getViewports();
+  }
+  getViewState(viewport) {
+    const deck = this.deck;
+    const viewManager = hasViewManager(deck) ? deck.viewManager : null;
+    const viewId = this.viewId || viewport.id;
+    if (viewManager) {
+      try {
+        return { ...viewManager.getViewState(viewId) };
+      } catch (err) {
+        return cloneViewState(viewManager.viewState);
+      }
+    }
+    return cloneViewState(viewport);
+  }
+  handleZoomDelta(delta) {
+    const { minZoom, maxZoom } = this.getZoomBounds();
+    for (const viewport of this.getTargetViewports()) {
+      const viewState = this.getViewState(viewport);
+      const baseZoom = Number(viewState.zoom);
+      const current = Number.isFinite(baseZoom) ? baseZoom : this.currentZoom;
+      const nextZoom = Math.max(minZoom, Math.min(maxZoom, current + delta));
+      this.updateViewState(viewport, { ...viewState, zoom: nextZoom });
+    }
+  }
+  handleZoomTo(zoom) {
+    const { minZoom, maxZoom } = this.getZoomBounds();
+    const nextZoom = Math.max(minZoom, Math.min(maxZoom, zoom));
+    for (const viewport of this.getTargetViewports()) {
+      const viewState = this.getViewState(viewport);
+      this.updateViewState(viewport, { ...viewState, zoom: nextZoom });
+    }
+  }
+  updateViewState(viewport, viewState) {
+    if (!this.deck) {
+      return;
+    }
+    const viewId = this.viewId || viewport.id || "default-view";
+    this.currentZoom = Number(viewState.zoom) || this.currentZoom;
+    this.updateHTML();
+    this.deck._onViewStateChange({ viewId, viewState, interactionState: {} });
+  }
+};
+var ZoomRangeWidget = _ZoomRangeWidget;
+__publicField(ZoomRangeWidget, "defaultProps", {
+  id: "zoom-range",
+  viewId: null,
+  placement: "top-left",
+  minZoom: void 0,
+  maxZoom: void 0,
+  step: 0.1,
+  style: {},
+  className: ""
+});
+
+// dist/widgets/html-overlay-widget.js
+var import_jsx_runtime4 = require("preact/jsx-runtime");
+var import_preact4 = require("preact");
+var import_core3 = require("@deck.gl/core");
+var ROOT_STYLE = {
+  width: "100%",
+  height: "100%",
+  position: "absolute",
+  pointerEvents: "none",
+  overflow: "hidden"
+};
+var _HtmlOverlayWidget = class extends import_core3.Widget {
+  placement = "fill";
+  className = "deck-widget-html-overlay";
+  deck = null;
+  viewport = null;
+  constructor(props = {}) {
+    super({ ..._HtmlOverlayWidget.defaultProps, ...props });
+    this.viewId = props.viewId ?? null;
+  }
+  setProps(props) {
+    if (props.viewId !== void 0) {
+      this.viewId = props.viewId;
+    }
+    super.setProps(props);
+  }
+  onAdd({ deck, viewId }) {
+    this.deck = deck;
+    if (this.viewId === void 0) {
+      this.viewId = viewId;
+    }
+  }
+  onRemove() {
+    this.deck = null;
+    this.viewport = null;
+  }
+  onViewportChange(viewport) {
+    if (!this.viewId || this.viewId === viewport.id) {
+      this.viewport = viewport;
+      this.updateHTML();
+    }
+  }
+  getViewport() {
+    return this.viewport;
+  }
+  getZoom() {
+    var _a;
+    return ((_a = this.viewport) == null ? void 0 : _a.zoom) ?? 0;
+  }
+  scaleWithZoom(n) {
+    return n / Math.pow(2, 20 - this.getZoom());
+  }
+  breakpointWithZoom(threshold, a, b) {
+    return this.getZoom() > threshold ? a : b;
+  }
+  getCoords(viewport, coordinates) {
+    const pos = viewport.project(coordinates);
+    if (!pos)
+      return [-1, -1];
+    return pos;
+  }
+  inView(viewport, [x, y]) {
+    const overflowMargin = this.props.overflowMargin ?? 0;
+    const { width, height } = viewport;
+    return !(x < -overflowMargin || y < -overflowMargin || x > width + overflowMargin || y > height + overflowMargin);
+  }
+  getOverlayItems(viewport) {
+    const { items } = this.props;
+    return items ? (0, import_preact4.toChildArray)(items) : [];
+  }
+  projectItems(items, viewport) {
+    const renderItems = [];
+    items.filter(Boolean).forEach((item, index) => {
+      var _a;
+      const coordinates = (_a = item.props) == null ? void 0 : _a.coordinates;
+      if (!coordinates) {
+        return;
+      }
+      const [x, y] = this.getCoords(viewport, coordinates);
+      if (this.inView(viewport, [x, y])) {
+        const key = item.key === null || item.key === void 0 ? index : item.key;
+        renderItems.push((0, import_preact4.cloneElement)(item, { x, y, key }));
+      }
+    });
+    return renderItems;
+  }
+  onRenderHTML(rootElement) {
+    Object.assign(rootElement.style, ROOT_STYLE, { zIndex: `${this.props.zIndex ?? 1}` });
+    const viewport = this.getViewport();
+    if (!viewport) {
+      (0, import_preact4.render)(null, rootElement);
+      return;
+    }
+    const overlayItems = this.getOverlayItems(viewport);
+    const renderedItems = this.projectItems(overlayItems, viewport);
+    (0, import_preact4.render)((0, import_jsx_runtime4.jsx)(import_preact4.Fragment, { children: renderedItems }), rootElement);
+  }
+};
+var HtmlOverlayWidget = _HtmlOverlayWidget;
+__publicField(HtmlOverlayWidget, "defaultProps", {
+  id: "html-overlay",
+  viewId: null,
+  overflowMargin: 0,
+  zIndex: 1,
+  style: {},
+  className: ""
+});
+
+// dist/widgets/html-overlay-item.js
+var import_jsx_runtime5 = require("preact/jsx-runtime");
+function HtmlOverlayItem({ x = 0, y = 0, children, style, ...props }) {
+  const { zIndex = "auto", ...remainingStyle } = style || {};
+  return (
+    // Using transform translate to position overlay items will result in a smooth zooming
+    // effect, whereas using the top/left css properties will cause overlay items to
+    // jiggle when zooming
+    (0, import_jsx_runtime5.jsx)("div", { style: { transform: `translate(${x}px, ${y}px)`, position: "absolute", zIndex: `${zIndex}` }, children: (0, import_jsx_runtime5.jsx)("div", { style: { userSelect: "none", ...remainingStyle }, ...props, children }) })
+  );
+}
+
+// dist/widgets/html-cluster-widget.js
+var import_helpers = require("@turf/helpers");
+var import_supercluster = __toESM(require("supercluster"), 1);
+var HtmlClusterWidget = class extends HtmlOverlayWidget {
+  superCluster = null;
+  lastObjects = null;
+  getOverlayItems(viewport) {
+    var _a;
+    const newObjects = this.getAllObjects();
+    if (newObjects !== this.lastObjects) {
+      this.superCluster = new import_supercluster.default(this.getClusterOptions());
+      this.superCluster.load(newObjects.map((object) => (0, import_helpers.point)(this.getObjectCoordinates(object), { object })));
+      this.lastObjects = newObjects;
+    }
+    const clusters = ((_a = this.superCluster) == null ? void 0 : _a.getClusters([-180, -90, 180, 90], Math.round(this.getZoom()))) ?? [];
+    const overlayItems = clusters.map(({ geometry: { coordinates }, properties: { cluster, point_count: pointCount, cluster_id: clusterId, object } }) => cluster ? this.renderCluster(coordinates, clusterId, pointCount) : this.renderObject(coordinates, object));
+    return overlayItems.filter(Boolean);
+  }
+  getClusterObjects(clusterId) {
+    var _a;
+    return ((_a = this.superCluster) == null ? void 0 : _a.getLeaves(clusterId, Infinity).map((leaf) => leaf.properties.object)) ?? [];
+  }
+  // Get options object used when instantiating supercluster
+  getClusterOptions() {
+    return {
+      maxZoom: 20
+    };
+  }
+};
+__publicField(HtmlClusterWidget, "defaultProps", {
+  ...HtmlOverlayWidget.defaultProps,
+  id: "html-cluster-overlay"
+});
+
+// dist/widgets/html-tooltip-widget.js
+var import_jsx_runtime6 = require("preact/jsx-runtime");
+var TOOLTIP_STYLE = {
+  transform: "translate(-50%,-100%)",
+  backgroundColor: "rgba(0, 0, 0, 0.3)",
+  padding: "4px 8px",
+  borderRadius: 8,
+  color: "white"
+};
+var SHOW_TOOLTIP_TIMEOUT = 250;
+function defaultGetTooltip(pickingInfo) {
+  var _a, _b;
+  return (_b = (_a = pickingInfo.object) == null ? void 0 : _a.style) == null ? void 0 : _b.tooltip;
+}
+var HtmlTooltipWidget = class extends HtmlOverlayWidget {
+  timeoutID = null;
+  pickingInfo = null;
+  visible = false;
+  onRemove() {
+    if (this.timeoutID !== null) {
+      globalThis.clearTimeout(this.timeoutID);
+      this.timeoutID = null;
+    }
+    this.visible = false;
+    this.pickingInfo = null;
+  }
+  onHover(pickingInfo) {
+    var _a, _b;
+    if (this.timeoutID !== null) {
+      globalThis.clearTimeout(this.timeoutID);
+      this.timeoutID = null;
+    }
+    const tooltipContent = (_b = (_a = this.props).getTooltip) == null ? void 0 : _b.call(_a, pickingInfo);
+    if (pickingInfo && tooltipContent) {
+      const delay = this.props.showDelay ?? SHOW_TOOLTIP_TIMEOUT;
+      this.timeoutID = globalThis.setTimeout(() => {
+        this.visible = true;
+        this.pickingInfo = pickingInfo;
+        this.updateHTML();
+      }, delay);
+    } else {
+      this.visible = false;
+      this.pickingInfo = null;
+      this.updateHTML();
+    }
+  }
+  getOverlayItems(viewport) {
+    var _a, _b;
+    if (!this.visible || !this.pickingInfo) {
+      return [];
+    }
+    const tooltipContent = (_b = (_a = this.props).getTooltip) == null ? void 0 : _b.call(_a, this.pickingInfo);
+    const coordinates = this.pickingInfo.coordinate ?? this.pickingInfo.lngLat ?? null;
+    if (!tooltipContent || !coordinates) {
+      return [];
+    }
+    return [
+      (0, import_jsx_runtime6.jsx)(HtmlOverlayItem, { coordinates, style: TOOLTIP_STYLE, children: tooltipContent }, "tooltip")
+    ];
+  }
+};
+__publicField(HtmlTooltipWidget, "defaultProps", {
+  ...HtmlOverlayWidget.defaultProps,
+  id: "html-tooltip-overlay",
+  showDelay: SHOW_TOOLTIP_TIMEOUT,
+  getTooltip: defaultGetTooltip
+});
+//# sourceMappingURL=index.cjs.map